我成功地使用以下设置使其工作：@LironHazan :

1. "vite-plugin-svgr": "4.1.0"
2. .storybook/main.ts :

const config: StorybookConfig = {
  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    'storybook-dark-mode',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {
      builder: {
        viteConfigPath: 'libs/ui/vite.config.ts',
      },
    },
  },
  // Customize the Vite config here. <-- Added this
  viteFinal: config =>
    mergeConfig(config, {
      plugins: [svgr({ include: '**/*.svg' })],
    }),
};

用法：

import UnixLogo from 'src/assets/svg/smile.svg';

export const SmileSVGComponent = () => (
  <span className="h-6 w-6">
    <Smile /* cannot make it working with className here, so hence the wrapper span :( */ />
  </span>
);

希望这有帮助，如果有更好的方法，请告诉我。

我也遇到了这个问题，唯一能让它正常工作的方法是降级到 vite-plugin-svgr@3.3.0 。
在我的项目中，它总是在使用 v4 时失败，原因有以下几点：

• 资产是通过命名导出而不是默认导出导入的，即 import { ReactComponent as SomeAsset } from '../path/to/asset.svg'
• 插件 v4 将包含路径逻辑更改为在解析路径的末尾期望 ?react
• 同时，我还在使用 esbuild-plugin-svgr(与 tsup 一起捆绑 lib)时，它并不期望解析路径末尾有 ?react ,所以即使我让 v4 正常工作，它也会破坏其他部分。

我尝试将许多不同的选项对象传递给插件 v4 ,但对我的项目似乎没有什么效果，所以我放弃了，选择了 v3 。

我也遇到了这个问题，唯一能让它正常工作的方法是降级到 vite-plugin-svgr@3.3.0 。
在我的项目中，它总是在使用 v4 时失败，原因有以下几点：

• 使用命名导出而不是默认导出的资产被导入，即 import { ReactComponent as SomeAsset } from '../path/to/asset.svg'
• 插件 v4 将包含路径逻辑更改为在解析路径的末尾期望 ?react
• 同时，我还在使用 esbuild-plugin-svgr 进行库捆绑(与 tsup 一起),这并不期望在解析路径的末尾出现 ?react ,所以即使我让 v4 正常工作，它也破坏了其他部分。

我尝试将许多不同选项对象传递给插件 v4 ,但对我的项目似乎没有什么效果，所以我放弃了，选择了 v3 。
我正在使用这些选项为 svgr 和可以使用命名导出 { ReactComponent as SomeAsset } 导入 SVG 。
"vite-plugin-svgr": "^4.2.0",
"storybook": "^7.6.17",

我也遇到了这个问题，唯一能让它正常工作的方法是降级到 vite-plugin-svgr@3.3.0 。
在我的项目中，它总是在使用 v4 时失败，原因有以下几点：

• 使用命名导出而不是默认导出的资产被导入，即 import { ReactComponent as SomeAsset } from '../path/to/asset.svg'
• 插件 v4 将包含路径逻辑更改为在解析路径的末尾期望 ?react
• 同时，我还在使用 esbuild-plugin-svgr(与 tsup 一起捆绑 lib)进行捆绑，这不期望在解析路径的末尾出现 ?react,所以即使我让 v4 正常工作，它也破坏了其他部分。

我尝试了许多不同变体的选项对象传递给插件 v4,但对我的项目似乎没有什么作用，所以我放弃了，选择了 v3。
我正在使用这些选项为 svgr 和可以使用命名导出 { ReactComponent as SomeAsset } 导入 SVG。 "vite-plugin-svgr": "^4.2.0", "storybook": "^7.6.17",
viteFinal: (config) => mergeConfig(config, { plugins: [svgr({ include: '**/*.svg', svgrOptions: { exportType: 'named', ref: true, svgo: false, titleProp: true } })], }),
这样就可以了，谢谢(添加 import svgr from 'vite-plugin-svgr' 并使其正常工作)

备注： 我删除了选项，只需在 plugins 数组中使用 svgr()