阿里矢量图标库在vue中的使用

symbol

优势：

• 支持多色图标了，不再受单色限制。
• 支持像字体那样通过font-size,color来调整样式。
• 支持 ie9+
• 可利用CSS实现动画。
• 减少HTTP请求。
• 矢量，缩放不失真
• 可以很精细的控制SVG图标的每一部分

使用方法

# 引入 iconfont.js

# 加入通用css代码（引入一次就行）：
<style type="text/css">
    .icon {
   
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

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