vue3自動導(dǎo)入icon圖標(biāo)具體實(shí)現(xiàn)方法

更新時(shí)間：2026年01月16日 10:52:05 作者：little__baii

在Vue中,icon通常指的是圖標(biāo),用于在用戶界面中展示圖形符號,這篇文章主要介紹了vue3自動導(dǎo)入icon圖標(biāo)具體實(shí)現(xiàn)方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

如何在Element Plus中正確使用El-Icons的自動導(dǎo)入功能

雖然Element Plus的El-Icons支持自動導(dǎo)入，但在實(shí)際引用時(shí)可能缺乏明確的示例。以下提供具體實(shí)現(xiàn)方法，確保圖標(biāo)能夠正確加載并顯示。

安裝依賴

確保項(xiàng)目中已安裝@element-plus/icons-vue及自動導(dǎo)入，通過以下命令安裝：

npm install @element-plus/icons-vue
npm install -D unplugin-vue-components unplugin-auto-import
npm install unplugin-icons

配置自動導(dǎo)入

以Vite為例，在vite.config.js中添加以下內(nèi)容：

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
      // 自動導(dǎo)入圖標(biāo)組件(這里可以不用配置)
      // IconsResolver({
      //   prefix: 'Icon',
      // }),
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      IconsResolver(
        // 這里不配置也可以自動導(dǎo)入圖標(biāo)
        // {
        //   prefix: 'i',  默認(rèn)是 'i'
        //   enabledCollections: ['ep'],
        // }
        ),
    }),
  ],
});

貼一下源碼

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'
import vueDevTools from 'vite-plugin-vue-devtools'
const pathSrc = path.resolve(__dirname, 'src')

export default defineConfig({
  resolve: {
    alias: {
      '@': pathSrc,
    },
  },
  plugins: [
    Vue(),
    vueDevTools(),
    AutoImport({
      // 自動導(dǎo)入 Vue 相關(guān)函數(shù)，如：ref, reactive, toRef 等
      imports: ['vue'],

      // 自動導(dǎo)入 Element Plus 相關(guān)函數(shù)，如：ElMessage, ElMessageBox... (帶樣式)
      resolvers: [
        ElementPlusResolver(),

        // Auto import icon components
        // 自動導(dǎo)入圖標(biāo)組件(這里可以不用配置)
        // IconsResolver({
        //   prefix: 'Icon',
        // }),
      ],

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

    Components({
      resolvers: [
        // Auto register icon components
        // 自動注冊圖標(biāo)組件
        IconsResolver(
        // 這里不配置也可以自動導(dǎo)入圖標(biāo)
        //   {
        //   prefix: 'i',  默認(rèn)是 'i'
        //   enabledCollections: ['ep'],
        // }
        ),
        // Auto register Element Plus components
        // 自動導(dǎo)入 Element Plus 組件
        ElementPlusResolver(),
      ],

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

    Icons({
      autoInstall: true,
    }),

    Inspect(),
  ],
})

示例

tips: 自動導(dǎo)入icon圖標(biāo)的icon, 需要以{prefix}-{collection}-{icon}格式來使用。

默認(rèn)前綴是i 可以在Components中的IconsResolver修改 element-plus 名稱則是ep

<el-icon><i-ep-lock /></el-icon>

總結(jié)

到此這篇關(guān)于vue3自動導(dǎo)入icon圖標(biāo)具體實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)vue3自動導(dǎo)入icon圖標(biāo)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: