Composable SVGs in React

The modern web has taught us that using SVGs is a good idea; they scale well on all screen sizes, they have fairly small file sizes, and can be edited easily with CSS. However, using them in a modern single-page app is a bit of a pain. To be piped through Webpack, they need a special loader, and often custom SVG components for libraries like React. And while it’s still possible to change the style (colour, size, etc) of the imported SVGs, it’s a little cumbersome. There must be a better way.


This is my new website, where I'm going to try and blog at least once every fortnight; maybe a tutorial about something I've learnt over the past couple of weeks, or a book review of a book (technical or not) I've read recently. I'll also report back on any conferences, meetups or other groups I attend.

I may also post stuff I find interesting on the internet, in the format of a linked list (think Daring Fireball).

This website is very much a v0.0.1, I have a lot I need to do on it, but I think I've made a pretty good start. If you'd like to view the source, I've made it publically available here.

Thanks for reading!

Tom Oakley