封装 iconfont 字体图标组件

最新推荐文章于 2024-04-28 00:00:00 发布

xs_shine

最新推荐文章于 2024-04-28 00:00:00 发布

阅读量317

点赞数 1

文章标签： vue js

本文链接：https://blog.csdn.net/xs_shine/article/details/118528884

版权

新建组件iconfont，并将刚才下载的压缩包解压到 iconfont组件目录下
在这里插入图片描述
其他用不到的可以删除，只需这几个文件即可，
然后创建 iconfont.vue文件

<template>
    <text class="iconfont" :class="name" :style="[{color: color}]" @click="$emit('click', $event)"></text>
</template>

<script>
    export default {
        props: {
            name: String,
            color: String
        }
    }
</script>

<style scoped>
@import url("./iconfont.css");

.iconfont {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
}
</style>

组件封装就完成了

使用组件：

import iconfont from "@/components/iconfont/iconfont.vue";

components:{
		iconfont
}

<iconfont name="icon-righthui" style="color: #007AFF;"></iconfont>