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

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.