【React】SVGを表示できないときの対処法

どうも。へんじにゃ@hengin_blogです。

今回はInkscapeで作ったSVGをReactで表示する際にてこずったので記事にしました

エラー

以下の通り

Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

原因・解決策

jsxではキャメルケースを使用する必要があるみたい

githubのissueでも

I fixed this issue by modifying the naming scheme of the attributes within the svg file to camel case. For example:

• xmlns:xlink becomes xmlnsXlink
• xml:space becomes xmlSpace
• etc.

After resolving this syntax error, the importing { ReactComponent as x} approach mentioned above successfully rendered the svg. For reference, the fix can be found originally on this StackOverflow answer.

とあるように、xmlns:svgなどをxmlnsSvgなどに変換するといいです

参考にした記事

stackoverflow.com

github.com

最後まで閲覧頂きありがとうございました😂😂

参考になったら読者登録よろしくお願いいたします！！
読者登録返しします！！

読者になる