Configurar Font Awesome en Vue.js

Los íconos son un recurso muy importante dentro del diseño web. Si un sitio no cuenta con ellos, no resaltaría lo que queremos decirle a nuestros usuarios. Aunque hay gran variedad de ellos, hablaremos de uno de los más populares.

Comenzamos

Primero instalamos los 3 módulos que usaremos: font awesome svg, íconos gratuitos y el componente Vue.

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesome

Segundo paso, en tu archivo main.js tienes que importar el módulo core.

import { library } from '@fortawesome/fontawesome-svg-core'

Bien. Ahora los íconos los tenemos que agregar uno por uno. Importamos fa-coffee.

import { faCoffee } from '@fortawesome/free-solid-svg-icons'

Para poder usarlo, tienes que agregar cada ícono que uses al núcleo.

library.add(faCoffee)

Registramos el componente.

Vue.component('font-awesome-icon', FontAwesomeIcon)

Como resultado final debe quedar así

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee)

Vue.component('font-awesome-icon', FontAwesomeIcon)

Por último, usa el ícono en uno de tus componentes.

<template>
  <div id="app">
    <font-awesome-icon icon="coffee" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

¡Fácil!

Para darte la idea, puedes ver los demás íconos en el directorio donde tenemos instalados nuestros módulos.

Eso es todo.

Puedes suscribirte al blog para no perderte de nuevas publicaciones y no olvides compartir para llegar a más audiencia.

Hasta la próxima. Bendiciones.