vue3【组件封装】S-icon 图标 （ 集成 iconify ）

1. 安装依赖

npm i -D @iconify/json

npm i --save-dev @iconify/vue

2. 组件封装

src/components/S-icon.vue

<script setup lang="ts">
// 搜索图标 https://icon-sets.iconify.design/
import { Icon } from '@iconify/vue'
defineProps({
  icon: {
    type: String,
    required: true
  }
})
</script>

<template>
  <Icon :icon="icon" />
</template>

3. 页面使用

<S-icon icon="icon-park:moon" />

搜索目标图标

打开官网 https://icon-sets.iconify.design/

输入英文关键字进行搜索

点击目标图标，复制图标名称即可