全局引入element-plus怎么使用图标
时间: 2023-07-22 20:50:09 浏览: 286
vue3新建项目,配置路由vue-router,引入element-plus
要使用Element Plus图标,需要先引入Element Plus和Element Plus图标库。在Vue项目中,可以在main.js中全局引入Element Plus和Element Plus图标库,代码如下:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import 'element-plus/lib/theme-chalk/display.css' // 引入Element Plus的display样式
import 'element-plus/lib/theme-chalk/el-icon.css' // 引入Element Plus的icon样式
createApp(App).use(ElementPlus).mount('#app')
```
引入Element Plus图标后,可以在模板中使用`el-icon-*`样式来显示对应的图标。例如,要使用“搜索”图标,可以在模板中写入以下代码:
```html
<i class="el-icon-search"></i>
```
这样就可以显示“搜索”图标了。Element Plus支持的所有图标可以在官方文档中查看,链接如下:
https://element-plus.gitee.io/#/zh-CN/component/icon
阅读全文