771 字
4 分钟
如何在项目中上传和引用自定义图标
如何在项目中上传和引用自定义图标
两种图标使用方式：iconfont字体图标和SVG图标。下面分别介绍如何上传和引用这两种图标。
一、iconfont字体图标
1. 准备工作
- 登录 iconfont.cn
- 找到或创建你的图标项目
2. 上传自定义图标
- 在iconfont项目中，点击”上传图标”按钮
- 选择你要上传的SVG图标文件
- 上传成功后，为图标添加合适的名称和分类
- 将图标添加到你的项目中
3. 更新项目中的iconfont文件
-
在iconfont项目页面，点击”下载至本地”
-
解压下载的文件，得到以下核心文件：
iconfont.cssiconfont.ttficonfont.wofficonfont.woff2iconfont.json
-
替换项目中的对应文件：
- 文件位置：
xxxx/src/assets/css/iconfont/ - 替换所有解压得到的文件
- 文件位置：
4. 引用新上传的图标
在代码中，通过修改图标的class名来引用新上传的图标：
// 例如，在路由配置中使用meta: { title: '空间管理', icon: 'icon-你的图标名称', affix: false, showSidebar: true }在组件模板中使用：
<i :class="['iconfont', 'icon-你的图标名称']"></i>二、SVG图标
1. 上传SVG图标
- 将你的SVG图标文件直接放到项目的SVG图标目录：
- 目录位置：
xxxx/src/assets/icons/ - 可以根据需要创建子目录来分类管理图标
- 目录位置：
2. 确保SVG图标插件配置正确
项目配置vite-plugin-svg-icons插件，配置如下（位于vite.config.ts）：
createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // 指定symbolId格式 symbolId: 'icon-[dir]-[name]'})3. 引用SVG图标
使用项目中的SvgIcon组件来引用SVG图标：
<svg-icon icon-class="你的图标文件名" />
<!-- 如果图标放在子目录中 --><svg-icon icon-class="子目录名-图标文件名" />例如，如果你在src/assets/icons/下上传了一个名为custom-icon.svg的图标：
<svg-icon icon-class="custom-icon" />如果放在src/assets/icons/space/目录下：
<svg-icon icon-class="space-custom-icon" />三、验证图标是否生效
-
重新启动开发服务器：
cd xxxxnpm run dev -
查看页面中是否正确显示了新上传的图标
四、注意事项
- 图标命名规范：建议使用小写字母、数字和连字符，避免使用中文和特殊字符
- SVG图标优化：上传前建议优化SVG文件，去除不必要的属性和代码
- iconfont更新频率：建议定期更新iconfont文件，确保使用最新的图标
- 图标大小：通过CSS可以调整图标大小，字体图标可以直接设置
font-size，SVG图标可以设置width和height
五、项目中现有图标使用示例
1. 路由配置中使用（iconfont）
// 位于 src/router/index.ts{ path: '/organization', component: Layout, meta: { title: '空间管理', icon: 'icon-department', affix: false, showSidebar: true }, // ...}2. 侧边栏组件中使用（iconfont）
<!-- 位于 src/layout/components/Sidebar.vue --><i :class="['iconfont', item.meta?.icon]"></i>3. SVG图标使用示例
<!-- 使用SvgIcon组件 --><svg-icon icon-class="example-icon" />通过以上步骤，你就可以成功上传和引用自定义图标了。如果有任何问题，可以查看浏览器控制台的错误信息，或检查图标文件是否正确配置。
如何在项目中上传和引用自定义图标
https://yukilain.com/posts/如何上传和引用自定义图标/ 部分信息可能已经过时
