#前端字体图标配置

框架支持三种图标使用方式：Element Plus 内置图标、阿里巴巴在线图标库、本地 SVG 图标，满足不同场景的图标需求。

#Element Plus 图标

Element Plus 提供了丰富的内置图标，可以直接在项目中使用。

#使用方式

访问 Element Plus 图标库 选择所需图标，使用 <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>

#本地 SVG 图标

本地 SVG 图标适合离线部署、私有图标管理和需要跟随项目一起版本控制的场景。

#使用前说明

• 项目会自动读取 pigx-ui/src/assets/icons/ 目录下的 .svg 文件
• 支持在 icons 目录下继续按业务创建子目录
• 图标引用名只取文件名，不包含目录名

#配置本地图标

1. 访问 iconfont 官网 或其他图标来源，下载所需的 .svg 文件
2. 将图标文件放到 pigx-ui/src/assets/icons/ 目录中
3. 新增、删除或重命名图标后，重启前端项目，让图标重新注册

#菜单图标选择器

放在本地目录中的 SVG 图标，会自动出现在菜单图标选择器的 local 分组中，并根据文件名顺序加载。

#使用本地图标

使用 local- 前缀加文件名加载本地图标：

<SvgIcon name="local-gitee" :size="30" />
<SvgIcon name="local-db" :size="24" color="#2970ff" />

#阿里巴巴在线图标

阿里巴巴图标库提供了海量的图标资源，支持在线引用和自定义图标集。

#创建图标项目

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

#配置在线链接

在 /@/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',
];

#在界面中使用

不同的图标库需要添加对应的前缀：

<!-- 使用 i 标签 -->
<i class="iconfont xitongshezhi"></i>
<!-- <i class="fa xitongshezhi"></i> -->

<!-- 使用 SvgIcon 组件 -->
<SvgIcon name="iconfont xitongshezhi"></SvgIcon>
<!-- <SvgIcon name="fa xitongshezhi"></SvgIcon> -->

#SvgIcon 组件使用

SvgIcon 组件提供了统一的图标使用接口，支持局部注册和全局注册两种方式。

#局部注册

在单个组件中使用时，需要先导入 SvgIcon 组件：

<!-- 页面上使用 -->
<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" />

#自定义引入本地图标

除了使用 SvgIcon 组件，也可以通过传统方式引入图标：

<!-- 使用 i 标签 -->
<i class="iconfont xitongshezhi"></i>

<!-- 使用 SvgIcon 组件 -->
<SvgIcon name="iconfont xitongshezhi"></SvgIcon>

#进阶：阿里巴巴图标库离线使用

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

#下载图标资源包

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

#创建本地图标目录

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

#复制资源文件

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

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

#修改配置文件

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

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

#验证

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