Storybook & Atomic Design - 1.7. - SVG Support

Опубликовано: 16 Июль 2026
на канале: whatjackhasmade
2,718
35

Full course lesson post - https://whatjackhasmade.co.uk/storybo...
GitHub Project Repository - https://github.com/whatjackhasmade/st...

SVGs are amazing, they allow us to make use of vector graphics within our applications and have support for CSS properties like `stroke` and `fill` allowing us to dynamically change the styles of the icons in our application.

Before we can go about importing SVGs as assets for our components, we have to add some configuration to our Storybook environment to handle the importing of the files.

I've taken a Storybook `webpack.config.js` example and slightly reworked it to enable SVGs for both Storybook and future-proofing the setup for Gatsby.

Example inspired by - https://github.com/storybookjs/storyb...