Nuxt3 如何引入图标库 IconPark

在使用Nuxt3 中经常需要引入其他第三方的库或者常用的图标库,那么如何引用呢?

下面以引入图标库 IconPark为例来说明。

安装IconPark

通过npm 安装IconPark:

npm install @icon-park/vue-next --save

插件方式引入IconPark

创建插件文件 /plugins/icon-park.ts,全量引入IconPark

import { IconPark } from '@icon-park/vue-next/es/all';
import '@icon-park/vue-next/styles/index.css'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.component('icon-park', IconPark)
})

使用IconPark

<icon-park type="AllApplication" theme="outline" size="16" fill="#333"/>
编辑于 2023-02-09 0:52
IP属地 黑龙江省
举报
评论