如何让@poppanator/sveltekit-svg在SvelteKit搭配的Storybook中正常工作

Storybook使用独立的Vite编译配置，不会自动继承svelte.config.js中kit.vite字段下的插件配置，所以@poppanator/sveltekit-svg插件没有在Storybook的编译流程中生效，导入SVG时默认返回了静态资源路径。

按以下步骤修改.storybook/main.cjs配置即可：

1. 顶部引入@poppanator/sveltekit-svg插件
2. 添加viteFinal配置项，将SVG插件注入Storybook的Vite插件列表
3. 修正svelteOptions的预处理器异步导入写法

修改后的完整配置如下：

const svg = require('@poppanator/sveltekit-svg');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-svelte-csf"
  ],
  "core": {
    "builder": "storybook-builder-vite"
  },
  "svelteOptions": async () => {
    const svelteConfig = await import("../svelte.config.js");
    return {
      preprocess: svelteConfig.default.preprocess
    }
  },
  async viteFinal(config) {
    config.plugins.push(svg());
    return config;
  }
}

如果你的SVG插件有自定义配置（比如导入路径后缀、svgo优化规则等），保证svg()传入的配置和svelte.config.js中的配置完全一致即可。修改完成后重启Storybook服务，配置即可生效，导入SVG会正常返回Svelte组件。

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