Vue项⽬中如何引⼊icon图标
1.下载icon图标，推荐icomoon⽹站，⾥⾯有⼤量的⽮量图标，也可以⾃定义，当然你也可以去阿⾥巴巴⽮量图标库下载你所需要的⼩图标。点击进⼊icomoon⽹站点击右上⾓“IcoMoon App”，到⾃⼰需要的图标后选择然后点击右下⾓“Generate Font”，接着可以在左上⾓第⼆个按钮“Preferences”进⾏⾃定义你要下载的图标信息，⼀般我都是进去改⼀下“Font Name”，然后返回点击右下⾓“Download”，这样你就下载了图标。
2.解压下载的图标压缩包，得到这样的⽂件：
3.在vue项⽬⾥src⽂件夹中新建common⽂件夹，将这⾥的fonts复制到common中，再在common⽂件夹中新建⼀个stylus⽂件夹，将这⾥的style.css复制到stylus中，这个css⽂件放的是图标的相关样式代码，我放进去后改成icon.styl便于识别(PS：我是⽤stylus预处理器，所以新建stylus，并且后缀名为styl，不同预处理器可以不同，这个见仁见智，只是尽量遵循代码规范⽽已)，放⼊后的⽂件夹结构如下：
icon图标库
4.那么现在就是重点了，刚解压的⽂件中style.css中@font-face的url路径是需要修改成项⽬中的路径的，修改如下：
5.然后要在App.vue⾥引⼊这个⽂件，不然是不⽣效的：
6.然后在template上写对应的class名，加上样式即可：
得到的页⾯如下所⽰：
总结
以上所述是⼩编给⼤家介绍的Vue项⽬中如何引⼊icon图标，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。