Vuetify agrega diseños y componentes de Material Design a nuestras aplicaciones creadas con Vue. Para varios casos necesitamos los iconos de Material Design así como la fuente Roboto de Google.
Hoy te mostraré cómo tener los iconos y la fuente de manera offline, fuera de línea, local, o como le llames. De este modo nuestra aplicación no dependerá de ninguna conexión a internet, cosa que viene genial cuando vamos a crear una app local.
Te cuento que yo seguí este tutorial: https://vuetifyjs.com/en/features/icon-fonts/#usage
Yo uso los materialdesignicons, unos iconos que combinan los de Google junto con unos creados por la comunidad. Así que en el index.html removí la línea que dice:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
Luego instalé los iconos con:
npm install @mdi/font -D
Y ya en src/plugins/vuetify
quedó así:
Me basé de: https://stackoverflow.com/a/58448107/5032550
Removí en el index.html la siguiente línea:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
Luego instalé las fuentes:
npm install --save typeface-roboto
Y ya en App.vue
agregué el estilo:
Puede que necesites agregar las rutas relativas, para ello en vue.config.js agrega el publicPath
así:
Simplemente ejecuta npm run build
y ya todo estará offline. Los cambios hechos al código se pueden observar claramente en el siguiente commit:
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.