📄 前端字体图标配置

一、 ElementPlus 图标

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

<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 官网 (opens new window) 并登录
2. 创建新项目 -> 设置FontClass/Symbol 前缀为 icon，Font Family 为 iconfont
3. 添加所需图标到项目 -> 生成在线链接

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. 界面中使用

注意前缀

• 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/> 标签使用

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. 下载图标资源包

点击下载 PIGX-UI 都有依赖的阿里巴巴图标 (opens new window)

2. 创建本地图标目录

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

3. 复制资源文件

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

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

4. 修改配置文件

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

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

验证

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

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