ElementUI Plus中Icon在页面中不显示(踩坑笔记)

其实官网里已经说了需要先要注册才能使用,但是我刚开始没看到,耗费了不少时间。
在这里插入图片描述

1.安装:

npm install @element-plus/icons-vue

2.引入:

可以用哪个引入哪个,也可以全部引入。

import { InfoFilled } from "@element-plus/icons-vue";

3.注册:

components: {
    InfoFilled,
  },

4.使用:

<el-icon :size="25" color="#E6A23C">
	<info-filled />
</el-icon>

谨以此文记录我的蠢行为。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要替换ElementUI Plus的颜色,首先需要了解Vue3和ElementUI Plus的使用方法。 Vue3是一种流行的JavaScript框架,用于构建用户界面。它采用组件驱动的开发方式,允许开发者将应用程序分解为多个可复用的组件。ElementUI Plus是ElementUI的扩展版本,提供了更多的组件和功能,方便我们快速构建界面。 要替换ElementUI Plus的颜色,有几个步骤可以按照以下方式进行: 1. 安装ElementUI Plus:通过npm或yarn安装ElementUI Plus。运行命令`npm install element-plus`或`yarn add element-plus`来安装。 2. 创建自定义主题文件:在Vue3的入口文件,创建一个名为theme.scss的自定义主题文件,并将其导入到入口组件。可以使用Sass或者Less等预处理器语言编写主题文件。 3. 修改颜色变量:在theme.scss,可以找到ElementUI Plus的颜色变量。这些变量负责控制组件的颜色,如主题色、边框色等。修改这些变量的值来改变组件的颜色。 4. 使用自定义主题:在入口组件,使用Vue3的全局样式API,将theme.scss导入并应用于整个应用程序。可以使用`import './theme.scss'`来导入。 5.重新编译应用:当修改了自定义主题文件后,需要重新编译应用程序,使得修改生效。运行`npm run build`,将应用程序打包发布到生产环境。 通过上述步骤,就可以替换ElementUI Plus的颜色。注意,在替换颜色时,要保持一致性,确保所有的元素和组件都使用统一的颜色主题。这样,就能够更好地满足项目的需求,让界面更加个性化和美观。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呈两面包夹芝士

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值