SvelteKit项目手动刷新页面后IONICONS图标无法加载问题求助

数据老陈

2026-9-30

问题根因

该问题是 ionicons 原生脚本的执行逻辑和 Svelte 客户端渲染的挂载时机不匹配导致的：
ionicons 脚本默认仅在加载完成后扫描一次当前页面的 <ion-icon> 标签完成渲染。你将脚本放在 app.html 的 body 中时，脚本执行时间早于 Svelte 组件的挂载时机，手动刷新页面时脚本扫描阶段还没有生成对应的图标元素，等 Svelte 渲染完图标标签后 ionicons 不会自动重新扫描，因此会出现图标消失的问题。跳转页面时功能正常，是因为客户端路由切换时 ionicons 脚本已经加载完成，新增的图标标签可以被正常识别渲染。

解决方案

以下三种方案任选其一即可：

方案1：使用 Svelte 适配的 ionicons 包（推荐）

直接安装针对 Svelte 适配的图标包，完全规避原生脚本的时机冲突问题，无需引入外部脚本：

安装依赖：npm install ionicons-svelte
组件内直接引入使用：

<script>
  import { AddOutline } from 'ionicons-svelte'
</script>

<!-- 替代原来的 <ion-icon> 标签 -->
<AddOutline size={24} />

方案2：保留原生标签，手动触发扫描

如果你需要保留 <ion-icon> 原生标签的用法，可以在根组件的 onMount 生命周期中主动触发 ionicons 全局扫描，确保所有渲染完成的图标都被识别：

<script>
  import { onMount } from 'svelte'

  onMount(() => {
    // 等待ionicons加载完成后触发扫描
    const scanIonicons = () => {
      if (window.ionicons) {
        window.ionicons.scan()
      } else {
        setTimeout(scanIonicons, 50)
      }
    }
    scanIonicons()
  })
</script>