为什么用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