DEV Community

Discussion on: The hitchhiker's guide to reusable Icons and SVG sprite generation

Collapse
iamwebwiz profile image
Ezekiel Oladejo

πŸ‘πŸ½πŸ‘πŸ½πŸ‘πŸ½ Thanks for sharing.
So, I just want to confirm if the label or the icon prop being passed into the reusable component created in the latter part of the article has to match with the name of the svg file in the src/icons directory? Also, could the icons be discarded or they need to remain there even after generating the sprite?

Thank you.

Collapse
itope84 profile image
Ilesanmi Temitope Author

Yes, the name of the svg file will be passed as the icon prop. The label prop is used for accessibility (for screen readers).

Theoretically, the icons could be discarded since the only thing we need is the svg sprite. But you don’t want to do that for several reasons

  1. Version control. Ideally the sprite itself should not be committed to version control (to avoid merge conflicts). Hence the script generating the sprite (grunt) should be run as part of your CI/CD process, so you’ll want the icons to be there when that is run

  2. You’ll need to add new icons someday (the point is to be able to automate it). If you’d deleted previous icons and then added new icons, the new sprite generated will only contain the new icons and you would’ve lost your previous icons

Collapse
iamwebwiz profile image
Ezekiel Oladejo

Makes sense. Thanks for the clarification.πŸ‘πŸ½