@iconify/vue离线引入图标

以引入 element-plus 图标为例

现在 package.json 引入

"@iconify-json/ep": "^1.1.14",
"@iconify/vue": "^4.1.2",

然后写个组件 Icons

<template>
  <Icon :icon="name" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Icon, addCollection } from '@iconify/vue'
import ep from '@iconify-json/ep/icons.json'

export default defineComponent({
  name: 'Icons',
  components: { Icon },
  props: {
    name: String
  },
  mounted() {
    addCollection(ep)
  }
})
</script>

<style scoped>

</style>

然后在调用的地方引入组件

<template>
  <div>
    <Icons icon="ep:plus" />
  </div>
</template>
<script setup>
import Icons from '@/components/Icons.vue'
</script>