Saltar al contenido

FontAwesome con Vuetify – Cómo incluir íconos Font Awesome dentro del componente v-icon

Bienvenido a proyecto online, ahora vas a encontrar la respuesta de lo que estás buscando.

Solución:

Para un proyecto Nuxt / Vuetify:

Complementando la respuesta anterior, también puede configurarlo en el archivo de configuración de Vuetify, que se crea durante la instalación del proyecto ( “plugins / vuetify.js” ), agregando el prop “iconfont”:

import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, 
 iconfont: 'fa'
)

Ahora, utilícelo con el componente de icono de esta manera:

fab fa-vuejs

Puede utilizar la sacudida de árboles.

Dado que está buscando una opción para evitar cargar todos los íconos en vue / vuetify, le sugiero que utilice el método de agitación de árboles y agregue cada ícono que desee usar, manualmente. Esto puede ser un poco tedioso, pero agregar íconos a pedido será beneficioso a largo plazo, ya que el paquete web simplemente agrupará los que usted especifique.

tenga en cuenta:

En este tutorial, asumo que el lector tiene el paquete Pro. Si solo desea usar los gratuitos, simplemente elimine cualquier cosa que se parezca a profesional de la mezcla

A continuación, puede ver mi forma preferida de hacer esto con vuetify y usar SVG con v-icon y v-text / v-html:

Primero tenemos que instalar los iconos:

(abra su terminal / símbolo del sistema dentro de su proyecto e instálelo)

$ npm i --save @fortawesome/fontawesome-svg-core // this is the svg core, it is needed.
$ npm i --save @fortawesome/vue-fontawesome // Vue integration *
$ npm i --save @fortawesome/free-brands-svg-icons // Branding icons
$ npm i --save @fortawesome/free-regular-svg-icons // only for FA5 free **
$ npm i --save @fortawesome/free-solid-svg-icons // only for FA5 free **
$ npm i --save @fortawesome/pro-regular-svg-icons // Pro icons regular type
$ npm i --save @fortawesome/pro-light-svg-icons // Pro icons light type
$ npm i --save @fortawesome/pro-solid-svg-icons // Pro icons solid type
$ npm i --save @fortawesome/pro-duotone-svg-icons // Pro icons duotone type ***
  2. El paquete de integración vue más información (**) Solo es necesario para los íconos gratuitos, si tienes Proy siguió las instrucciones aquí
  3. , ya están incluidos en pro. (***)

Al momento de escribir, los íconos de duotono aún no están completamente integrados, tenga cuidado con los errores.

Luego agreguemos esto a nuestra configuración de vuetify: Supongo aquí que usa vuejs con javascript (no mecanografiado) vue add vuetifyy que has instalado vuetify a través de vuetify.js . los plugins el archivo debe residir dentro del src carpeta en tu

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import  library  from '@fortawesome/fontawesome-svg-core' // Core SVG
import  FontAwesomeIcon  from '@fortawesome/vue-fontawesome' // Integration
// ... there should be more here, but see next part below ...

Vue.component('font-awesome-icon', FontAwesomeIcon) // add it to vue
Vue.use(Vuetify);

export default new Vuetify(
  icons: 
    iconfont: 'faSvg', // The bees knees, what most people are looking for.
  ,
);

carpeta. Su kilometraje puede variar. fa-plus Bien, ahora que hemos agregado los componentes principales de FontAwesome 5, usemos el cambio de árbol para indicar qué íconos nos gustaría usar para nuestro proyecto. Solo usaré dos iconos como ejemplos: fa-user-circley , y los agregaré para tres de los paquetes Font Awesome Pro 5 que instalamos (Ligero, Regular y Duotono)

y luego agregaré algunos otros (barras y usuario) para el sólido, para ver cómo se puede hacer esto de ambas formas al mismo tiempo. vuetify.js Así que volvamos a nuestro

// ... there should be more here, but see next part below ...

archivo, reemplazamos

// src/plugins/vuetify.js
// ...
import  
    faBars,
    faUser
 from '@fortawesome/pro-solid-svg-icons'
import 
    faPlus as farPlus,
    faUserCircle as farUserCircle
 from '@fortawesome/pro-regular-svg-icons'
import 
    faPlus as falPlus,
    faUserCircle as falUserCircle
 from '@fortawesome/pro-light-svg-icons'
import 
    faPlus as fadPlus,
    faUserCircle as fadUserCircle
 from '@fortawesome/pro-duotone-svg-icons'
// ...

con lo siguiente (nota camelcase): import far from '@fortawesome/pro-regular-svg-icons'Nota rápida: si aún desea agregar la biblioteca completa de estos, puede hacerlo importando así: (para regular)

etcétera. library Como puede ver, ahora hemos agregado fa-plus y fa-user-circle a nuestro proyecto. A partir de aquí, debemos agregarlos al vuetify.js importamos en el config.(no se preocupe, el archivo completo se puede ver a continuación en el fragmento de código).

// src/plugins/vuetify.js
// ...
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
    faBars, faUser,
    farPlus, falPlus, fadPlus, 
    farUserCircle, falUserCircle, fadUserCircle
)
/// ...

: Ahora que los hemos agregado a la biblioteca, debemos entregarlos para vuetificarlos. Vuetify tiene algunos especial iconos que utilizan para cosas como el(menú de hamburguesas)

const CUSTOM_ICONS = 
    add:  // custom icon I want to use
        component: FontAwesomeIcon,
        props: 
            icon: ['fad', 'plus']
        
    ,
    menu:  // used for the nav-icon by vuetify
        component: FontAwesomeIcon,
        props: 
            icon: ['fas', 'user']

. Podemos personalizarlos y agregar los nuestros a la mezcla (si lo deseamos). Hago esto definiendo una constante y agrego todos los íconos que necesito allí, así:

export default new Vuetify(
  icons: 
    iconfont: 'faSvg',
    values: CUSTOM_ICONS,
  ,
);

y luego agregamos esta constante a la configuración así: values También puede agregarlos directamente al

variable, pero me resulta más legible hacerlo a través de una constante.

Ahora podemos usarlos en plantillas, anexos o antepuestos:

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import  library  from '@fortawesome/fontawesome-svg-core' // Core SVG
import  FontAwesomeIcon  from '@fortawesome/vue-fontawesome' // Integration
import  
    faBars,
    faUser
 from '@fortawesome/pro-solid-svg-icons'
import 
    faPlus as farPlus,
    faUserCircle as farUserCircle
 from '@fortawesome/pro-regular-svg-icons'
import 
    faPlus as falPlus,
    faUserCircle as falUserCircle
 from '@fortawesome/pro-light-svg-icons'
import 
    faPlus as fadPlus,
    faUserCircle as fadUserCircle
 from '@fortawesome/pro-duotone-svg-icons'

Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
    faBars, faUser,
    farPlus, falPlus, fadPlus, 
    farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = 
    add:  // custom icon I want to use
        component: FontAwesomeIcon,
        props: 
            icon: ['fad', 'plus']
        
    ,
    menu:  // used for the nav-icon by vuetify
        component: FontAwesomeIcon,
        props: 
            icon: ['fas', 'user']
        
    


Vue.use(Vuetify);

export default new Vuetify(
  icons: 
    iconfont: 'faSvg',
    values: CUSTOM_ICONS,
  ,
);

Finalmente, aquí está el ejemplo completo:

Sugerencia de archivos separados para una mejor lectura

Podemos separar la lógica de fontAwesome en otro archivo:

  • Entonces tenemos 2 archivos: fontAwesome.js los
  • donde haces toda la lógica que pertenece a fontAwesome vuetify.js los fontAwesome.js
// src/plugins/fontAwesome.js
import  library  from '@fortawesome/fontawesome-svg-core' // Core SVG
import  FontAwesomeIcon  from '@fortawesome/vue-fontawesome' // Integration
import  
    faBars,
    faUser
 from '@fortawesome/pro-solid-svg-icons'
import 
    faPlus as farPlus,
    faUserCircle as farUserCircle
 from '@fortawesome/pro-regular-svg-icons'
import 
    faPlus as falPlus,
    faUserCircle as falUserCircle
 from '@fortawesome/pro-light-svg-icons'
import 
    faPlus as fadPlus,
    faUserCircle as fadUserCircle
 from '@fortawesome/pro-duotone-svg-icons'

library.add(
    faBars, faUser,
    farPlus, falPlus, fadPlus, 
    farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = 
    add:  // custom icon I want to use
        component: FontAwesomeIcon,
        props: 
            icon: ['fad', 'plus']
        
    ,
    menu:  // used for the nav-icon by vuetify
        component: FontAwesomeIcon,
        props: 
            icon: ['fas', 'user']
        
    


export  CUSTOM_ICONS 

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import  CUSTOM_ICONS  from "./fontAwesome"

Vue.use(Vuetify);

export default new Vuetify(
  icons: 
    iconfont: 'faSvg',
    values: CUSTOM_ICONS
  ,
);

importará los iconos de

  • Otras lecturas:
  • ¿Por qué utilizar Font Awesome con la biblioteca como concepto?
  • Vuetify: cómo instalar Font Awesome 5

Usando Font Awesome con VueJS

Se publica una solución simple en las opciones del marco en Vuetify: https://vuetifyjs.com/en/framework/icons 

npm install @fortawesome/fontawesome-free -D

Instale la biblioteca de iconos usando NPM o yarn:

Config: para un proyecto vue simple

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, 
 iconfont: 'fa'
)

Agregue esto a su main.js

Config: para un proyecto nuxt + vuetify

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, 
  iconfont: 'fa'
)

Cree un archivo js (por ejemplo, icons.js) en complementos

 src: '~/plugins/icons.js', ssr:false

Agregue esto a sus complementos en nuxt.config.js

Uso

Ahora puede acceder a íconos impresionantes de fuentes usando v-icon o agregar / anteponer en componentes como:

Si estás contento con lo expuesto, tienes la opción de dejar una reseña acerca de qué le añadirías a esta sección.

¡Haz clic para puntuar esta entrada!
(Votos: 5 Promedio: 4.4)

Tags : / / /

Utiliza Nuestro Buscador

Preguntas Relacionadas:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *