使用

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

准备图标

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

Font classSymbol（推荐）

选择好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>

如果觉得《【vue3组件封装】Icon图标组件》对你有帮助，请点赞、收藏，并留下你的观点哦！