Iconfont搭建组件库的字体图标库

前言

该系列文章主要记录搭建自己组件库中遇到的问题，分享自己在搭建组件库过程中遇到的坑，并且会通过分享源码的方式，讲解每个组件封装的重点难点，最终会发布到npm上。

项目已开源至GitHub，喜欢的朋友记得帮我点个star哦！

项目源码地址：OreoUI

通过Iconfont搭建组件库的字体图标库

组件库中搭建自己的字体图标库是必要的

所以我们希望在使用到组件库的时候，能通过我们准备好的css文件，通过其中的类名去引用对应的图标

<!-- 引用”关闭“图标 -->
<i class="or-icon-close"></i>

iconfont地址

将你想要的图标加入购物车

添加到项目

如果你不需要自定义css文件中的类名 可以直接点击下载代码

在项目中修改类名

下载文件

在项目中新建fonts文件夹 并把文件放入其中

像html这种不必要的可以删去

main.js中引入对应文件

import './assets/fonts/iconfont.css';

使用

<i class="or-icon-clear"></i>