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:
// .storybook/main.js
/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
framework: '@storybook/react-webpack5',
addons: [
{
name: '@newhighsco/storybook-addon-svgr',
options: {
svgrOptions: {
/* config options here */
}
}
}
]
}
export default config
In your code:
import starUrl, { ReactComponent as Star } from './star.svg'
const App = () => (
<>
<img src={starUrl} alt="star" />
<Star />
</>
)
Options
See options supported by SVGR. Alternatively create a SVGR configuration file in your project: