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

Posted 2023-02-19

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

【英文标题】：Is there a way to include local svg files into Storybook that I am using with a custom Angular Library?

【发布时间】：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 文件，但在库中不起作用

有什么想法吗？谢谢

【参考方案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'
    ]
  
]