核心内容摘要
探索“B想要叉叉”的无限可能：让梦想照进现实的奇妙旅程
在 Vite Vue3 TS 项目中封装阿里图标Iconfont为全局 SVG 组件的最佳实践是使用vite-plugin-svg-icons插件。
这种方式可以将本地下载的 SVG 图标自动打包成 SVG 雪碧图Sprite方便维护且性能优异。
以下是详细的步骤第一步准备工作在阿里图标库Iconfont中将图标添加至项目。
选择Symbol模式点击“下载至本地”。
解压后将所有的.svg文件放入项目的指定目录例如src/assets/icons/。
第二步安装插件安装用于处理 SVG 文件的 Vite 插件npm i vite-plugin-svg-icons -D # 或者 yarn add vite-plugin-svg-icons -D第三步配置 Vite在vite.config.ts中进行配置让插件去扫描你的 SVG 目录。
import { defineConfig } from vite import vue from vitejs/plugin-vue import path from path import { createSvgIconsPlugin } from vite-plugin-svg-icons export default defineConfig({ plugins: [ vue(), createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [path.resolve(process.cwd(), src/assets/icons)], // 指定symbolId格式 symbolId: icon-[dir]-[name], }), ], })第四步并在main.ts中引入必须引入虚拟模块以注册所有 SVG 图标。
import { createApp } from vue import App from ./App.vue // 引入虚拟模块 import virtual:svg-icons-register const app createApp(App) app.mount(#app)第五步封装全局 SVG 组件创建src/components/SvgIcon/index.vue。
template svg :style{ width: size, height: size } aria-hiddentrue classsvg-icon use :xlink:hrefsymbolId :fillcolor / /svg /template script setup langts import { computed } from vue; interface Props { prefix?: string; name: string; // 图标文件名 color?: string; // 图标颜色 size?: string; // 图标大小 } const props withDefaults(definePropsProps(), { prefix: icon, color: #333, size: 1em, }); // 这里的格式要和 vite.config.ts 中的 symbolId 保持一致 const symbolId computed(() #${props.prefix}-${props.name}); /script style scoped .svg-icon { fill: currentColor; /* 允许通过父级 color 更改颜色 */ vertical-align: -
15em; outline: none; } /style第六步全局注册组件在main.ts中注册import SvgIcon from ./components/SvgIcon/index.vue // ... app.component(SvgIcon, SvgIcon)第七步使用组件假设你的src/assets/icons/目录下有一个user.svgtemplate div !-- 基本使用 -- SvgIcon nameuser / !-- 自定义颜色和大小 -- SvgIcon nameuser colorred size24px / /div /template 进阶技巧去除 SVG 默认颜色问题很多从阿里图标下载的 SVG 带有自带的fill属性导致在组件中设置color无效。
解决方案手动修改打开 SVG 文件删掉里面的fill...属性。
批量修改如果图标很多可以使用fast-glob或其他工具在编译前处理或者更简单地在下载图标时先在 Iconfont 网站上批量去色。
CSS 控制在index.vue中加入fill: currentColor并确保 SVG 源码中没有硬编码的颜色。
TypeScript 提示可选为了让name属性有类型提示你可以在src下创建一个env.d.ts或类似文件// 给全局组件增加类型支持 declare module vue/runtime-core { export interface GlobalComponents { SvgIcon: typeof import(./components/SvgIcon/index.vue)[default] } }面试高分回答策略 回答框架STAR 法则SSituation- 背景说明在项目中我们需要使用大量的阿里图标库Iconfont图标。
传统的字体图标方案存在一些问题不支持多色、在高清屏下可能模糊、需要加载整个字体文件。
因此我选择了SVG Sprite 方案。
TTask- 任务目标我的目标是封装一个高性能、类型安全、易维护的全局 SVG 图标组件要求自动化管理本地 SVG 资源支持颜色、大小等属性自定义提供完整的 TypeScript 类型支持保证良好的开发体验DXAAction- 实施方案第一步技术选型我选择了vite-plugin-svg-icons插件原因是自动化自动扫描指定目录将 SVG 转换为 Symbol 标签注入 HTML性能优化生成 SVG Sprite减少 HTTP 请求按需加载只打包使用到的图标配合 Tree ShakingVite 原生支持与 Vite 构建流程深度集成第二步核心实现实现分为三个层次
构建层Vite 配置配置插件扫描src/assets/icons目录设置symbolId格式为icon-[name]在main.ts中引入虚拟模块virtual:svg-icons-register
组件层SvgIcon.vue使用svguse标签引用 Symbol通过computed动态生成xlink:href支持name、color、size等 Props使用fill: currentColor实现颜色继承
类型层TypeScript编写脚本自动读取 SVG 文件名生成类型枚举为全局组件添加类型声明实现 IDE 智能提示和类型检查RResult- 成果展示最终实现的效果开发效率提升新增图标只需放入文件夹自动生成类型无需手动配置类型安全图标名称有智能提示避免拼写错误性能优化所有图标打包成一个 SVG SpriteGzip 后仅 XX KB维护成本低统一管理易于替换和更新 加分项主动提及
解决实际问题在实践中遇到一个坑阿里下载的 SVG 经常带有硬编码的fill属性导致无法通过 CSS 修改颜色。
解决方案方案一手动清理 SVG 源码中的fill属性方案二在组件中使用fill: currentColor并要求设计师提供去色 SVG方案三编写 Vite 插件钩子在构建时自动移除fill属性
性能优化思考对于大型项目如果图标数量超过 500 个我会考虑按模块分包将图标按业务模块分目录按需加载懒加载非首屏图标延迟注册CDN 部署将 SVG Sprite 文件单独部署到 CDN
工程化思维我还做了以下工程化优化编写 Git Hooks在提交前自动运行类型生成脚本配置 ESLint 规则禁止直接使用字符串作为图标名编写单元测试确保组件在不同 Props 下渲染正确
对比其他方案我也调研过其他方案unplugin-icons更适合使用第三方图标库如 Material Design但对本地自定义图标支持不够灵活直接 import SVG每个图标都是独立请求不利于性能优化Font Icon不支持多色渲染质量差 面试官可能的追问及回答Q1: 如果图标很多会不会导致首屏加载慢这是一个权衡问题。
实测 500 个图标的 SVG Sprite 文件 Gzip 后约
KB对首屏影响很小。
如果确实过大可以按路由分包只加载当前模块的图标使用动态 import 实现懒加载将非关键图标改为异步加载Q2: 为什么不用 CSS SpriteCSS Sprite 是位图方案存在以下问题不支持矢量缩放在高清屏下模糊不支持颜色修改维护成本高需要手动计算坐标SVG Sprite 是矢量方案完美解决这些问题。
Q3: 如何保证图标在不同浏览器的兼容性SVG 的use标签在 IE9 都支持。
如果需要兼容更低版本可以使用svg4everybodypolyfill降级为 inline SVG 方案