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.
The
@element-plus/icons
package contains named exports for each icon found in the Icon Collection. For example, to use theMagicStick
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:Then use it as a component in your template:
within
<el-icon>
, which lets you easily specify the icon's size and color as propsNote: 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.demo