不得不学的图标引入🎡

坚强的信心，能使平凡的人做出惊人的事业👻

前言

为什么要使用字体图标，有很多同学认为，图片已经满足了我们的日常需求为什么还要字体图标呢。大概有以下几点(敲黑板👨‍💻)

• 加载速度快，体积小🎈。
• 字体图标的颜色和大小都是可以设置的，如果使用图片的话就只能换一张图🎭。
• 字体图标有独立的分辨率，无论是网页端💻和手机端📱都有很好的展示。

字体图标工具选型

• 阿里巴巴矢量图标库
• icomoon
• Font Awesome

由于我们公司使用的是阿里巴巴矢量图标库来生成的，我下面的分享都会以这个为例。其他工具也都是类似哒🎨

不同框架引入的方式多多少少会有所不同🧐，我把常用到的几种方式都来哔哔一下,请君笑纳♥。

使用create-react-app创建的工程中引入iconfont

如果还有老铁不知道怎么使用create-react-app创建项目的看这里

首先大家要清楚一点，前端工程师主要来负责图标的展示，创造图标的这些小事UI设计师肯定手到擒来😏，我们交给他就可以啦，如果公司没有UI设计师，也不用怕。图标库提供了相当多的图标。相信你肯定能找到属于你的那一款。

• 注册，登录(不多说啦😀)
• 登录成功之后点击小云彩上传svg图标(一定是svg哦😙)

• 选择第一个框框(支持同时上传多个)

• 根据需求自行选择要不要去色。
  
• 鼠标悬浮到上传的图标点击购物车(支持批量加入购物车，不花钱的哦🤣)

• 下载代码
  
  下载代码成功之后双击打开文件夹下面的demo_index.html

有三种引用方式本文只讲后两种(第一种是真的不常用😑)
这三种区别在demo.html中都有明确的说明，我就不班门弄斧啦🎉。

FontClass

打开刚才创建的react项目在public文件夹下新建一个文件夹起名font(随意起名)然后把下载的图标代码全部拷贝到font目录下demo.html和demo.css可以不要.

然后在index.html中引入iconfont.css

<link rel="stylesheet" href="./font/iconfont.css">

然后在全局任意页面使用标签绑定类名就可以了(个人建议使用i标签或者span标签)

# xxx是什么你去看demo.html一眼就会看到啦，默认是svg图标的文件名。
<i className="iconfont icon-xxx"></i> 

启动项目npm start
大功告成🎨(不成功来找我！)

Symbol

在index.html中引入iconfont.js

<script src="./font/iconfont.js"></script>

全局任意页面使用

<svg class="icon" aria-hidden="true" width="50" height="50">
  <use xlink-href="#icon-xxxx"></use>
</svg>

启动项目npm start 你发现你失败了，WTF😲我这完全按照文档复制粘贴的啊，为什么会失败!。
不要忘了我们现在是在jsx里面写html 跟普通的html还是有些区别的 查阅文档之后我们改成这个样子。

 <svg class="icon" aria-hidden="true" width="50" height="50">
         <use xlinkHref="#icon-dapingzhanshi"></use>
</svg>

使用create-react-app创建的工程中使用ant.design自定义图标

ant.design提供了丰富图标但有的时候可能它提供的图标也不能满足我们日常的需求。我们可以使用以上两种阿里巴巴提供的方式进行引入，也可以使用ant.design提供的默认方法

ant.design不同版本的引入方式可能会有区别，具体的引入方式还要以官网为主

注: scriptUrl后面对应的地址就是我们在 Symbol方式引入的js文件，如果js文件放在了public目录下不需要使用require，因为public不会参与打包。

使用ant.desin.pro创建的项目引入IconFont

使用ant.design.pro搭建的项目在src/defaultSetting.js中有一个iconfontUrl字段，将之前下载好的字体文件放在public/fonts下面，把js文件引入即可。

使用方法：

• 如果是路由菜单的话直接在路由上将对应的icon名字写在icon属性后面就可以了。

如果是某个页面展示图标

• FontClass方式 需要在global.less文件中引入css文件,使用的话使用i标签或者span标签引入就可以📣。

<i className="iconfont icon-xuqiudengji"></i>

• Symbol方式 无需引入css文件因为我们在defaultSetting中已经配置了js文件。直接按照上文提到的Symbol使用方式就可以📣。

<svg className="icon" aria-hidden="true" width="50" height="50">
    <use xlinkHref="#icon-xuqiudengji"></use>
</svg>

当然 ant.design.pro 也集成了ant.design也可以使用ant.design提供的默认方法引入。

使用vue-cli搭建的vue项目

阿里巴巴提供的方式都可以使用，只是引入的位置有区别。

• FontClass 在入口文件main.js中引入字体的css文件

在全局任意页面使用如下标签即可。

<i className="iconfont icon-xuqiudengji"></i>

• Symbol 在入口文件main.js中引入字体的js文件

在全局任意页面使用如下标签即可。

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-aliens-ip"></use>
</svg>

如何自动更新svg字体图标

上面的这些方式，如果你习惯了之后你会发现一个问题，就是我们每次如果有新的图标加入的时候我们都要重复一次之前的动作 上传所有svg>下载图标代码>替换font文件夹。要说麻烦其实也不太麻烦，就是几分钟的事。我们肯定不想一直重复做相同的事情。

在线链接

阿里巴巴还是强啊！他提供了在线链接😃，只要我们图标库的项目里面增加了图标他就会自动生成链接，这就相当于我们不需要去下载图标代码了，直接使用他在线的链接就可以了FontClass和Symbol都有。敲黑板📏！！！

流程大概就是这样，我们需要在阿里巴巴图标库中创建一个项目，然后将自己想要的图标导入到自己的项目，他会自动生成在线链接，我们就不需要在下载图标代码到自己的项目了，直接把上面的本地路径改成他的在线链接就可以了。好活🤣

当然缺点也是很明显的，这种方式就相当于是阿里巴巴帮助我们维护svg图标，如果某一天链接不通了，网络不通了，领导还是会找你。只不过这是一种简单快捷的方法，我们还是自己维护svg图标才能做到心里有数。

svgtofont.js

新建项目起名为svgToFont在文件夹中执行npm init --yes,在svgToFont文件夹下新建文件夹起名为svg将你要用到的svg图标全部拷贝到svg文件夹中，安装svgtofont

npm init --yes 
npm install svgtofont --save

安装完成之后新建app.js文件将下面的代码全部拷贝到app.js中

const svgtofont = require("svgtofont");
const path = require("path");

svgtofont({
  src: path.resolve(process.cwd(), "svg"), // svg 图标目录路径
  dist: path.resolve(process.cwd(), "fonts"), // 输出到指定目录中
  fontName: "iconfont", // 设置字体名称
  css: true, // 生成字体文件
  startNumber: 20000, // unicode起始编号
  svgicons2svgfont: {
    fontHeight: 1000,
    normalize: true
  },
  website: null // 没有演示html文件
}).then(() => {
  console.log('生成完成!');
});;

然后在项目根目录执行node app.js不出意外的话你会看到fonts目录，里面的内容基本上是和阿里巴巴图标库下载的代码一样。也是同样按照上面提供的那些方式，进行引入，使用就可以。但是现在变成了我们自己维护svg图标。

注意symbol方式引用的时候会有些不同，因为字体图标生成之后你会发现没有js文件，所以在使用的时候要把symbol.svg的路径加上。附上xlinkHref对应路径的详解，我这个路径弄了好久😣。

<svg>
  <use xlinkHref="/font/iconfont.symbol.svg#iconfont-aliens-ip"}></use>
</svg>

webpack-iconfont-plugin-nodejs

这个webpack插件大概的原理就是监听svg文件的变化，当有修改或添加，删除svg文件的时候就会生成对应的字体图标代码🎍。

• 方式一

我们可以按照新建项目的形式来维护我们的svg图标(类似于svgtofont.js)🧵。

• 方式二

因为webpack-iconfont-plugin-nodejs是支持热加载的可以实时监听svg文件的变化，我们也可以在webpack插件中使用它，需要将使用的svg图标全部拷贝到项目中而不是新建一个项目来维护。🎃具体使用方法看这里

总结

总而言之，在日常的开发中，字体图标还是特别常见的，以上几种方式，应该可以满足基本的开发了🧐，如果有大佬还有更优雅的方式，欢迎在评论区狠狠的教育我，一起进步🤣。

参考文章

svgtofont

webpack-iconfont-plugin-nodejs

菜单栏自定义ICON

symbol