
Show HN: SVG-to-React – convert your SVG assets into accessible React components - TheSisb2
https://github.com/twilio-labs/svg-to-react
======
TheSisb2
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!

