Hey HN! I'm really happy to be sharing this with you all today. I've been working on React projects for about 4 years now and I've always found that SVGs (whether icons or full illustrations) are best represented in my projects as individual React components. Some of the benefits are that:
- It's easier to control your SVGs with clearly defined props
- You can bake in accessibility into your illustrations
- Unlike to icon fonts which load the entire font, you can leverage modern module loading practices to only load the SVGs you need (i.e.: import HackerNewsIcon from '...')
- Unlike in-lining SVGs, the resource can be cached, bundled, and re-used multiple times without duplicating the contents.
- This tool automatically strips away `id`s so you don't have id collisions.
- Since it's a component, you can modify it to, for example, show a different SVG under a different locale if the English design doesn't translate well.
This has helped our little design system team off-load the incoming requests to add new icons back out to the requesting teams. And if an icon doesn't meet the requirements of our system, consumers can continue to use them in their own projects while still being aligned on props and a11y.
Hope you all find this useful too!
