lv-components/docs/.vuepress/components/lv-icon.vue

<template>
    <i class="iconfont" :class="[type ? 'icon-' + type : '']" :style="styleObject"></i>
</template>

<script function>
export default {
    name: 'lv-icon',
    data () {
        return {
            styleObject: {}
        }
    },
    props: {
        type: {
            type: String,
            default: ''
        },
        color: {
            type: String,
            default: ''
        },
        fontSize: {
            type: Number,
            default: 12
        },
        fontUnit: {
            type: String,
            default: 'px'
        }
    },
    watch: {
        fontSize(newSize) {
            this.$set(this.styleObject, 'font-size', this.fontSize + this.fontUnit);
        }
    },
    mounted() {
        if (this.color) {
            this.$set(this.styleObject, 'color', this.color);
        }
        if (this.fontSize) {
            this.$set(this.styleObject, 'font-size', this.fontSize + this.fontUnit);
        }
    }
}
</script>

<style lang="less" scope>
@font-face {
    font-family: "iconfont"; /* Project id 2760070 */
    src: url('../public/font/iconfont.woff2?t=1629537928872') format('woff2'),
         url('../public/font/iconfont.woff?t=1629537928872') format('woff'),
         url('../public/font/iconfont.ttf?t=1629537928872') format('truetype');
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-add:before {
    content: "\e600";
}
.icon-addRound:before {
    content: "\e608";
}
.icon-wechat:before {
    content: "\e609";
}
.icon-friend:before {
    content: "\e60b";
}
</style>