CODEWITHSUNDEEP
javascriptreactjssvg
khaliloos benk
khaliloos benk

Reputation: 87

using svg as react component

i m trying to use SVG with react, but i can t.i 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

Upvotes: 0

Views: 4333

Answers (3)

hangindev.com
hangindev.com

Reputation: 4873

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.

Upvotes: 2

Gabor Szabo
Gabor Szabo

Reputation: 211

"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;

Upvotes: 0

tachko
tachko

Reputation: 161

you should use the img tag

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

Upvotes: 0

Related Questions