Vue3 icons 图标无效

最新推荐文章于 2024-08-17 20:30:53 发布

zhang2383906154

最新推荐文章于 2024-08-17 20:30:53 发布

阅读量781

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/zhang2383906154/article/details/132544527

版权

问题描述：

需要在账号/密码处加上icon图标，但是引用完element-plus/icons之后，还是不行，不显示icon图标。后面发现，当前版本的emement-plus的icon图标不能直接使用了

前置条件：

npm install @element-plus/icons

全局引入：

打开main.js文件添加：

// 导入所有的el-icon图标
import * as ElIconModules from '@element-plus/icons'

const app = createApp(App)
//  统一注册el-icon图标
for(let iconName in ElIconModules){
    app.component(iconName,ElIconModules[iconName])
}

单独引用：

<template>
	<el-icon><arrow-down /></el-icon>
</template>

<script>
import { ArrowDown } from '@element-plus/icons'
export default {
  components: {
	ArrowDown
  }
}
</script>