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..
Hope someone can enlighten me.
Thanks
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'
</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.
or standalone, which requires applying your own styles
<template>
<el-icon size="100"><MagicStick /></el-icon>
<!-- OR -->
<MagicStick class="icon" />
</template>
<style scoped>
.icon {
color: #f00;
height: 200px;
}
</style>