关于阿里矢量图标的普通无色和彩色的使用方法

登录阿里矢量图标库

在页面中选择喜欢图标库点进

鼠标悬停想要的图标 选择添加入库

 

 鼠标悬停想要的图标 选择添加入库

点击购物车图标 选择添加至项目（如果没有就创建一个）

 

 第一种点击生成在线地址

引入在线地址即可

  第一种点击下载到本地

使用无色的字体图标

 解压缩，放到本地项目目录文件夹中，link引入

基本代码

从项目库中复制要使用图标的类名

复制到代码中

字体图标就能使用了

图标太小，可以自定义一个类名，添加一些样式

 

 无色的字体图标就可以正常使用了

使用有色的字体图标

在无色图标基础上，引入js文件

设置固定样式（必写）

使用svg标签，在href=“# 字体图标的类名”

继续从官网上复制有色图标的类名

 填写到在href=“# 字体图标的类名”

 有色图标就可以使用了

图标太小 我们给svg的class添加自定义类名

 有色图标就可以使用了

 后期如果我们要添加更多的字体图标的方法

选好要新增的字体图标，添加到之前建的项目文件夹中

点击更新新的在线或者离线代码

 点击链接生成离线代码

 接下来复制离线代码，把之前下载的css文件代码覆盖一下，有色的图标还有覆盖一下js代码

 接下来使用新的字体图标类名就可以了

完美使用阿里巴巴矢量图标库框架

有色图标的必填代码：

 .icon {

        width: 1em;

        height: 1em;

        vertical-align: -0.15em;

        fill: currentColor;

        overflow: hidden;

      }

<svg class="icon" aria-hidden="true">

      <use xlink:href="#图标的类名"></use>

</svg>