storybook-preset-inline-svg

一个 Storybook preset，使用 svg-inline-loader 内联加载 SVG 文件。

基本用法

首先 npm install storybook-preset-inline-svg svg-inline-loader

然后根据您的 Storybook 配置更新以下文件之一

• .storybook/main.js

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

• .storybook/presets.js

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

高级用法

默认情况下，此 preset 会内联所有 SVG 文件。使用选项来过滤要内联的 SVG 文件，或将选项传递给 svg-inline-loader。

所有选项都不是必需的。include 和 exclude 只使用其中一个，不能同时使用，它们可以是 RegExp 或 Function。

• svgInlineLoaderOptions svg-inline-loader 支持的选项
• include 使用 include 包含要内联的文件
• exclude 使用 exclude 排除要内联的文件

例如，

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