storybook-addon-svgr

Storybook addon for transforming SVGs into React components using SVGR

Installation

Install Storybook and @newhighsco/storybook-addon-svgr:

yarn add -D storybook @newhighsco/storybook-addon-svgr @storybook/react-webpack5

Usage

Create a .storybook/main.js in your project:

1// .storybook/main.js
2/** @type { import('@storybook/react-webpack5').StorybookConfig } */
3const config = {
4  framework: '@storybook/react-webpack5',
5  addons: [
6    {
7      name: '@newhighsco/storybook-addon-svgr',
8      options: {
9        svgrOptions: {
10          /* config options here */
11        }
12      }
13    }
14  ]
15}
16
17export default config

In your code:

1import starUrl, { ReactComponent as Star } from './star.svg'
2
3const App = () => (
4  <>
5    <img src={starUrl} alt="star" />
6    <Star />
7  </>
8)

Options

See options supported by SVGR. Alternatively create a SVGR configuration file in your project:

CHANGELOG