Comment by Yury on "How to use SVG's in React"

Probably not worth my time to write this but i wanted to try out the editor (and it's buggy lol)

Basically, don't ever do this unless you are actually using dynamic svg in your project. Your code is not reusable and also I think this probably adds more unnecessary computation because react has to diff the dom tree and your complex svg logo data props are now part of that dom tree.

99.9% of the time, you are better off just dropping the svg icon file that you downloaded from the webz into some folder and using a webpack SVG loader. Then, you can simply pass in a custom css fill style property to the icon component to change its color or w/e.

Install webpack svg loader

npm install @svgr/webpack

Update your webpack config

{
 test: /\.svg$/,
 use: ['@svgr/webpack']
},

Import icons and render them

import i_react from './icons/react-icon.svg'
....
<i_react style={fill:"red"}/>

that's literally all you have to do.

( u can still use react memoization to skip rendering the react rendered svg, but don't do that lol )

Hey Yury,

Thanks a lot for taking the time to reply!

I find it hard to understand how you think the code is not reusable since I literally re-used it there. As you have mentioned, my solution would cause more computation but I would argue if it is unnecessary.

Even though your approach is completely valid, once you need to have more access to the SVG properties, it is not satisfying at all. So it is completely developers responsibility to decide on which way to follow, depending on how they are going to use SVG files in their project. But once again thanks for taking the time and coming up with another approach, I really appreciate it :)

Emin Aydin

Okay sorry, let me clarify. I was just going off of your example, where you only changed the color. This is what most devs (like 99%) will probably do for which you can simply use svg css styling, that is why you would want to treat it like a reusable icon

However.... if you indeed want to animate custom svg properties for your logo, I would suggest you use an appropriate library because animating svg props manually without abstractions (like relative positioning and data attributes) is not for beginners ;)

hope this helps! :)

Search Hashnode