阿里巴巴图标使用

阿里巴巴图标使用symbol方式

• 首先 网站链接 https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4606002
• 使用方式共有三种其各自优势自行了解，只讲解symbol方式

步骤一：首先将图标添加至个人购物车>添加到项目内

步骤二：选择项目设置

• 如果说你项目中有其他同事使用个人图表库,那么避免与他们使用冲突建议在FontClass/ Symbol 前缀 添加个人前缀，在使用中就会与他人区分开

步骤三：可以将个人图标名称自定义 Font Class / Symbol 这里可以自定义 （在项目中使用时:图标名称accessCardmorenmenjin 可以看到是项目前缀+自定义名称）

步骤四: 将下载的项目打开后这里并不是所有的文件都会用到，symbol方式这种方式只需要将iconfont.js文件复制到vue项目publice（静态资源下）或者其他文件下，看个人开发习惯

步骤五: 我这里是将文件放到如下文件夹,然后在html文件中直接引用就可以了，下一步就是使用了

步骤六:封装一个图标组件 这里fill 改变图标颜色，注意如果你在阿里巴巴图标库哪里将图标选择了颜色这里就改不了，如果是默认颜色这里就能改颜色，或者吧图标.js文件里面的fill 给删除掉。