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

<template>
    <i class="iconfonts" :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) {
            if (newSize) this.$set(this.styleObject, 'font-size', this.fontSize + this.fontUnit);
        },
        color(newColor) {
            if (newColor) this.$set(this.styleObject, 'color', this.color);
        }
    },
    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: "iconfonts"; /* Project id 2760070 */
  src: url('../public/font/iconfont.woff2?t=1629948296055') format('woff2'),
       url('../public/font/iconfont.woff?t=1629948296055') format('woff'),
       url('../public/font/iconfont.ttf?t=1629948296055') format('truetype');
}

.iconfonts {
  font-family: "iconfonts" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow:before {
  content: "\e613";
}

.icon-message:before {
  content: "\e612";
}

.icon-share:before {
  content: "\e610";
}

.icon-thumbs:before {
  content: "\e611";
}

.icon-add:before {
  content: "\e600";
}

.icon-addRound:before {
  content: "\e608";
}

.icon-weChat:before {
  content: "\e609";
}

.icon-friend:before {
  content: "\e60b";
}

.icon-friend1:before {
  content: "\e60c";
}
</style>