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 :)
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
fillstyle property to the icon component to change its color or w/e.Install webpack svg loader
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.