WEB前端
(0)
收藏
我要回答
按照ElementPlus官网的示例使用icon并不会显示对应的icon
https://element-plus.gitee.io/zh-CN/component/icon.html
解决方案是：
首先需要安装icons，使用对应的包管理工具
1
$ npm install @element-plus/icons-vue
然后在你的Vue项目中的main.js需要将icon进行注册
可以仅仅注册使用的icon
如下：
2
3
4
5
6
import {Timer,Edit} from '@element-plus/icons-vue'
import {Timer,Edit} from
'@element-plus/icons-vue'
const app = createApp(App);
app.component("Timer",Timer)
app.component(
"Timer"
,Timer)
app.component("Edit",Edit)
"Edit"
,Edit)
app.use(store).use(router).use(ElementPlus).mount('#app')
app.use(store).use(router).use(ElementPlus).mount(
'#app'
)
如果需要将所有图标都导入，可以：
import * as ElIcons from '@element-plus/icons-vue'
import * as ElIcons from
for (const iconName in ElIcons) {
for
(const iconName
in
ElIcons) {
app.component(iconName,ElIcons[iconName])
}
这样在需要显示图标的地方即可：
<el-divider>wanmait.com</el-divider>
<
el-divider
>wanmait.com</
>
<el-icon>
el-icon
<Timer />
Timer
/>
</el-icon>
</
按照ElementPlus官网的示例使用icon并不会显示对应的icon
https://element-plus.gitee.io/zh-CN/component/icon.html
解决方案是：
首先需要安装icons，使用对应的包管理工具
1
$ npm install @element-plus/icons-vue然后在你的Vue项目中的main.js需要将icon进行注册
可以仅仅注册使用的icon
如下：
1
2
3
4
5
6
import {Timer,Edit} from'@element-plus/icons-vue'const app = createApp(App);app.component("Timer",Timer)app.component("Edit",Edit)app.use(store).use(router).use(ElementPlus).mount('#app')如果需要将所有图标都导入，可以：
1
2
3
4
5
6
import * as ElIcons from'@element-plus/icons-vue'const app = createApp(App);for(const iconNameinElIcons) {app.component(iconName,ElIcons[iconName])}app.use(store).use(router).use(ElementPlus).mount('#app')这样在需要显示图标的地方即可：
1
2
3
4
<el-divider>wanmait.com</el-divider><el-icon><Timer/></el-icon>