unplugin-icons == elementPlus自动引入icon

unplugin-icons作为一个通用图标解决方案，支持主流构建工具和框架。它提供150多个图标集和20万个图标，通过按需加载优化性能。该工具兼容SSR/SSG，支持自定义样式和自动导入。此外，unplugin-icons支持TypeScript和自定义图标加载，为开发者提供灵活高效的图标资源管理方式。

安装

注意：此软件包仅支持 ESM。请确保您的项目使用 ES 模块（"type": "module".esmpackage.json或 .esm.mjs文件扩展名）。

步骤 1：安装插件

复制代码

npm i -D unplugin-icons

步骤 2：安装图标数据

我们使用Iconify作为图标数据源（支持 100 多个图标集）。

只安装你需要的图标集：

复制代码

npm i -D @iconify-json/mdi @iconify-json/carbon

自动安装（实验性功能）

导入unplugin-icons图标集时自动安装：

复制代码

Icons({
  autoInstall: true, // Auto-detects npm/yarn/pnpm
})

自动导入

unplugin-vue-components

配合使用unplugin-vue-components

例如在 Vite 中：

复制代码

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

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

这样您就可以随意使用任何图标，而无需显式导入。只会打包已使用的图标。

复制代码

<template>
  <i-carbon-accessibility/>
  <i-mdi-account-box style="font-size: 2em; color: red"/>
</template>

unplugin-auto-import

例如在 Vite 中：

复制代码

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'

export default {
  plugins: [
    AutoImport({
      resolvers: [
        IconsResolver({
          prefix: 'Icon',
          extension: 'jsx',
        }),
      ],
    }),
    Icons({
      compiler: 'jsx', // or 'solid'
    }),
  ],
}

这样，您就可以随意使用任何带有该前缀的图标，Icon而无需显式导入。类型声明将自动生成

复制代码

export function Component() {
  return (
    <div>
      <IconCarbonApps />
      <IconMdiAccountBox style="font-size: 2em; color: red" />
    </div>
  )
}

compiler请根据您的框架配置此选项。某些框架可能需要额外的对等依赖项。
复制代码
  // Compiler configuration
  compiler: null,         // Framework compiler: 'vue3', 'jsx', 'svelte', 'solid', etc.
  jsx: 'react',           // JSX framework: 'react' or 'preact' (when compiler: 'jsx')

组件命名

图标会按照以下命名规则自动导入：

复制代码

{prefix}-{collection}-{icon}

prefix组件名称前缀（默认值i：）
collectionIconify 集合 ID（例如mdi，，，carbon）fa-solid
icon图标名称（kebab-case）

自定义前缀：

复制代码

IconsResolver({
  prefix: 'icon', // 使用"icon"而非"i"
})

<template>
  <icon-mdi-account />
</template>

无前缀：

复制代码

IconsResolver({
  prefix: false,
  enabledCollections: ['mdi'], // 可选：限制至特定集合
})

<template>
  <mdi-account />
</template>

最佳实践elementPlus

使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。您可以参考此模板

vite配置

复制代码

import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Inspect from 'vite-plugin-inspect'

const pathSrc = path.resolve(__dirname, 'src')

export default defineConfig({
  resolve: {
    alias: {
      '@': pathSrc,
    },
  },
  plugins: [
    Vue(),
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],

      // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      resolvers: [
        ElementPlusResolver(),

        // Auto import icon components
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],

      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),

    Components({
      resolvers: [
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
        // Auto register Element Plus components
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
      ],

      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),

    Icons({
      autoInstall: true,
    }),

    Inspect(),
  ],
})

使用

复制代码

<script lang="ts" setup>
// Method 1: Import and register icon component manually.
// 方式 1:手动导入并注册图标组件
import IconEpApple from '~icons/ep/apple'

const msg = ref('')

const handleClick = () => {
  ElMessage.success('Hello world')
}
</script>

<script lang="ts">
export default defineComponent({
  components: {
    // Method 3: or we can use `unplugin-auto-import` to auto import icon component and register manally. not recommended)
    // 方法 3：或者我们还可以使用 `unplugin-auto-import` 来自动导入组件，再手动注册组件。（不推荐）
    IconEpRefresh,
  },
})
</script>

<template>
  <el-space direction="vertical">
    <IconEpApple />

    <!-- Method 2: or we can use `unplugin-vue-components` to auto register icon component -->
    <!-- 或者我们可以使用 `unplugin-vue-components` 插件来自动注册图标 -->
    <!-- Please refer to vite.config.ts -->
    <!-- 请参阅 vite.config.ts -->
    <i-ep-add-location />
    <i-ep-aim />

    <!-- Method 3 -->
    <!-- 方法 3 -->
    <IconEpRefresh />

    <!-- For more icons please refer to https://icones.js.org/ -->
    <!-- 更多图标请参阅 https://icones.js.org/ -->

    <el-button @click="handleClick">
      <el-icon><i-ep-circle-check-filled /></el-icon> Hello world
    </el-button>

    <el-input v-model="msg" />
  </el-space>

  <div v-loading="{ text: 'Loading...' }" style="height: 500px">
    Loading Area
  </div>
</template>