在ElementUI项目中集成iconfont图标库

news2024/11/15 12:13:34

在前端项目开发中经常会遇到使用的组件库提供的ICON图标不够用的情况。最常见的解决方案无非就是把设计图的图标切图引入到项目中。还有就是使用svg图标，封装一个渲染组件在项目里面直接引入这个组件。

本文将介绍另一种方法，即集成iconfont图标库的图标到项目中去，用最小化的改动满足图标需求。

快速开始

1、打开阿里巴巴的图标库网站：阿里巴巴矢量图标库，登录自己的账号。

完成这一步你会看到这样的界面。

2、搜索你需要的图标，然后选中你需要的图标，点击添加购物车，步骤如下图所示：

3、点击菜单栏购物车之后，弹出下面的页面，点击添加至项目。在弹出的侧栏里面选择要把图标添加到的项目，如果没有项目就新建。

4、把图标加入到指定的项目后，点击确定你就会跳转到项目详情页面，在这个页面点击项目设置，对图标前缀和字体名称做一些简单的设置，如下图。

修改完成后，点击保存。

5、下载图标文件到本地

iconfont.ttf、iconfont.woff、iconfong.woff2 是图标字体文件，可以把它们复制到你的项目中的 fonts 目录下。
iconfont.css 是 Font Class 方式使用图标的CSS代码，内容如下，但是记得修改图标字体文件的路径

@font-face {
  font-family: "element-icons";
  src: url('iconfont.woff2?t=1709537603593') format('woff2'),
       url('iconfont.woff?t=1709537603593') format('woff'),
       url('iconfont.ttf?t=1709537603593') format('truetype');
}

.element-icons {
  font-family: "element-icons" !important;
  font-size: 18px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.el-icon-xitong:before {
  content: "\e67c";
}

6、把 iconfont.css 引入到项目中，在需要的地方就可以使用类名 el-icon-xitong 使用我们刚刚添加到项目中的图标了。