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

使用

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

准备图标

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

• Font class
• Symbol（推荐）

---

1. 选择好icon后，注意命名，上面的是自己自定义的名，下面的是使用时用的名称：
   

2. 将代码粘贴进某一个目录中：
   

3. 接着在入口文件进行导入（补充一下，这里的@/会解析为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>