Unplugin 系列插件

unplugin-vue-components

自動引入 vue 子元件，不需要再自行去引入

# npm
npm i -D unplugin-vue-components

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})

unplugin-icons

icon 插件，支援各種使用方式

圖標庫 https://icones.js.org/

• 安裝

npm i -D unplugin-icons

# 全安裝
npm i -D @iconify/json

# 按需安裝 @iconify-json/[collection-id]
npm i -D @iconify-json/mdi

// 自動安裝
Icons({
  // expiremental
  autoInstall: true,
})

• 註冊：

// vite.config.js
import Icons from 'unplugin-icons/vite';

export default defineConfig({
  plugins: [
    Icons({
      autoInstall: true,
    }),
  ],
  // ...
});

配合 unplugin-vue-components 使用

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    Vue(),
    Components({
      resolvers: [
        IconsResolver(),
      ],
    }),
    Icons(),
  ],
}

如果要自訂 prefix 可以參考 https://github.com/antfu/unplugin-icons#name-conversion

IconsResolver({
  prefix: 'icon', // <-- 預設為 i
})