cool

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! :)

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

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.