为什么用svg放弃了iconfont？

svg替代iconfont的好处（无论是基于Vue、Jquery），都推荐svg

http://www.woshipm.com/pd/463866.html

svg图标库,svg图标在线制作

https://icomoon.io/app/#/select

svg体积优化

https://jakearchibald.github.io/svgomg/?utm_source=next.36kr.com

示例代码（建议uniapp运行环境,修改也可以vue环境运行，需支持sass处理）

 <template>
     <view>
         <view class="svg-list">
             <view class="icon-facebook"></view>
             <view class="icon-twitter"></view>
             <view class="icon-feed"></view>
             <view class="icon-youtube"></view>
         </view>
     </view>
 </template>

 <script>
     export default {
         data() {
             return {

             };
         }
     }
 </script>

 <style lang="scss">
     $icons: google-plus,
     facebook,
     twitter,
     feed,
     youtube,
     vimeo,
     lanyrd,
     forrst,
     deviantart,
     steam,
     github,
     wordpress,
     blogger,
     tumblr,
     soundcloud,
     linkedin,
     lastfm,
     delicious,
     stumbleupon,
     pinterest,
     xing,
     flattr;

     .svg-list {
         display: flex;
         [class*="icon-"] {
             margin: 2%;
         }
     }

     [class^="icon-"] {
         display: block;
         width: 64upx;
         height: 64upx;
         text-indent: 100%;
         overflow: hidden;
         white-space: nowrap;
         background: url(http://www.w3cplus.com/sites/default/files/blogs/2015/1506/sprite.svg) no-repeat;

         @for $i from 1 through length($icons) {
             &.icon-#{nth($icons,$i)} {
                 background-position: 0 -1 * (($i - 1) * 84upx);
             }
         }
     }
 </style>

来自大漠的一篇博文：https://www.w3cplus.com/svg/create-svg-sprite-sheet.html