Element Plus 图标为啥不显示?

青燕 阅读 13

我按照官方文档装了 Element Plus,也引入了图标组件,但页面上图标就是不显示,只看到一个方框。是不是还要额外引入图标库?

我试过这样写:<el-icon><Search /></el-icon>,但控制台报错说 Search 未定义。难道每个图标都要单独 import 吗?

这是我的 main.js 部分代码:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
我来解答 赞 5 收藏
二维码
手机扫码查看
1 条解答
设计师一茹
哎呀这个坑我踩过!Element Plus 的图标确实是需要单独引入的,官方文档写得不太明显。你需要额外安装 @element-plus/icons-vue 这个包。

先安装图标库:
npm install @element-plus/icons-vue


然后在 main.js 里加上图标引入:
import { Search } from '@element-plus/icons-vue'

const app = createApp(App)
app.component('Search', Search) // 这样就能全局用了
app.use(ElementPlus)
app.mount('#app')


或者你也可以在具体组件里局部引入:
import { Search } from '@element-plus/icons-vue'

export default {
components: { Search }
}


图标显示不出来一般都是因为没正确引入,我当初也被这个坑耽误了半天,后来在 GitHub issue 里找到答案的。Element Plus 把图标拆分成独立包这个设计确实有点迷惑。
点赞
2026-03-09 06:02