Element UI 和Element Plus 的icon 用法是不一样的,在 Element Plus 中都改成了 svg。 我在《Element Plus 的 el-icon 到底怎么用》 里也对比过用法。 我习惯了 Element UI 的用法,但又喜欢用 Vue3 ,所以就在 Element Plus 的基础上二次封装了一个语法有点像 Element UI 里icon 的组件出来。 虽然在我...
使用的方式有2种,一种是直接使用 svg,另一种是配合 el-icon 标签一起使用。 接下来就分别讲讲这两种使用方式(全局和局部引入都会讲到) 只使用 svg 如果你只需使用 Element Plus 提供的 svg图标库 的话,是可以不安装 Element Plus 的。不过这种场景应该很少出现。 安装命令: 代码语言:javascript 代码运行次数:...
https://element-plus.org/zh-CN/component/icon.html 静态示例 <el-icon><Menu/></el-icon> 动态示例 Menu为图标名称,可替换,注意是字符串 <el-icon><component:is="Menu"/></el-icon> 在菜单列表中使用,渲染出每个菜单不同的图标 <el-menu:default-active="activeMenu"class="sidebar"><el-sub-menu...
以下是el-icon的使用方法,分别从安装、引入和使用三个方面进行介绍。 一、安装 使用el-icon之前需要安装Element UI,安装方法如下: 1. 安装VueCLI。 首先需要安装VueCLI,打开终端,执行以下命令: npm install -g vue-cli 2. 创建Vue项目。 在终端输入以下命令来创建Vue项目: 其中my-project是项目名称,可以自己...
</ElIcon> <!-- 也可以直接使用图标标签,无需父标签包裹 --> <edit /> 个人觉得,Element UI的用法会更加简单。 下一篇文章我会讲解如何在Element Plus的基础上二次封装出一个更好用的Icon组件。 Icon 在 Element Plus 中的使用逻辑 Element Plus抛弃了字体图标的用法,直接使用了svg的方式。
<ElIcon:size="30"color="hotpink"> <edit/> </ElIcon> <!-- 也可以直接使用图标标签,无需父标签包裹 --> <edit/> 个人觉得,Element UI的用法会更加简单。 下一篇文章我会讲解如何在Element Plus的基础上二次封装出一个更好用的Icon组件。
el-icon-location-outline el-icon-phone el-icon-phone-outline el-icon-picture el-icon-picture-outline el-icon-delete el-icon-search el-icon-edit el-icon-edit-outline el-icon-rank el-icon-refresh el-icon-share el-icon-setting el-icon-upload ...
</el-icon> 1. 2. 3. 动态示例 Menu为图标名称,可替换,注意是字符串 <el-icon> <component :is="Menu" /> </el-icon> 1. 2. 3. 在菜单列表中使用,渲染出每个菜单不同的图标 <el-menu :default-active="activeMenu" class="sidebar"> ...
import { ElIcon } from 'element-plus' import * as Icons from '@element-plus/icons-vue' // 【步骤1】全量引入svg图标 import 'element-plus/es/components/icon/style/css' // 【步骤2】全量引入svg图标 // 【步骤3】接收父组件传入的 size、color 和 type ...
此时,在el-icon上设置size和color就能控制svg图标的大小和颜色。 需要注意的是size属性必须传数字,不能传字符串进去! 局部引入 <template><el-icon:size="30"color="hotpink"><edit/></el-icon></template>import{ElIcon}from'element-plus'import{Edit}from'@element-plus/icons-vue'import'element-plus/es...