<component :is="Component" /> 其中Component为字符串,因此使用ElementPlus的icon时我们应当这样写: <el-icon> <Component :is="'Search'"/> </el-icon> 其中Search即为对应图标的名称,参考Icon 图标 | Element Plus (element-plus.org) 当动态生成时: <
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...
<component :is="currentIcon"></component> </ElIcon> </template> export default { name: 'EIcon' } import { computed } from 'vue' import { ElIcon } from 'element-plus' import * as Icons from '@element-plus/icons-vue' // 【步骤1】全量引入svg图标 import 'element-plus/es/compo...
</el-icon> 1. 2. 3. 动态示例 Menu为图标名称,可替换,注意是字符串 <el-icon> <component :is="Menu" /> </el-icon> 1. 2. 3. 在菜单列表中使用,渲染出每个菜单不同的图标 <el-menu :default-active="activeMenu" class="sidebar"> <el-sub-menu v-for="(item, index) in menus" :index...
--动态组件--><component:is="currentIcon"></component></ElIcon></template>exportdefault{name:'EIcon'}import{computed}from'vue'import{ElIcon}from'element-plus'import*asIconsfrom'@element-plus/icons-vue'// 【步骤1】全量引入svg图标import'element-plus/es/components/icon/style/css'// 【...
一、册全局组件 el-icon //main.ts//如果您正在使用CDN引入,请删除下面一行。import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app=createApp(App)for(const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) ...
component(key, Icons[key]); }); app.mount('#app'); 接下来,在你的组件中使用动态加载 el-icon: vue <template> <div> <el-menu> <el-sub-menu v-for="menu in menus" :key="menu.path" :index="menu.path"> <template #title> <el-icon>...
component(Edit.name, Edit) // 全局注册 Edit 图标 app .use(ElementPlus) .mount('#app') 在页面中使用 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <el-icon :size="20" color="hotpink"> <edit /> </el-icon> 此时,在 el-icon 上设置 size 和color 就能控制 svg图标 的大小和颜色。
app.component(i, Icons[i]) } app.mount('#app') 如果你不想全部引入,只是想在全局注册某个svg图标组件,可以用以下方式在main.js里注册(我以Edit图标为例) /* 省略部分代码 */ import { Edit } from '@element-plus/icons-vue' // 引入 Edit 图标 ...
app.component(i, Icons[i]) } app.mount('#app') 如果你不想全部引入,只是想在全局注册某个svg图标组件,可以用以下方式在main.js里注册(我以Edit图标为例) /* 省略部分代码 */ import { Edit } from '@element-plus/icons-vue' // 引入 Edit 图标 ...