离线打包iconify的图标

所需库@iconify/vue、@iconify/json 也可以指定下载icon包

引入iconify离线icon

新建文件 app/plugins/iconify.js nuxt会自动注册插件

import { addCollection } from '@iconify/vue'
import mdi from '@iconify/json/json/mdi.json'

export default defineNuxtPlugin(() => {
  addCollection(mdi)
})

二次封装icon组件

新建文件 app/components/custom-icon.vue nuxt会自动注册组件
具体封装需求自己实现

<template>
  <Icon v-bind="$attrs" />
</template>

<script setup>
import { Icon } from '@iconify/vue'
</script>

使用方式

在组件中使用

<custom-icon icon="mdi:like-outline" />

iconify网站：https://iconify.design/