Vue-cli 3 – Instalación de iconos de material design

Solución:

Uso

La lista completa de iconos disponibles se encuentra en https://materialdesignicons.com/. En la primera carga, el sitio puede tardar unos segundos en mostrar la lista de vista previa del icono en la parte inferior de la página. Desplácese sobre el icono deseado y tome nota del nombre del icono que se muestra en la parte superior de la información sobre herramientas. Alternativamente, haga clic en la vista previa del ícono para mostrar los detalles del ícono en una ventana emergente. Puede importar el icono en su componente Vue usando este formato:

import FooIcon from 'vue-material-design-icons/__ICON_NAME__.vue'

Por ejemplo, esta captura de pantalla muestra la información sobre herramientas para el icono llamado auto-fix:

En su componente Vue, importaría el ícono así:

import AutoFixIcon from 'vue-material-design-icons/auto-fix.vue'

y declararlo como componente local:

export default {
  name: 'my-component',
  components: {
    AutoFixIcon
  }
}

y luego úselo en la plantilla de su componente:

<template>
  <AutoFixIcon/>
</template>

Tutorial

1. Crear un nuevo vue-cli proyecto (por ejemplo, llamado vue-md-icons-demo) y elija el default configuración cuando se le solicite:

   vue create vue-md-icons-demo
   

2. CD en el directorio del proyecto recién creado:

   cd vue-md-icons-demo
   

3. Instalar en pc vue-material-design-icons paquete de NPM:

   npm i -S vue-material-design-icons
   

4. En src/main.js, importe los estilos de los iconos:

     import Vue from 'vue'
     import App from './App.vue'
   + import 'vue-material-design-icons/styles.css'
   

5. En src/App.vue (o en su archivo de componente), importe el icono que desee utilizar (consulte Uso arriba) y declararlo como un componente local. En este caso, importaremos el icono llamado air-conditioner:

     <script>
     import HelloWorld from './components/HelloWorld.vue'
   + import AirConditionerIcon from 'vue-material-design-icons/air-conditioner.vue'
   
     export default {
       name: 'app',
       components: {
   -     HelloWorld
   +     HelloWorld,
   +     AirConditionerIcon
       }
     }
   

6. En src/App.vue, declare el elemento de icono en la plantilla (es decir, <AirConditionerIcon/> en este caso):

   <template>
     <AirConditionerIcon/>
   </template>
   

manifestación

---

---

Utiliza Nuestro Buscador