Element Plus 官方文档对于Icon图标的自动导入,言之甚少。故博主来写篇文章总结一下,如何正确使用 unplugin-icons 和unplugin-auto-import 从iconify 中自动导入图标。 1. 安装依赖 npm i -D unplugin-icons unplugin-auto-import PS: 如果你之前配置ElementPlus组件为“按需导入”,那就只用下unplugin-icons。
import Iconsfrom"unplugin-icons/vite";//import 'element-plus/es/components/button/style/css'//https://vitejs.dev/config/exportdefaultdefineConfig({ plugins: [ vue(),//按需引入Element-plus//引入iconAutoImport({ resolvers: [ ElementPlusResolver({ importStyle:false}),//组件自动导入IconResolver(...
}),Components({resolvers: [// Auto register icon components// 自动注册图标组件IconsResolver({enabledCollections: ['ep'],}),// Auto register Element Plus components// 自动导入 Element Plus 组件ElementPlusResolver(),],dts: path.resolve(pathSrc, 'typings', 'components.d.ts'),}),Icons({auto...
$--color-primary: teal; /* 改变 icon 字体路径变量,必需 */ $--font-path: '~element-gui/lib/theme-chalk/fonts'; @import "~element-gui/packages/theme-chalk/src/index"; 1. 2. 3. 4. 5. 6. 7. 之后,在项目的入口文件src/main.js中,直接引入以上样式文件即可(无需引入 Element 编译好的 ...
[// 自动导入element-plus组件ElementPlusResolver(),// 自动导入图标组件IconsResolver({prefix:'Icon'})],}),Components({resolvers:[// 自动导入element-plus组件ElementPlusResolver(),// 自动导入图标组件IconsResolver({enabledCollections:['ep']})],}),// 自动导入图标组件Icons({autoInstall:true,})]}...
element plus使用icon图标一般是通过组件的方式使用的,如<Search />,或者自动导入配置后 npm install element-plus 安装自动导入插件 安装两个按需导入的插件,避免在多个页面重复引入 API 或 组件 unplugin-auto-import按需自动导入API,如:ref,reactive,watch,computed 等API unplugin-vue-components...
5.input加icon。要使用插槽的方式才会生效 <el-inputplaceholder="搜索文本框"><template#suffix></template></el-input> 引入相关版本信息:@iconify-json/ep是自动安装上的,如果你的package.json里没有,也需要手动安装下 "dependencies": { "@element-plus...
{prefix:'Icon',})],}),Components({resolvers:[// 自动注册图标组件IconsResolver({// 前缀(经测试,该选项无作用,图标依然只能通过 i-ep-xxx 调用)// <el-icon><Lock /></el-icon> 这样按需引入的话,这种形式的el-icon code就用不了了// 只能 <el-icon></el-icon>enabledCollections:['ep'...
},plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver(),IconsResolver({prefix:'Icon', }), ],dts: path.resolve(pathSrc,'auto-imports.d.ts'), }),Components({resolvers: [ElementPlusResolver(),IconsResolver({enabledCollections: ['ep'], ...
关于element-plus的icon全局引入的使用场景:动态配置菜单的时候,icon是通过后端传入的。在vue2,我们可以通过类名来设置icon element-ui icon图标的使用 但是在element-plus,我们发现,icon的使用方法变了,这时就不能通过类名的形式去实现了 element-plus icon图标的使用 ...