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

Storybook 10+ uses ESM-only config. Update .storybook/main.ts (or .storybook/main.js):

export default {
  addons: ['storybook-preset-inline-svg'],
}

TypeScript example with types:

import type { StorybookConfig } from '@storybook/react'

const config: StorybookConfig = {
  addons: ['storybook-preset-inline-svg'],
}

export default config

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,

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