在main.ts中引入iconfont.css即可，无需在App.vue中重复引入，否则易导致样式重复注入、字体加载失败或图标显示异常；多色图标才需额外引入iconfont.js。
在 main.ts 中 import './assets/iconfont/iconfont.css' 就够了
不需要在 App.vue 里再重复引入，否则可能触发样式重复注入、@font-face 多次注册，导致图标显示异常或字体加载失败。Vue3 应用是单入口，全局样式统一在 main.ts（或 main.js）中管理最稳妥。
常见错误现象：iconfont 字体文件 404、图标显示为方块、部分图标颜色丢失、控制台报 Failed to decode downloaded font。
- 确保
iconfont.css中的@font-face路径指向正确——比如你把字体文件放在src/assets/fonts/，那 CSS 里必须是url('../fonts/iconfont.woff2')，不能是默认的url('iconfont.woff2') - 路径修改后，建议清空浏览器缓存并硬刷新（
Ctrl+Shift+R），避免旧 CSS 缓存干扰 - 如果项目用了 Vite，注意
public/下的资源走根路径，而src/下的资源需用相对路径或@/别名，别混用
为什么不要在 App.vue 的
@import 在 中会失效，因为 Vue 的作用域编译机制会忽略它；放在非 scoped 的 里虽能生效，但会导致样式注入时机晚于组件渲染，图标 class 可能被漏识别，尤其在 SSR 或快速首屏场景下更明显。
更关键的是：这种写法会让图标样式变成“组件级副作用”，破坏可预测性——比如某个子组件没挂载时，图标就不可用；而全局引入保证所有组件随时可用。
- 错误写法：
（无作用） - 危险写法：
（能加载但时机不可控） - 正确路径只有一条：
main.ts→import '@/assets/iconfont/iconfont.css'
引入 iconfont.js 是为了多色 SVG 图标，不是必须项
只有当你下载的是 symbol 格式（即包含 iconfont.js 和内联 的版本），才需要引入 iconfont.js。它负责把图标定义注入到页面 底部的 容器中，供 调用。
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
如果你用的是 font-class 方式（即 ），完全不需要 iconfont.js —— 引入了反而可能和现有 SVG 处理逻辑冲突。
- 判断依据：打开下载包里的
demo_index.html，看示例是用还是 - 多色图标必须用
symbol+iconfont.js，且要在App.vue里加基础样式：.icon { width: 1em; height: 1em; fill: currentColor; } - Vite 项目中，若
iconfont.js报document is not defined，说明它在服务端执行了——需用if (typeof document !== 'undefined') { ... }包一层，或改用script setup动态 load
路径别名 @/ 指向 src/，但 iconfont.css 里的字体路径不认它
@/ 是 TypeScript/Vue 的模块解析别名，只对 import 语句有效；iconfont.css 里的 url(...) 是浏览器运行时解析的静态路径，不经过 Webpack/Vite 的模块系统。所以你在 CSS 里写 url('@/assets/fonts/iconfont.woff2') 会 404。
必须用相对路径（从 iconfont.css 文件位置出发算起），例如：
@font-face {
src: url('../fonts/iconfont.woff2') format('woff2');
}
- 推荐结构：
src/assets/fonts/iconfont.*+src/assets/css/iconfont.css，这样 CSS 里统一写../fonts/... - 如果坚持把 CSS 放
src/assets/iconfont/，字体也放同一级，则 CSS 中路径应为url('./iconfont.woff2') - 路径改错的典型表现：控制台反复报字体文件 404，但图标 class 本身存在——说明 HTML/CSS 加载成功，只是字体没加载进来
真正容易被忽略的是：CSS 文件里的字体路径和 JS 中的 import 路径是两套系统，改一个不等于另一个自动同步。每次更新 iconfont 资源后，既要检查 main.ts 的 import 路径是否还对，也要打开 iconfont.css 确认里面的 url() 是否指向当前真实位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
