使用 svg 作为反应组件

Question

im trying to use SVG with react, but i can ti tried some solution, result i didn't find why i get this error:

InvalidCharacterError
Failed to execute 'createElement' on 'Document': The tag name provided ('<svg>
<g transform="translate(0.000000,227.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<

if there anyone who can help me i will be very thankful. example of the code in codesandbox: https://codesandbox.io/s/svg-in-react-r3g6l?file=/index.js

Answer 1

This is what I usually do:

Visit https://react-svgr.com/playground/ and paste in your SVG and it will transform the SVG into React component. It lets you pass SVG attributes as props.

You may check out its original library - svgr for other usages.

Answer 2

you should use the img tag

import Logo from "./Logo.svg
<img src={Logo} alt="Logo" />

Answer 3

"As part of features added to the new version of create-react-app (v2), we can now import SVGs as React components."

Check this article for more options: using-svg-icons-components-in-react

*Edit: to change the color of the svg, use the 'fill' propery in CSS. You can add id or class inside your svg to select it.

fill: red;