技术文档

打开导航菜单

PIG AI Guide

切换主题搜索

[](https://wwads.cn/click/bait)[![](https://cdn.wwads.cn/creatives/9UFEBWm9yghqfP2A3Ri7GzEqF8ccpKj2J0fHzhS7.png) ](https://wwads.cn/click/bundle?code=4jQpSYno5LBbz49BkpNUvNEIyc5l09)

电商项目必备！Java 开源商城系统 SpringBoot+Vue 框架，功能齐全，全源码交付，可二开广告

PIGX 技术指南

适配 5.0 以上单体和微服务版本

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/8/19

切换主题

前端字体图标配置

[](#一-elementplus-图标)一、 ElementPlus 图标

使用 element plus 的图标，可去 https://element-plus.org/zh-CN/component/icon.html 复制粘贴

<el-icon></el-icon> 包裹着



`<el-input   type="text"   :placeholder="$t('message.account.accountPlaceholder1')"   v-model="ruleForm.userName"   clearable   autocomplete="off"  >   <template  #prefix>   <el-icon  class="el-input__icon"><ele-User  /></el-icon>   </template>  </el-input>`

[](#二-阿里巴巴在线图标)二、阿里巴巴在线图标

[](#1-创建图标项目)1. 创建图标项目

访问 iconfont 官网并登录
创建新项目 -> 设置FontClass/Symbol 前缀为 icon，Font Family 为 iconfont
添加所需图标到项目 -> 生成在线链接

[](#2-设置在线链接)2. 设置在线链接

代码位置：/@/utils/setIconfont.ts



``// `/@/utils/setIconfont.ts` cssCdnUrlList 方法中添加在线链接  // 字体图标 url （新增）  const cssCdnUrlList:  Array<string>  =  [   "//at.alicdn.com/t/font_2298093_y6u00apwst.css",   "//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",  ];``

[](#3-界面中使用)3. 界面中使用

警告

iconfont（阿里巴巴素材库）：需要添加 iconfont 前缀，如：iconfont xitongshezhi

font-awesome：需要添加 fa 前缀，如：fa xitongshezhi



`<!-- 项目使用 -->  <i  class="iconfont xitongshezhi"></i>  <!-- <i class="fa xitongshezhi"></i> -->  
<!-- 或者 -->  <SvgIcon  name="iconfont xitongshezhi"></SvgIcon>  <!-- <SvgIcon name="fa xitongshezhi"></SvgIcon> -->`

[](#三本地图标)三、本地图标

支持下载 svg ，放在前端的 icons 目录

前端可通过 local-文件名的形式加载



`<SvgIcon  name="local-gitee"  :size="30"  />`

[](#svgicon-标签使用)`<SvgIcon/>` 标签使用

[](#2-局部注册--全局注册-svg-组件)2. 局部注册 & 全局注册 svg 组件

局部注册



`<!-- 页面上使用 -->  <SvgIcon  :name="item.meta.icon"  />  
<script  setup  lang="ts"  name="xxx">   import  SvgIcon  from  "/@/components/svgIcon/index.vue";  </script>`

全局注册（框架中使用全局注册）

/@/utils/other.ts 中的 elSvg 方法



`// 全局注册  import  SvgIcon  from  '/@/components/svgIcon/index.vue';  app.component("SvgIcon",  SvgIcon);  
// 页面上使用  <SvgIcon  :name="item.meta.icon"  />  
// 或者  <SvgIcon name="ele-Aim"  :size="14" color="#333333"/>`

[](#自定义引入本地图标)自定义引入本地图标



`<!-- 项目使用 -->  <i  class="iconfont xitongshezhi"></i>  
<!-- 或者 -->  <SvgIcon  name="iconfont xitongshezhi"></SvgIcon>`

[](#进阶阿里巴巴图标库离线)进阶：阿里巴巴图标库离线

为了提高系统的稳定性和加载速度，我们可以将原本使用的阿里巴巴在线图标库转换为本地离线使用。

[](#1-下载图标资源包)1. 下载图标资源包

点击下载 PIGX-UI 都有依赖的阿里巴巴图标

[](#2-创建本地图标目录)2. 创建本地图标目录



`mkdir -p pigx-ui/public/assets/iconfont`

[](#3-复制资源文件)3. 复制资源文件

将下载的资源包中的以下文件复制到 public/assets/iconfont/ 目录：

iconfont.css
iconfont.ttf
iconfont.woff
iconfont.woff2

[](#4-修改配置文件)4. 修改配置文件

修改 src/utils/setIconfont.ts 文件中的图标引用路径：



`const cssCdnUrlList:  Array<string>  =  [   '/assets/iconfont/iconfont.css',  // 本地图标文件   '/assets/styles/font-awesome.min.css',  ];`

[](#验证)验证

启动项目
检查图标是否正常显示
在断网情况下验证图标是否仍然可用

警告

确保复制的文件名与代码中引用的路径完全一致如果后续需要添加新图标，重复以上步骤即可更新本地图标文件

本页导航

一、 ElementPlus 图标

二、阿里巴巴在线图标

1. 创建图标项目

2. 设置在线链接

3. 界面中使用

三、本地图标

标签使用

2. 局部注册 & 全局注册 svg 组件

自定义引入本地图标

进阶：阿里巴巴图标库离线

1. 下载图标资源包

2. 创建本地图标目录

3. 复制资源文件

4. 修改配置文件

验证

3.md 5.6 KB History Raw