vue引用阿里彩色图标（symbol引用）

 博主 [DTcode7] 带您 溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒

《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》

《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！

目录

第一步：在阿里图标库选择好自己要的图标，加入购物车，添加至项目，下载到本地​

第二步：在vue项目里面创建对应的inconfont文件夹

第三步：在main.js中，引入这几个文件（前两个是阿里图标文件，最后一个可以不要，只是自己设置的基础图标宽高等），目的是为了让全局可以使用引入的阿里图标

 第四步：在需要使用图标的界面放上svg代码

 第五步：运行项目，就能看见图标了

可能遇到的问题

.eslintignore 文件

.eslintrc.js 文件

---

引用阿里图标库的方式有三种，前两种都只能引入单色的图标，对于强迫症简直了，所以俺参考其他大佬的博客，学习了如何通过symbol引用彩色的图标

第一步：在阿里图标库选择好自己要的图标，加入购物车，添加至项目，下载到本地

这样就把样式文件下载到本地了 

 

 第二步：在vue项目里面创建对应的inconfont文件夹

将这些下载的样式文件放到新建的文件里，方便项目中引用

第三步：在main.js中，引入这几个文件（前两个是阿里图标文件，最后一个可以不要，只是自己设置的基础图标宽高等），目的是为了让全局可以使用引入的阿里图标

/**
 * ==================================引入阿里图标库==================================
 */
// !更简单一点，直接引入整个iconfont文件，效果一样
// import './assets/iconfont'

// 引入全局可用阿里图标样式文件
import './assets/iconfont/iconfont.css'
// 引入全局可用阿里图标js文件
import './assets/iconfont/iconfont.js'
// 引入自己设置的全局icon基础样式，一般用于规定基础的svg宽高和图标大小
import './assets/css/iconfont.css'
/**
 * ==================================引入阿里图标库==================================
 */

icon图标的基础样式，一般用于限定宽高 ：

 

 第四步：在需要使用图标的界面放上svg代码

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

 第五步：运行项目，就能看见图标了

---

可能遇到的问题

如果你的vue项目使用了ESLint，那么你还会遇到不少问题，导致项目跑不起来~

 你要是不嫌麻烦，也可以根据报错提示一点点改过去，但是这里有个更简单的方法：eslint忽略指定文件夹

通过ESLint 忽略特定的文件或目录，即使js没有按照eslint的规范来写，也不会报错

参考博文：ESLint 忽略特定的文件和目录 - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/37918096

 .eslintignore文件就是用来规定eslint忽略检查哪些文件的。

到这里，项目中就能正常显示出阿里图标了，而且终于有颜色了！ 

---

插几条记录：

 为什么会有两个eslint开头的文件呢？

.eslintignore 文件

主要作用是忽略哪些文件的语法检查，每一行是个忽略配置项

.eslintrc.js 文件

是js代码的语法检查配置，代码提示出现很多奇奇怪怪的错误提示，就是因为eslintrc.js文件没有配置相关命令

 详情可以参考博客：Vue项目中根目录.文件配置详解（3）.eslintignore、.eslintrc.js、.stylelintrc.js、.gitignore_小也同学的博客-CSDN博客https://blog.csdn.net/qq_37734787/article/details/109813918

---

微信小程序暂时不支持svg，所以想要在微信小程序中使用阿里图标库的彩色图标，需要通过控制台安装插件来生成对应的文件，详细操作请搜索相关博客