在这个例子中,我们从element-plus中引入了ElIcon和Edit组件,并在组件的components选项中进行了注册。 3. 在模板中使用Icon组件并指定icon名称 在模板中,你可以使用<el-icon>标签来包裹图标组件,并通过标签名来指定要使用的图标。例如,上面的代码片段中使用了<edit />标签来显示编辑图标。 4. (可...
因为我们不需要再去写CSS Class类然后再写样式去改变图标,写一个图标只需要引入和使用就行了,至于样式修改,通过ElIcon组件两个属性就可以解决,有时候我们甚至并不需要传入属性,ElIcon的默认样式就 OK 了,还能够保持统一,而在我们自定义图标时,也不用那么麻烦再去专门写一个组件来加载 SVG 图标。
使用的方式有2种,一种是直接使用svg,另一种是配合el-icon标签一起使用。 接下来就分别讲讲这两种使用方式(全局和局部引入都会讲到) 只使用 svg 如果你只需使用Element Plus提供的svg图标库的话,是可以不安装Element Plus的。不过这种场景应该很少出现。 安装命令: 代码语言:javascript 复制 npm install @element-p...
svg使用其实跟vue2的场景差不多,封装一个svg-icon组件,然后main.ts引入iconfont里面生成的文件js文件 先封装svgIcon组件,因为vue3的架构基本是集成了AutoImport和Components所以不需要主动引入 <template><svg:class="classList"aria-hidden="true"><use:xlink:href="iconName":fill="color"/></svg></template>c...
在template标签中使用icon <el-icon> <Fold /> </el-icon> 动态Icon 的使用方式 方式一 // 在main.ts注册Icon组件import*asIconsfrom'@element-plus/icons'constapp =createApp(App)Object.keys(Icons).forEach((key) =>{ app.componet(key,Icons[keyaskeyoftypeofIcons])// app.componet(key, Icons[ke...
Vue3 已切换到默认版本,现在新做的项目基本都直接用 Vue3 了, 但是升级到 Element Plus 后很多人都感觉 icon 的使用方式不习惯、不好用,今天就跟大家分享一个简单又方便的方法,用熟悉的方法使用 icon。 只需要用到 UnoCSS UnoCSS 是antfu 开发的一个原子化 CSS 引擎,这里就不详细说了,大家感兴趣可以去读一...
Vue3中使用Element Plus Icon图标 1. 安装 npminstall element-plus --save 2. main.js 引入 import * as Elicons from "@element-plus/icons-vue"; for (const name in Elicons) { app.component(name, Elicons[name]); } 3. 使用 <template#title><el-icon><location/></el-icon>Navigator...
<el-icon> <delete /> </el-icon> 4、在el-menu组件中动态使⽤ 如果想在渲染菜单时动态使⽤icon图标，需要使⽤动态组件，举个栗⼦：// 路由⽂件 export const routes: Array<RouteRecordRaw> = [{ path: '/',component: Layout,redirect: 'home',children: [{ path: '/home',component: ()...
1、可以通过命令npm install @element-plus/icons-vue单独安装icons-vue组件,然后使用 2、也可以通过使用unplugin-icons和unplugin-auto-import从iconify中自动导入任何图标集。 您可以参考此模板。 element plus使用icon图标一般是通过组件的方式使用的,如<Search />,或者自动导入配置后 npm install element...
elementPlus使用el-icon 按着文档来撒 yarn add @element-plus/icons-vue main.ts import*asElementIconsfrom'@element-plus/icons-vue'for(constkeyinElementIcons) { app.component(key, (ElementIconsasany)[key]) } 单独用的时候 <el-icon><eleme /></el-icon>...