Visio에서 만든 svg 파일을 react에서 불러들이기

1 목표

visio를 이용하여 만든 svg 파일을 react로 로드하여 각 element를 제어

2 문제점

visio에서 만든 svg 그림파일을 react로 로드할때 아래와 같은 에러 메세지가 출력

2.1 namespace tag 를 지원하지 않음

Compiled with problems:X

ERROR in ./src/asset/drawoing4.svg

Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
   6 |   ...props
   7 | }, svgRef) {
>  8 |   return <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/"

2.2 CDATA 과 관련된 오류

Compiled with problems:X

ERROR in ./src/asset/drawoing4.svg

Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
Error: Expected node, got `
		.st1 {fill:#ff5555;stroke:#800000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
		.st2 {fill:#000000;font-family:맑은 고딕;font-size:1.00001em}
		.st3 {fill:#ffffff;font-family:맑은 고딕;font-size:1.00001em}
		.st4 {fill:#55ff55;stroke:#008000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
		.st5 {fill:#008000;font-family:맑은 고딕;font-size:1.00001em}
		.st6 {fill:#5555ff;stroke:#000080;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
		.st7 {fill:#000080;font-family:맑은 고딕;font-size:1.00001em}
		.st8 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
	`
    at one (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:12:11)
    at all (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\all.js:20:37)
    at element (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\handlers.js:51:37)
    at one (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:19:10)
    at all (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\all.js:20:37)
    at element (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\handlers.js:51:37)
    at one (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:19:10)
    at all (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\all.js:20:37)
    at root (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\handlers.js:20:54)
    at one (D:\projects\react-svg-test\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:19:10)

3 해결방법

4 같이 보기

[[ ]]
[[ ]]
[[ ]]
[[ ]]
[[ ]]
[[ ]]

5 참고

[[분류: ]] [[분류: ]]