按需自动导入组件与图标

• unplugin-vue-components
• unplugin-auto-import

自动导入组件

自动导入 vue 和 @vueuse/core 的 API ，并使用 ElementPlusResolver 解析器自动导入 Element Plus 组件。

• 安装 unplugin-vue-components 和 unplugin-auto-import 两款插件

  pnpm add -D unplugin-vue-components unplugin-auto-import

• 在 vite.config.ts 中添加以下配置

  import AutoImport from 'unplugin-auto-import/vite'
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  import Components from 'unplugin-vue-components/vite'
  import { defineConfig } from 'vite'
  
  export default defineConfig({
    // ...
    plugins: [
      // ...
      AutoImport({
        imports: ['vue', '@vueuse/core'],
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [
          ElementPlusResolver(),
        ],
      }),
    ],
  })

自动导入图标

unplugin-icons

如果只想使用一些图标集并且不想下载整个集合，可以使用 @iconify-json/[collection-id] 单独安装。

下面是安装 maki 图标集的示例。

• 安装图标集

  pnpm add -D @iconify-json/maki

• 从 vite-plugin-icons 迁移，使用 resolver 解析器进行自动导入

  import AutoImport from 'unplugin-auto-import/vite'
  import { FileSystemIconLoader } from 'unplugin-icons/loaders'
  import IconsResolver from 'unplugin-icons/resolver'
  import Icons from 'unplugin-icons/vite'
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  import Components from 'unplugin-vue-components/vite'
  import { defineConfig } from 'vite'
  
  export default defineConfig({
    // ...
    plugins: [
      // ...
      AutoImport({
        imports: ['vue', '@vueuse/core'],
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [
          ElementPlusResolver(),
          IconsResolver({
            prefix: 'icon',
            enabledCollections: ['ep', 'maki'],
            customCollections: ['sprite'],
          })
        ],
      }),
      Icons({
        customCollections: {
          sprite: FileSystemIconLoader('./sprite', svg =>
            svg.replace(/^<svg /, '<svg fill="currentColor" ')),
        },
      }),
    ],
  })

• 使用 {prefix}-{collection}-{icon} 自动导入

    <icon-ep-UserFilled />

• 使用 ~icons/{collection}/{icon} 导入图标名称并直接将它们用作组件

  <script lang="ts" setup>
  import IconMakiAnimalShelter from '~icons/maki/animal-shelter'
  </script>
  
  <template>
    <ElInput :prefix-icon="IconMakiAnimalShelter" placeholder="Search Icons" />
  </template>

  找不到模块“~icons/maki/animal-shelter”或其相应的类型声明？

  在 tsconfig.json 中添加以下配置

  {
    "compilerOptions": {
      "types": [
        "unplugin-icons/types/vue"
      ]
    }
  }

使用示例

components-and-icons.vue

<script lang="ts" setup>
import { Binan } from '@movk-repo/icons-vue'
import IconMakiAnimalShelter from '~icons/maki/animal-shelter'

const value = ref(3.5)
</script>

<template>
  <div flex="~ gap-2 items-center">
    <ElRate v-model="value" />
    <icon-ep-star />
    <icon-ep-UserFilled />
    <ElIcon color="red" size="24">
      <Binan />
    </ElIcon>
    <ElInput :prefix-icon="IconMakiAnimalShelter" placeholder="Search Icons" />
  </div>
</template>

隐藏源代码