如何在Svelte5中使用Shoelace.style图标？

核心问题解析 #

• Svelte5（搭配SvelteKit）默认用Vite作为构建工具，你添加的rollup.config.js不会被执行，这是配置失效的关键。
• 图标404是因为Shoelace找不到资源的正确路径，且相关资产未被复制到构建输出目录。

正确配置步骤 #

1. 用Vite插件复制Shoelace资源 #

首先安装Vite静态资源复制插件：

npm install vite-plugin-static-copy --save-dev

在项目根目录创建/修改vite.config.js（这才是Svelte5生效的构建配置文件）：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  plugins: [
    sveltekit(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@shoelace-style/shoelace/dist/assets',
          dest: 'shoelace' // 资源会被复制到构建后的shoelace/assets目录
        }
      ]
    })
  ]
});

2. 修正Shoelace基础路径设置 #

在组件或全局入口文件（比如+layout.svelte）里，调整setBasePath的路径：

<script>
  import '@shoelace-style/shoelace/dist/themes/light.css';
  import '@shoelace-style/shoelace/dist/components/icon/icon.js';
  import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
  
  // 对应Vite配置的资源目录，设置基础路径为'/shoelace'
  setBasePath('/shoelace');
</script>

<sl-icon name="android2"></sl-icon>

3. 验证配置效果 #

运行npm run build后，检查build/shoelace/assets/icons下是否存在android2.svg，存在则说明资源复制成功；开发环境下重启npm run dev即可生效。

额外提示 #

Svelte5（SvelteKit）已放弃Rollup作为默认构建工具，所有构建相关配置都要写在vite.config.js里，不要再依赖Rollup配置文件。

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