Installing ElementPlus Icons globally on Vue 3

Question

I am currently working on a project with Vue 3 and Element Plus.

As of the moment, the element plus Icons are not showing on my app. I have installed them with yarn using $ yarn add @element-plus/icons and I have no idea what to do next.

I have tried importing it on my main.ts file.

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "@element-plus/icons";

createApp(App).use(store).use(router).use(ElementPlus).mount("#app");

But it is not showing still.

Answer 1

The @element-plus/icons package contains named exports for each icon found in the Icon Collection. For example, to use the MagicStick icon, import it by name, and register it as a component. In Vue 3, you can use a <script setup> block to locally register the component simply by importing the component:

<script setup>
import { MagicStick } from '@element-plus/icons-vue'
</script>

Then use it as a component in your template:

• within <el-icon>, which lets you easily specify the icon's size and color as props

  Note: Clicking an icon card from the Icon Collection UI automatically copies boilerplate markup (<el-icon><magic-stick/><el-icon>) to your clipboard for easily pasting it into your own file.

<template>
  <el-icon :size="100">
    <MagicStick />
  </el-icon>
</template>

• or standalone, which requires applying your own styles:

<template>
  <MagicStick class="icon" />
</template>

<style scoped>
.icon {
  color: #f00;
  height: 200px;
}
</style>

demo