唯品秀前端博客

晚上玩了把Element plus图标icon按需自动导入,发现这货是真坑,Element plus的icon不是class形式,而是变成组件渲染的,官方提供了几种导入方式,但最关心的还是新出来的自动导入功能,该功能官方简直就是一笔带过,纯属自己研究,目前全球没几个人会用,网上也找不到相关正确资料,所以标题取个“全球首发”,勉强不为过

官方文档

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

icon按需自动导入

是的,官方描述一句话概括丢几个链接完事儿,让你自己去研究插件,我都用上UI库了要的就是开箱即用,你却还要让我去研究怎么去引入这些。。。好吧,那就自己研究,谁让开源的呢,没花钱的东西服务就是差了那么点,接下来怎么做?首先我们按官方描述的把这两个插件安装下来

1
npm install -D unplugin-auto-import unplugin-icons // 注意,安装在dev就行

插件配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
// vite.config.ts
import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite' // icon相关
import IconsResolver from 'unplugin-icons/resolver' // icon相关
import AutoImport from 'unplugin-auto-import/vite' // 自动导入
import Components from 'unplugin-vue-components/vite' // 组件注册
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

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, 'typings', 'auto-imports.d.ts'),
    }),

    Components({
      resolvers: [
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'], // 重点,记住这里配了个ep,参数别改,就用ep,改了后我发现就不好使了
        }),
        // Auto register Element Plus components
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
      ],

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

    Icons({
      autoInstall: true,
    }),
  ],
})

使用

1
2
3
4
5
<template>
  <div>
    <el-icon><Apple /></el-icon> // 使用个小苹果儿图标试试
  </div>
</template>

你以为这就结束了?结果一运行啥也不是,浏览器控制台出了一大段警告,如下:

[Vue warn]: Failed to resolve component: Apple If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

正确使用姿势

1
2
3
4
5
6
7
8
<template>
  <i-ep-Bicycle/>
  <i-ep-Apple/>
  <IconEpRefresh /> // 你也可以写成驼峰命名方式
  <el-button>
     <el-icon><i-ep-circle-check-filled /></el-icon> 图标
   </el-button>
</template>

注意,前缀i-是固定的,ep就是我们刚才上面vite.config.ts中配置的那个参数enabledCollections:['ep'],最后的Apple就是对应的icon名称

效果

疑问

你可能会想,这不对啊,我要用的是element plus的icon,你给我整个这个玩意儿,我不要,而且我也不知道你这从哪儿获得的图标名,实际上i-ep-后对应的名字就是我们在官网看到的图标对应的名字

更多了解

我们还可以参考icones.js这个库,里面集成了很多ui框架的icon图标


本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(2) 打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"全球首发-Vite+Vue3+element plus icon图标按需自动导入"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏