​
ElementPlus 图标

使用 element plus 的图标，可访问 ElementPlus 图标文档 复制粘贴

使用 <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>

​
在线图表

​
设置在线链接

代码位置

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

​
App.vue 中引入

import setIntroduction from "/@/utils/setIconfont";

// 设置初始化，防止刷新时恢复默认
onBeforeMount(() => {
  // 设置批量第三方 icon 图标
  setIntroduction.cssCdn();
});

​
界面中使用

  • 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 组件使用

​
局部注册 & 全局注册 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>

​
♥️ 获取支持

遇到问题？

如果您在使用过程中遇到任何问题、有功能建议或需求，请点击此卡片前往 Gitee 仓库提交 Issue。