自定义图标库icons

676 阅读1分钟

问题

我们在使用element-ui、Ant Design等开源库的时候,官方提供的Icon图标库有时候不一定能满足实际业务需求,这个时候我们就需要自定义图标。推荐使用阿里巴巴矢量图标库来自定义,里面有千万个开源图标,我们可以选择开源的图标或者自己设计师设计的图标。接下来看看如何使用。

步骤

1、新建项目

首页/资源管理新建项目

企业微信截图_16675310452041.png

2、建完项目之后就可以添加图标资源了,本地上传和搜索添加开源图标

3、项目添加了图标资源之后就可以在本地项目中使用了,有以下两种使用方式

3.1 在线,使用官方提供的CDN服务器(不推荐)

CDN 服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。

3.2 下载到本地
  • 解压之后文件列表如下图所示:

企业微信截图_16675320145922.png

  • 将该文件夹copy到本地项目目录

企业微信截图_16675321578102.png

  • 全局引入
@import "@/styles/icons/font_3748353_y8xehbpvh2/iconfont.css";
  • 项目引用
<i class="el-icon-zsl-edit" style="font-size: 30px; color: #ff5900"></i>
  • 效果如下

企业微信截图_20221104112542.png