Vuetify Icons

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.

Crea una cuenta y continúa aprendiendo 🚀

Vuetify Icons