Icono 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.
Si no sabes cómo usar Buefy, mira mi post sobre la introducción a Buefy.
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.
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"/>
Nuevo
</b-button>
Con el siguiente resultado:
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.
Dejo un enlace a la documentación oficial de buefy.
En este post te quiero compartir un código de C++ para listar y cancelar trabajos…
Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…
Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…
Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…
Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…
Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…
Esta web usa cookies.