阿里巴巴图标矢量库使用方法详解，适用于各种框架_阿里巴巴矢量图标库怎么用

官网使用了三种方法，我将逐一讲解，有不对之处还请各位大佬指正

一.进入阿里巴巴矢量图标库官网选取自己喜欢的图标（只想看用法的同学可以直接看第二点）

 鼠标箭头滑过图标有三个选项，购物车，收藏，下载（这里下载是直接下载图片，用法想必大家都会），我们选择添加到购物车，选择完成后点击上方导航栏图标

 之后选择添加至项目（没有项目可以临时创建一个）

 选择完成之后会自动跳转至资源管理界面，查看刚才的选择的图标

 

 二.矢量图标的三种具体用法

 1.unicode用法（字体编码）

 1）复制项目下 面生成的font-size（每个项目都不一样，下面是我的）

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 4205519 */
  src: url('//at.alicdn.com/t/c/font_4205519_0jar57ajikz9.woff2?t=1691652401305') format('woff2'),
       url('//at.alicdn.com/t/c/font_4205519_0jar57ajikz9.woff?t=1691652401305') format('woff'),
       url('//at.alicdn.com/t/c/font_4205519_0jar57ajikz9.ttf?t=1691652401305') format('truetype');
}

如果是vue项目，可以把代码复制在app.vue的style标签里，如果没有使用框架，直接写在css文件里引入即可

 2）写一个类来修改icon图标的样式，例如以上的.iconfont，和普通的class样式的写法是一样的，这是可选项。

        修改图标大小用font样式，修改图标颜色用color，和改字体是一样的

3）在你需要用icon图标的地方使用i标签加上字体编码（字体编码获取见下图）即可

 样例

<div class="opdiv" @click="goToPersonal()">
    <i class="iconfont">&#xe61c;</i>个人中心
</div>
<div class="opdiv" @click="logout()">
    <i class="iconfont">&#xe67d;</i>登出
</div>

效果如下

 2.font-class用法（css）

        该用法和上面一种差不多，就是把字体代码换成了class

先要切换到font-class的页面

 

 1）点击项目下的链接可以看到如下生成的代码，全部复制即可，放在哪里参考第一种方法

 2）在你需要使用的地方加上样式代码（和字体代码获取方式是一样的）即可

样例

<div class="opdiv" @click="goToPersonal()">
    <i class="iconfont icon-a-wode6"></i>个人中心
</div>
<div class="opdiv" @click="logout()">
    <i class="iconfont icon-sign-out"></i>登出
</div>

效果和上一个是一样的

3.symbol（js）（官方推荐）

1）复制项目下的代码（和上一个是一样的，不过是js代码，就不带大家看了，我自己也看不懂），放在独立的js文件下即可，哪里要使用就在哪里引入

2）写对应的样式（可选）

3）在你需要使用的地方加上样式代码即可，不过写法有点不同（如下）

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

svg和use标签大家可以自行百度查看用法

样例

<div class="opdiv" @click="goToPersonal()">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-a-wode6"></use>
    </svg>
    个人中心
</div>
<div class="opdiv" @click="logout()">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sign-out"></use>
    </svg>
    登出
</div>

效果如下

三.有不对不足之处请大家批评