storybook-preset-inline-svg

storybook-preset-inline-svg

A Storybook preset to load SVG files inline using svg-inline-loader.

Basic Usage

First npm install storybook-preset-inline-svg svg-inline-loader

Then update one of the following files based on your Storybook setup:

• .storybook/main.js

  module.exports = {
      addons: ['storybook-preset-inline-svg']
  }
  

• .storybook/presets.js

  module.exports = ['storybook-preset-inline-svg']
  

Advanced Usage

By default this preset will inline all SVG files. Use options to filter which SVG files are inlined, or to pass options along to svg-inline-loader.

None of the options are required. Only use one of include or exclude, not both, which can be a RegExp or Function.

• svgInlineLoaderOptions options supported by svg-inline-loader
• include files to be inlined using include
• exclude files from being inlined using exclude

For example,

module.exports = {
  addons: [
    {
      name: 'storybook-preset-inline-svg',
      options: {
        include: /source\/.+\.svg$/,
        svgInlineLoaderOptions: {
          removeTags: true,
          removingTags: ['circle']
        }
      }
    }
  ]
}