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

Cancelar trabajo de impresión con C++

En este post te quiero compartir un código de C++ para listar y cancelar trabajos…

1 día hace

Copiar bytes de Golang a JavaScript con WebAssembly

Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…

4 semanas hace

Imprimir PDF con Ghostscript en Windows de manera programada

Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…

4 semanas hace

Hacer pruebas en impresora térmica Bluetooth Android

Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…

1 mes hace

Limpiar clave PEM

Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…

1 mes hace

Foco con Telegram, apagador de 3 vías, relevador y ESP8266

Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…

2 meses hace

Esta web usa cookies.