技术文档

打开导航菜单

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 框架，功能齐全，全源码交付，可二开](https://wwads.cn/click/bundle?code=4jQpSYno5LBbz49BkpNUvNEIyc5l09)[广告](https://wwads.cn/?utm_source=property-270&utm_medium=footer "点击了解万维广告联盟")

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](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\. 创建图标项目

1.  访问 [iconfont 官网](https://www.iconfont.cn/) 并登录
2.  创建新项目 -> 设置`FontClass/Symbol 前缀`为 `icon`，`Font Family` 为 `iconfont`
3.  添加所需图标到项目 -> 生成在线链接

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

代码位置：[/@/utils/setIconfont.ts](#/src/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 目录

![](https://minio.pigx.top/oss/202306/1685929608.png)

前端可通过 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](#/src/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 都有依赖的阿里巴巴图标](https://minio.pigx.vip/oss/202501/1737972483.zip)

#### [](#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',  ];`




```

#### [](#验证)验证

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

警告

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

### 本页导航

一、 ElementPlus 图标

二、 阿里巴巴在线图标

1\. 创建图标项目

2\. 设置在线链接

3\. 界面中使用

三、本地图标

<SvgIcon/> 标签使用

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

自定义引入本地图标

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

1\. 下载图标资源包

2\. 创建本地图标目录

3\. 复制资源文件

4\. 修改配置文件

验证