有没有办法将本地 svg 文件包含到我与自定义 Angular 库一起使用的 Storybook 中？答案

【问题标题】：Is there a way to include local svg files into Storybook that I am using with a custom Angular Library?有没有办法将本地 svg 文件包含到我与自定义 Angular 库一起使用的 Storybook 中？
【发布时间】：2020-09-30 06:42:37
【问题描述】：

我的任何本地 svg 文件都无法显示在 Storybook 中。

我已将新规则推送到 .storybook 文件夹下 main.js 中 Storybook 的 webpack 配置文件，并且正在使用 svg-inline-loader 来处理 svg 文件（已安装）。

config.module.rules.push({
  test: /\.svg$/,
  include: path.resolve(__dirname, './'),
  use: [{
    loader: 'svg-inline-loader'
  }],
});

我尝试编辑 package.json 以允许使用 -s 标志并传入一个参数，该参数直接指向包含 svg 文件的资产文件夹。

我在网络检查器上得到 404 返回

Request URL: http://localhost:6006/assets/icon.svg
Request Method: GET
Status Code: 404 Not Found

已尝试创建 custom.d.ts

declare module "*.svg" {
const content: string;
export default content;
}
declare module "svg-inline-angular"

并尝试将其添加到 .storybook 文件夹中的 tsconfig.json 中，但也没有成功

我最近尝试的是添加import '!svg-inline-loader!../filepath_to_assets，但这也是空的

我在一个普通的应用程序上做了这个，并且在 angular.json 文件中包含了 assets 对象数组中的 assets 文件夹。这适用于导入我的 svg 文件，但在库中不起作用

有什么想法吗？谢谢

【问题讨论】：

标签： angular svg webpack angular-material storybook

【解决方案1】：

问题是 Storybook 的加载器与您的自定义 Webpack 配置添加的加载器冲突。

你可以试试storybook-preset-inline-svg使用svg-inline-loader，也可以手动过滤掉和你的规则冲突的。

类似：

config.module.rules = [
  // Turn off the default SVG file-loader
  ...config.module.rules.map(rule => {
    if (/svg/.test(rule.test) && /file-loader/.test(rule.loader)) {
      return { ...rule, exclude: /\.svg$/i }
    }

    return rule
  )},
  // Add your own SVG loader
  {
    test: /\.svg$/,
    include: path.resolve(__dirname, './'),
    use: [{
      loader: 'svg-inline-loader'
    }]
  }
]

【讨论】：