element plus 引入icon 三种方法

element plus 引入icon

方法一：直接引入

用法一：

 	  <el-icon color="#409EFC" class="no-inherit">
        <Edit />
      </el-icon>

  import { Edit } from '@element-plus/icons-vue';

用法二：

 	 <IconEpEdit /> 

	import IconEpEdit from '~icons/ep/edit';

方法二：vite按需引入

最初是在element-plus icon这里看见有自动引入的，但是没有找到完整的用例，直到在一个issues看到sxzz说到了一个最佳实践中找到了icon自动引入的完整用例。

注：这里要把 @element-plus/icons-vue 换成 @iconify-json/ep
pnpm i @iconify-json/ep -D

再加载vite的插件 pnpm i unplugin-vue-components unplugin-icons unplugin-auto-import -D

// @see: https://github.com/sxzz/element-plus-best-practices/blob/93be0126da935109ae25cf2f9539991fb4f1d87c/vite.config.ts
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
// ...
plugins: [
   //...

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

    Icons({
      autoInstall: true,
    }),

    Inspect(),
  ],
// ...

	<i-ep-edit />

方案三：统一导入并注册(未验证)

看到了就做一个笔记，以防不测。
来源于网络:查看（里面还有icon的一些其他的使用案例）

//main.ts文件
import * as ElIconModules from '@element-plus/icons'

const app = createApp(App)
// 统一注册Icon图标
for (const iconName in ElIconModules) {
  if (Reflect.has(ElIconModules, iconName)) {
    const item = ElIconModules[iconName]
    app.component(iconName, item)
  }
}

 	  <el-icon color="#409EFC" class="no-inherit">
        <Edit />
      </el-icon>