symbol

    支持多色图标了，不再受单色限制。
    支持像字体那样通过font-size,color来调整样式。
    支持 ie9+
    可利用CSS实现动画。
    减少HTTP请求。
    矢量，缩放不失真
    可以很精细的控制SVG图标的每一部分
    symbol是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。具体相关的可以参考这篇文章：手摸手，带你优雅的使用 icon

    话不多说，下面说一下具体使用的方法

    1.首先你需要在iconfont里面注册一个账号，如图，里面有很多icon可以使用

    2.选择你需要的的图标，添加到你的项目当中去，没有项目的话，可以自己创建一个新的项目。例如:

    3.你可以使用上线的给你的地址

    或者下载在本地使用，本人推荐下载到本地使用，这样子的话，就算不联网图标也不会消失。点击下载到本地，里面的文件夹有很多文件，你只需要的就是iconfont.js这个文件。

    4.在你vue项目public中创建static文件，并且把刚刚下载的iconfont.js这个文件放到里面去，然后再index.html中引入

    1. <script src="./static/iconfont.js"></script>
    1. //components/Icon-svg
    2. <template>
    3.   <svg class="svg-icon" aria-hidden="true">
    4.     <use :xlink:href="iconName"></use>
    5.   </svg>
    6. </template>
    8. <script>
    9. export default {
    10.   name: 'icon-svg',
    11.   props: {
    12.     iconClass: {
    13.       type: String,
    14.       required: true
    15.     }
    16.   },
    17.   computed: {
    18.     iconName () {
    19.       return `#icon-${this.iconClass}`
    20.     }
    21.   }
    22. }
    23. </script>
    25. <style>
    26. .svg-icon {
    27.   width: 1em;
    28.   height: 1em;
    29.   vertical-align: -0.15em;
    30.   fill: currentColor;
    31.   overflow: hidden;
    32. }
    33. </style>

    5.然后再main.js里面全局注册这个组件

    1. import IconSvg from '@/components/icon-component'
    2. Vue.component('icon-svg', IconSvg)

    6.接下来就可以在你需要的地方使用了，例如，我需要使用这个icon

    我只需要在我要使用的地方这样写：

    1. <icon-svg icon-class="taobao" />

    这样icon就生成了，需要调节大小的话只需要调节它的font-size就可以了，
    效果如下：

    关于iconfont中Symbol的进一步优化可以参考这一篇文章手摸手，带你优雅的使用 icon，不过我这样做的话也足够大部分日常的使用了。
    ————————————————