【vue3组件封装】Icon图标组件

原创已于 2022-10-22 09:45:58 修改 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-10-22 09:45:35 首次发布

组件封装专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何从Iconfont获取并使用图标，包括Fontclass和Symbol两种方式。详细步骤包括选择图标、命名、引入代码以及在项目中的封装使用。提供了代码示例和注意事项，帮助开发者轻松实现图标在项目中的集成。

使用

<s-icon icon="icon-file"/>

准备图标

这里使用的icon均自于https://www.iconfont.cn/，它是支持unicode、font class和symbol三种形式的，第一种比较麻烦，于是我选用了以下两种情况，使用其中一种即可：

Font class
Symbol（推荐）

选择好icon后，注意命名，上面的是自己自定义的名，下面的是使用时用的名称：
将代码粘贴进某一个目录中：
接着在入口文件进行导入（补充一下，这里的@/会解析为src/，如果没有配置，直接写src/即可）

录制了一个gif可以参考一下：
在这里插入图片描述

封装

<template>
	<!--font-icon写法-->
    <i :class="[props.icon, 'iconfont']" v-if="type==='font-class'"></i>

    <!--symbol写法-->
    <svg class="icon" aria-hidden="true" v-else>
        <use :xlink:href="`#${props.icon}`"></use>
    </svg>
</template>

<script lang="ts" setup>
const props = defineProps({
  icon: {
    type: String,
    required: true
  },
  type: {
    type: String,
    default: "font-class"
  }
})
</script>

<style lang="less" scoped>
i {
    margin-right: 4px;
    vertical-align: middle;
}

.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
 }
</style>