1. 使用size属性(推荐方式) Element Plus为el-icon组件提供了size属性,可以直接通过该属性设置图标的大小。需要注意的是,size属性的值应该是一个数字,而不是字符串。 vue <template> <el-icon :size="24" color="blue"> <edit /> </el-icon> </template> <scr...
在页面中使用 <el-icon:size="20"color="hotpink"> <edit/> </el-icon> 此时,在el-icon上设置size和color就能控制svg图标的大小和颜色。 需要注意的是size属性必须传数字,不能传字符串进去! 局部引入 <template> <el-icon:size="30"color="hotpink"> <edit/> </el-icon> </template> import{...
<el-icon :size="20" color="hotpink"> <edit /> </el-icon> 此时,在el-icon上设置size和color就能控制svg图标的大小和颜色。 需要注意的是size属性必须传数字,不能传字符串进去! 局部引入 <template> <el-icon :size="30" color="hotpink"> <edit /> </el-icon> </template> import { El...
<el-icon:size="20"color="hotpink"><edit/></el-icon> 此时,在el-icon上设置size和color就能控制svg图标的大小和颜色。 需要注意的是size属性必须传数字,不能传字符串进去! 局部引入 代码语言:javascript 复制 <template><el-icon:size="30"color="hotpink"><edit/></el-icon></template>import{ElIco...
<ElIcon :size="30" color="hotpink"> <edit /> </ElIcon> <!-- 也可以直接使用图标标签,无需父标签包裹 --> <edit /> 个人觉得,Element UI的用法会更加简单。 下一篇文章我会讲解如何在Element Plus的基础上二次封装出一个更好用的Icon组件。
<ElIcon:size="30"color="hotpink"><edit/></ElIcon><!-- 也可以直接使用图标标签,无需父标签包裹 --><edit/> 个人觉得,Element UI的用法会更加简单。 下一篇文章我会讲解如何在Element Plus的基础上二次封装出一个更好用的Icon组件。 Icon 在 Element Plus 中的使用逻辑 ...
<ElIcon:size="30"color="hotpink"><edit/></ElIcon><!-- 也可以直接使用图标标签,无需父标签包裹 --><edit/> 个人觉得,Element UI的用法会更加简单。 下一篇文章我会讲解如何在Element Plus的基础上二次封装出一个更好用的Icon组件。 Icon 在 Element Plus 中的使用逻辑 ...
<ElIcon:size="30"color="hotpink"> <edit/> </ElIcon> <!-- 也可以直接使用图标标签,无需父标签包裹 --> <edit/> 1. 2. 3. 4. 5. 6. 个人觉得,Element UI 的用法会更加简单。 下一篇文章我会讲解如何在 Element Plus 的基础上二次封装出一个更好用的 ...
<e-icon type="Aim" :size="36" color="rgba(53, 131, 208, 0.5)" /> 因为是二次封装,所以不能用回<el-icon>,这是Element Plus的组件。 本次封装的目的是简化icon的使用方式,所以我把标签名也跟着简化了,变成<e-icon> 缺点 打包出来的体积可能会大一丢丢。
<el-icon:size="20"color="hotpink"><edit/></el-icon> AI代码助手复制代码 此时,在el-icon上设置size和color就能控制svg图标的大小和颜色。 需要注意的是size属性必须传数字,不能传字符串进去! 局部引入 <template><el-icon:size="30"color="hotpink"><edit/></el-icon></template>import{ElIcon}from...