-
I'm curious why in dome project of ignite uses PNG instead of one file of SVG. Why is PNG better? I suppose there was a good reason for that. I think before ignite used awesome icons. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
HI @ryskin ! Great question! You're right! Quick history: So, to summarize, the SVG icons were built-in in the very beginning and in 2.0 were extracted to a plugin and in 6.0 no longer available under the "ignite" brand. Having said that, the svg icon plugin was just a tool to install react-native-vector-icon which can still be achieved today albeit manually using yarn/npm. As to the why... Most of the projects Infinite Red builds today are custom designs with custom icons (rather than ones obtained from icon-sets like font-awesome). The process from conception to implementation looks more/less like this:
When working with SVGs in react-native, there are a few additional steps in my experience (it might have gotten easier recently but I'm not on top of the latest). Firstly, an additional library is needed to render SVGs. Something like So you can see how things are a bit harder and more time consuming dealing with custom SVG exports - that's why we've just been using the simple-to-deal-with and proven approach.
I think the answer to this is - it depends.. For us, using PNGs is just simpler and more performant. There are a few drawbacks however. First, yes you have 3 DPIs of each icon. Additionally, you have to be aware of how you export (do the icons have padding? are the sizes the same? etc). Your icon library can definitely get out of control quickly, especially if you have a few devs on the same project. Lastly, if you are developing something that's using FontAwesome (and the like), might as well just install the library and use the provided glyphs (no need to export icons as PNGs). Or, if you have custom icons but want to organize things in a single file, you could generate a font with your custom SVGs. Hope this helps! |
Beta Was this translation helpful? Give feedback.
HI @ryskin ! Great question!
You're right! Quick history:
The first versions of Ignite (2016) used icon font files bundled with the boilerplate. Later that was refactored into a plugin and vector icons became opt-in. Meanwhile, the boilerplate shifted to a more leaner design (using the plugin system to augment when needed). Only icons "required" for the base boilerplate were bundled which were pngs. In 2018, the first version of the Icon component was added which used pngs exclusively. In 2020, plugins became deprecated and no longer supported.
So, to summarize, the SVG icons were built-in in the very beginning and in 2.0 were extracted to a plugin and in 6.0 no longer available under th…