如何在Storybook中用SVGR导入.svg图片？配置报错求解决

常见问题原因 #

• Storybook默认webpack配置未包含SVG文件的解析规则，导致无法识别导入的SVG模块
• 缺少处理SVG的专用loader（如@svgr/webpack、file-loader等）

具体解决步骤 #

1. 安装必要的loader #

根据你的使用场景选择对应loader：

• 若要把SVG当作React组件导入，安装@svgr/webpack：

npm install @svgr/webpack --save-dev
# 或使用yarn
yarn add @svgr/webpack --dev

• 若只是将SVG作为静态资源（图片）导入，安装file-loader：

npm install file-loader --save-dev

2. 修改.storybook/main.ts配置 #

在配置中添加SVG的解析规则，覆盖默认webpack配置：

import type { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  webpackFinal: async (config) => {
    // 排除默认规则对SVG的处理
    const assetRule = config.module?.rules?.find(rule => rule.test?.test?.('.svg'));
    if (assetRule) {
      assetRule.exclude = /\.svg$/;
    }

    // 添加自定义SVG处理规则
    config.module?.rules?.push({
      test: /\.svg$/,
      // 若用作组件则用['@svgr/webpack']，若用作静态资源则用['file-loader']
      use: ['@svgr/webpack'], 
    });

    return config;
  },
};

export default config;

3. 验证导入方式 #

• 当作组件导入示例：

import MyIcon from '../assets/my-icon.svg';

export default {
  title: 'Components/Icon',
};

export const Default = () => <MyIcon />;

• 当作静态资源导入示例：

import iconUrl from '../assets/my-icon.svg';

export const Default = () => <img src={iconUrl} alt="My Icon" />;

额外注意事项 #

• 确保使用的是Storybook 7+版本且配置了webpack5框架（即@storybook/react-webpack5）
• 若之前安装过其他SVG相关loader，需排查冲突，只保留一种处理规则

内容的提问来源于stack exchange，提问作者Viktor