Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Vuetify Icons
Veamos cómo configurar y empezar a usar icons cuando trabajamos con Vuetify.
Documentación de Vuetify
Para empezar a usar íconos en nuestro proyecto, podemos consultar la documentación de Vuetify en la página icon fonts dentro de la sección de features.
Vuetify trabaja con cuatro bibliotecas de íconos bastante populares:
- Material Design Icons
- Material Icons
- Font Awesome 4
- Font Awesome 5
Instalación de Icon Fonts
Para usar estas bibliotecas en nuestro proyecto, es necesario instalarlas. Incluso si usamos la biblioteca asignada por defecto, debemos instalarla manualmente.
Vuetify trabaja por defecto con Material Design Icons (MDI), pero para poder utilizar los íconos debemos instalar mdi a través de npm:
npm install @mdi/font
Luego, en nuestro archivo main.js, debemos importar el CSS correspondiente:
import '@mdi/font/css/materialdesignicons.css';
Uso de Íconos en Componentes
Una vez instalada la biblioteca, podemos agregar íconos a nuestros componentes. Por ejemplo, podemos agregar un ícono a un botón dentro de un app bar usando la propiedad prepend-icon:
<v-btn prepend-icon="mdi-home">Inicio</v-btn>
Esto mostrará un ícono en el lado izquierdo del botón.
Consultar la Lista de Íconos
Para ver la lista completa de íconos disponibles en MDI, podemos visitar su página oficial y buscar por nombre. Por ejemplo, para un ícono de carrito de compras:
<v-btn prepend-icon="mdi-cart">Carrito</v-btn>
Para un ícono de información:
<v-btn prepend-icon="mdi-information">Acerca de</v-btn>
Uso de Font Awesome en Vuetify
Si queremos usar Font Awesome 5, debemos instalar la biblioteca y configurarla en Vuetify. Algunos íconos son gratuitos y otros de pago.
Ejemplo de uso con Font Awesome:
<v-btn prepend-icon="fas fa-house">Inicio</v-btn>
Sin embargo, para que Vuetify reconozca estos íconos, debemos agregar una configuración especial en createVuetify dentro del archivo main.js:
import { createVuetify } from 'vuetify';
import '@fortawesome/fontawesome-free/css/all.css';
const vuetify = createVuetify({
icons: {
defaultSet: 'mdi',
aliases: {
fa: 'fas',
},
sets: {
mdi: {
component: 'mdi',
},
fa: {
component: 'fa',
},
},
},
});
Si no incluimos esta configuración, Vuetify trabajará solamente con MDI por defecto.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Lo que haremos a continuación es empezar a usar íconos en nuestro proyecto. Para esto, la documentación de Vuetify tiene una página llamada icon fonts en la sección de features. Aquí se comenta que Vuetify trabaja con cuatro bibliotecas de íconos que son bastante populares. Tenemos material design icons, material icons y font awesome en su versión 4 y 5. Nosotros podemos usar estas cuatro opciones en nuestro proyecto pero para poder usarlas tenemos primero que instalar la biblioteca que nos interesa. Por ejemplo, si bajamos un poco nos vamos a encontrar con una sección llamada installing icon fonts. Aquí se indica cómo podemos instalar las fuentes de íconos en nuestro proyecto. Nosotros tenemos que instalar la biblioteca que queremos usar, incluso si es que usamos la biblioteca que viene asignada por defecto. Por defecto Vuetify va a trabajar con material design icons. Sin embargo para poder usar realmente los íconos tenemos que instalar mdi a través de npm, y luego de instalar esta dependencia, tenemos que importar el css correspondiente a esta fuente, porque es una fuente que incluye a los íconos. Por lo tanto, tenemos que ejecutar este comando npm install en la terminal, y luego que termina, en nuestro archivo main vamos a añadir el "import" que menciona la documentación. ¿Sí? Añadimos este import, y luego de hacer ello, ya por defecto Vuetify va a trabajar con mdi. Por ejemplo, nosotros a nuestro botón de home, que se encuentra en nuestro app bar, podemos agregarle un icono a través de la propiedad prepend icon. Esta propiedad va a mostrar un icono al lado izquierdo del botón. En este caso, a modo de ejemplo, le estamos poniendo un icono llamado mdi -guión- Vuetify. Si hacemos ello vamos a ver que ya se muestra un icono al lado izquierdo de nuestro botón. ¿Cómo podemos consultar la lista completa de iconos? Simplemente le damos clic a este enlace y vamos a llegar a la página de material design icons o mdi. Aquí por ejemplo. podemos buscar home y vamos a encontrar varias opciones. Supongamos que queremos usar este icono, simplemente vamos a poner el prefijo mdi seguido del nombre: en este caso home variant. Guardamos y vemos que el icono se actualizó. Vamos a buscar entonces uno para el carrito de compras. Vamos a usar el que se llama cart, y de la misma manera vamos a agregar la propiedad prepend icon a nuestro v-button y vamos a poner por aquí cart. Allí tenemos el icono agregado. Vamos a poner también uno para about. Vamos a poner un icono de info en este caso. Y entonces repetimos la misma idea. Information. Allí lo tenemos. ¿Qué pasa si quieres usar los iconos de Font Awesome? Por ejemplo, Font Awesome en su versión 5. Font Awesome ofrece iconos. Algunos son gratuitos, otros son de pago. Por ejemplo, vamos a buscar un icono llamado home. Y tenemos estas opciones. Ellos no ofrecen un icono llamado home, pero ofrecen uno llamado house. Por ejemplo, si queremos hacer uso de este icono, usaríamos "fas" y "house". La documentación nos muestra aquí un ejemplo de cómo podemos usar los iconos de Font Awesome. Por ejemplo, el icono de "fa plus" se accede de esta manera. Sin embargo, para que sea reconocido, es necesario agregar en nuestra configuración de Vuetify una sección de icons. Para que no se trabaje solamente con un set, sino que tengamos dos sets de icons. Por defecto, solo trabajará con MDI. Este ejemplo nos permite trabajar con dos sets de icons. Si no incluimos esta sección, por defecto, solo se va a trabajar con MDI. Entonces, si quieres usar otra de las bibliotecas, tienes que declarar una sección icons en create Vuetify. O sea que en el archivo main, así como tenemos estas opciones de configuración, agregaríamos una más para los iconos. En nuestro caso, ya instalamos MDI y no necesitamos poner ninguna configuración porque por defecto Vuetify va a trabajar con esta biblioteca.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript