using svg as react component

Question

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

You need to include the code in the question itself.

Perry
– Perry

2020-06-20 00:21:36 +00:00
Commented Jun 20, 2020 at 0:21 — Perry
– Perry, Commented Jun 20, 2020 at 0:21

hangindev.com · Accepted Answer · 2020-06-20 00:13:45Z

2

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.

answered Jun 20, 2020 at 0:13

hangindev.com

4,89214 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tachko · Accepted Answer · 2020-06-19 23:21:48Z

0

you should use the img tag

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

answered Jun 19, 2020 at 23:21

tachko

1612 silver badges8 bronze badges

2 Comments

khaliloos benk Over a year ago

thank you for your response , so how can u change the color of the svg ?

tachko Over a year ago

I see that on the sandbox you have react and react-dom version 16.0.0. have you tried updating to 16.4 or above?

Gabor Szabo · Accepted Answer · 2020-06-19 23:53:46Z

0

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

edited Jun 19, 2020 at 23:53

answered Jun 19, 2020 at 23:48

Gabor Szabo

2112 silver badges6 bronze badges

1 Comment

khaliloos benk Over a year ago

thank u man about ur explication , currently i m using react boilerpate not create react app

Collectives™ on Stack Overflow

using svg as react component

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related