Element Plus 官方文档对于Icon图标的自动导入,言之甚少。故博主来写篇文章总结一下,如何正确使用 unplugin-icons 和unplugin-auto-import 从iconify 中自动导入图标。 1. 安装依赖 npm i -D unplugin-icons unplugin-auto-import PS: 如果你之前配置ElementPlus组件为“按需导入”,那就只用下unplugin-icons。
component: () => import('@/views/device/index'), //二级菜单的绝对物理路径 meta: { title: '系统首页', icon: 'dashboard' }//二级菜单名字、图标 }, { // 一级菜单下面的二级菜单 path: 'detail', name: 'detail', component: () => import('@/views/device/detail'), meta: { title: ...
在使用element-plus的时候直接导入使用会发现默认是英文,如果需要使用中文则只需要一下操作 在main.ts(js)中添加以下代码 import ElementPlus from "element-plus"import locale from'element-plus/lib/locale/lang/zh-cn'const app=createApp(App) app.use(ElementPlus ,{locale}) 在使用icon的时候会发现直接使用...
ELEMENT-PLUS的图标库可以通过在组件中使用icon标签来引入图标,具体步骤如下: 在项目中引入Element-Plus的样式文件: import 'element-plus/packages/theme-chalk/src/icon.scss'; 复制代码 在需要使用图标的组件中,使用icon标签引入图标,例如: <template> <el-button> <icon name="el-icon-edit"></icon> 编...
Vue3 已切换到默认版本,现在新做的项目基本都直接用 Vue3 了, 但是升级到 Element Plus 后很多人都感觉 icon 的使用方式不习惯、不好用,今天就跟大家分享一个简单又方便的方法,用熟悉的方法使用 icon。 只需要用到 UnoCSS UnoCSS 是antfu 开发的一个原子化 CSS 引擎,这里就不详细说了,大家感兴趣可以去读一...
element-plus官方提示,Icon图标正在向SVG Icon迁移,之前使用的Font Icon即将被弃用。 安装 $ yarn add @element-plus/icons # 或者 $ npm install @element-plus/icons 基础使用 在需要加载图标的页面内按需引入所需图标。(ps:这里官方文档并没有详细说明) ...
关于element-plus的icon全局引入的使用场景:动态配置菜单的时候,icon是通过后端传入的。在vue2,我们可以通过类名来设置icon element-ui icon图标的使用 但是在element-plus,我们发现,icon的使用方法变了,这时就不能通过类名的形式去实现了 element-plus icon图标的使用 ...
<template><el-icon><Edit/></el-icon><!-- Or use it independently without derive attributes from parent --><Edit/></template> 效果图: Screen Shot 2023-05-16 at 15.50.46.png 如何动态获取icon图标? <el-menu-itemv-for="item in noChildren":key="item.name":index="item.name"><el-ico...
Vue3 已切换到默认版本,现在新做的项目基本都直接用 Vue3 了, 但是升级到Element Plus后很多人都感觉 icon 的使用方式不习惯、不好用,今天就跟大家分享一个简单又方便的方法,用熟悉的方法使用 icon。 只需要用到 UnoCSS UnoCSS是 antfu 开发的一个原子化 CSS 引擎,这里就不详细说了,大家感兴趣可以去读一下...
npm install @element-plus/icons-vue 或者 yarn add @element-plus/icons-vue 2.引入核心文件 importElementPlusfrom'element-plus'import'element-plus/dist/index.css'app.use(ElementPlus,) 3.上边是引入基本样式,想要用到icon图标还需用到 import*asElementPlusIconsVuefrom'@element-plus/icons-vue'for(const...