Actualmente estoy trabajando en un proyecto con Vue 3 y Element Plus
Por el momento, el elemento más los íconos no se muestran en mi aplicación. Los instalé con yarn usando $ yarn add @element-plus/icons y no tengo idea de qué hacer a continuación.
He intentado importarlo en mi archivo main.ts.
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");Pero no se muestra todavía ..
Espero que alguien pueda iluminarme.
Gracias
El paquete @element-plus/icons contiene exportaciones con nombre para cada icono que se encuentra en la colección de iconos . Por ejemplo, para utilizar el icono de MagicStick , impórtelo por nombre y regístrelo como componente. En Vue 3, puede usar un bloque <script setup> para registrar localmente el componente simplemente importándolo:
<script setup> import { MagicStick } from '@element-plus/icons' </script>Luego utilícelo como un componente en su plantilla:
dentro de <el-icon> , que le permite especificar fácilmente el tamaño y el color del icono como accesorios
Nota: al hacer clic en una tarjeta de icono de la interfaz de usuario de Icon Collection, se copia automáticamente el marcado repetitivo ( <el-icon><magic-stick/><el-icon> ) en el portapapeles para pegarlo fácilmente en su propio archivo.
o independiente, lo que requiere aplicar sus propios estilos
<template> <el-icon size="100"><MagicStick /></el-icon> <!-- OR --> <MagicStick class="icon" /> </template> <style scoped> .icon { color: #f00; height: 200px; } </style>