javascript

Iconos de material design con Buefy

Los iconos de material design de Google son muy populares y se pueden integrar en varios frameworks o diseños.

Hoy vamos a ver cómo usar los material icons en el framework Buefy, que es Bulma CSS con Vue.

Inicio

Si no sabes cómo usar Buefy, mira mi post sobre la introducción a Buefy.

Instalar iconos

Ahora que ya tienes un proyecto, instala los iconos con npm así:

npm install --save @mdi/font

Espera a que termine la instalación y después, en tu archivo main.js, importa los iconos con:

import '@mdi/font/css/materialdesignicons.css'

Como ejemplo dejo mi archivo main.js, presta atención a la línea 3:

import Vue from 'vue'
import App from './App.vue'
import '@mdi/font/css/materialdesignicons.css'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import router from "./router"

Vue.use(Buefy);
Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
    router,//<-- Aquí el router
}).$mount('#app');

Eso es todo lo que necesitamos, pues por defecto Buefy usará los iconos de material design.

Usar iconos

Cuando hayas instalado los iconos puedes usarlos a través del componente b-icon. Para buscar los iconos ve a la página de Material Design Icons y busca el nombre del icono que quieres usar.

En este caso usaré el icono llamado account-plus y es así:

<b-icon icon="account-plus"/>

Recuerda que puedes usar variaciones de tamaño a través del atributo size. En mi caso he colocado el icono dentro de un botón:

<b-button :loading="cargando" @click="mostrarModalAgregarAlumno=true" type="is-primary">
    <b-icon icon="account-plus" size="is-small"/>&nbsp;
    Nuevo
</b-button>

Con el siguiente resultado:

Icono de material design con Buefy

Otra ventaja que tenemos al usar este paquete de iconos es que las alertas y componentes predeterminados los usarán y no tenemos que configurar manualmente el paquete.

Conclusión

Dejo un enlace a la documentación oficial de buefy.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Servidor HTTP en Android con Flutter

El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…

4 días hace

Imprimir automáticamente todos los PDF de una carpeta

En este post te voy a enseñar a designar una carpeta para imprimir todos los…

5 días hace

Guía para imprimir en plugin versión 1 desde Android

En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…

1 semana hace

Añadir tasa de cambio en sistema de información

Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…

2 semanas hace

Comprobar validez de licencia de plugin ESC POS

Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…

2 semanas hace

Imprimir euro € en impresora térmica

Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…

4 semanas hace

Esta web usa cookies.