iconify 通过运行时动态请求 svg 数据并本地缓存，实现在 vue + vite 3 中零配置的按需图标加载，无需构建时扫描或额外插件。
iconify 通过运行时动态请求 svg 数据并本地缓存，实现在 vue + vite 3 中零配置的按需图标加载，无需构建时扫描或额外插件。
Iconify 的“按需使用”并非传统意义上的构建时 tree-shaking（即不打包未引用的图标），而是一种运行时按需获取 + 浏览器缓存驱动的轻量级方案。当你在组件中写
- 解析图标标识符（如 mdi-light:home），确认其所属的图标集（mdi-light）和图标名（home）；
- 检查本地缓存：优先从 localStorage 中查找该图标对应的完整 SVG JSON 数据（含 body、width、height 等字段）；
- 缓存命中则直接渲染：若已存在，立即生成内联 SVG 并插入 DOM；
- 缓存未命中则发起 HTTP 请求：向 Iconify 官方 API（https://api.iconify.design/mdi-light.json?icons=home）获取该图标集的精简 JSON 包（仅含所用图标），并将响应持久化至 localStorage（默认有效期 24 小时，可配置）；
- 后续同图标请求均复用缓存，彻底避免重复网络请求。
✅ 示例代码（Vue 3 + <script setup>）：</script>
<script setup>
import { Icon } from '@iconify/vue'
</script><template><div>
<icon icon="mdi-light:home" class="text-xl"></icon><icon icon="tabler:settings" class="text-lg text-blue-600"></icon>
</div>
</template>
⚠️ 注意事项：
- 首次加载含新图标时会有轻微延迟（约 50–200ms，取决于网络），但用户无感知且仅发生一次；
- 所有图标数据均为纯 JSON，体积极小（单图标通常
- 支持离线使用：缓存后即使断网，图标仍可正常渲染；
- 如需完全离线或定制 CDN，可通过 @iconify/utils 自托管图标集 JSON，或使用 @iconify/vite 插件进行构建时内联（进阶场景）。
总结来说，Iconify 的“按需”本质是智能缓存 + 按需拉取，它巧妙绕开了构建工具链的复杂性，在保持 Vite 极速 HMR 和零配置优势的同时，实现了真正意义上“用哪个载哪个”的图标交付体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
