vue升级到3版本后,引入的element 就是element plus了

不管是从官方文档还是自己使用过程中突然发现element plus引入icon是需要单独去引用的,其实说实话有点鸡肋,不明白为什么单独引用。

废话不多说,上解决办法

1、全局引入

main.js 引入

import * as ElIcons from "@element-plus/icons-vue";
for (const iconName in ElIcons) {
  vue.component(iconName, ElIcons[iconName]);
}

使用:

<el-icon><add-location /></el-icon>

这种方式不好的点就在于,把所有icon图标都引入了,一些不必要的都被引入,导致性能可能会差一些。

2、按需引入

在所使用的组件中引入,以Edit为例

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

components中引入Edit

在html中使用

<el-icon>
    <Edit />
</el-icon>

注意,components中的注册的组件名称与html中的一致,否则有可能不生效。

两种方式按自己需要引用。

其实还有一种方式是自己去阿里矢量库中找相应图标,下载代码,以iconfont方式引入工程中也是极为方便的。

今天就分享到这里啦。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐