React SVG Server

In the past, we have turned to icon fonts, and more recently to SVG sprites. Github did a great writeup on their conversion from icon fonts and how they came to the decision of inlining all of their svg throughout the site.

Today on css-tricks, Sarah Drasner wrote a wonderful article on creating a SVG icon system with React. Her method as well ends up inlining all of the svg onto the page directly. One comment that came out of the article pointed out the fact that if you had a list of perhaps thousands of items all using different icons per list item, you would be outputting a lot of the same markup.

However, I loved the idea of having React components that generate out your svg icons from a small set of options (props). So my hope was to create a svg server that uses the React components to output svg files to the browser. This would allow for direct linking using <img> tags and thus benefiting from caching and still allow for positioning from a dom perspective as it would be treated as it’s own element.

Using the server side rendering from React it was actually fairly easy to put together a quick server. I have one running now on cloud9 for demo purposes:



Test Icon

I added the ability to also add query string parameters to the url which get passed as props to the React component (width, height).

Github Repo