第三方插件 unplugin-icons

菠菜盼娣2025-12-18 12:16

nuxt中使用

1 安装

npm i unplugin-icons

npm i @iconify/json 安装图标集

2 nuxt.config.ts中设置

import Icons from 'unplugin-icons/vite'

import IconsResolver from 'unplugin-icons/resolver'

javescript 复制代码

vite:[
 plugins:[
   Components({
      resolvers:[
        IconsResolver({
            prefix:'i',    设置前缀
            enabledCollections:['ep','ant-design','mdi']    图标集
        })
       ]
     }),
     Icons({
        autoInstall:true
     })
   ]
]

3 使用

< i-ep-aim/>

< i-ant-design-account-book-filled/>

vite中使用

1 安装

npm install unplugin-icons -D

npm i @iconify/json 安装图标集

2 配置 unplugin-icons

javescript 复制代码

import path from 'node:path'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
 vue(),
  Icons({
    autoInstall: true,      //自动安装
   compiler: 'vue3',    指定编译器
    customCollections: {
      base: FileSystemIconLoader(path.resolve('src', 'assets/icons'), svg => svg),
   },
  }),
],
 resolve: {
   alias: {
    '@/': `${path.resolve(__dirname, 'src')}/`,
  },
},
})

3 图标放进对应目录assets 文件夹下

4 使用

< script setup lang="ts">

import LoginLeftImg from '~icons/base/login-left-img'

< /script>

< template>

< div class="layout">

< login-left-img class="left-icon" />

< /div>

< /template>

报错的话 cannt find module 需要配置'unplugin-icon/types/vue'

tsconfig.json

"types":[

"node",'vite/client','unplugin-icon/types/vue']