在vue3中element-plus的字体图标如何使用
时间: 2023-10-08 20:13:19 浏览: 383
vue3-element-admin:vue3 + ts + element-plus
在Vue3中使用Element Plus的字体图标,你需要按照以下步骤进行操作:
1. 在你的Vue项目中安装Element Plus:
```
npm install element-plus --save
```
2. 在你的Vue项目的main.js(或者其他入口文件)中引入Element Plus:
```javascript
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
```
3. 在你的组件中使用Element Plus提供的图标组件:
```html
<template>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
</template>
```
其中,`el-icon-search`是Element Plus提供的一个图标类名,你可以在Element Plus官方文档中查看所有可用的图标类名。
注意:在Vue3中,Element Plus的图标组件使用的是字体图标,而不是SVG图标。如果你需要使用SVG图标,请使用`@element-plus/icons`模块。
阅读全文