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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.