Search code examples
cssvuejs3element-plus

How can i use icons from vuejs3?

I want to use icons-vue so i installed with this command: yarn add @element-plus/icons-vue

this is the documentation: https://element-plus.org/en-US/component/icon.html#icon-usage

but when i refreshed the page i can not see the icons, how can i show the icons?

i tried to use globally

import ElementPlusIcons from '@element-plus/icons-vue'
...
createApp(App)
  
  .use(ElementPlusIcons)

but does not work

<el-menu-item >
            <el-icon>  <edit></edit></el-icon>
</el-menu-item>

my project is not recognizing that library

enter image description here

Solution

  • You would require to use unplug-elementplus plug in (https://github.com/element-plus/unplugin-element-plus).

    And manually import icons in any component to take full advantage of tree shaking.

    Please refer to https://element-plus.org/en-US/guide/quickstart.html#manually-import

    Also, note that element plus is built for vue3