Aprende cómo usar iconos en un proyecto de vue3 💚

Como profesionales que somos, tenemos que considerar siempre buscar maneras efectivas de escribir y usar nuestros recursos dentro de los proyectos, si bien usar iconos tiene millones de formas de utilizarse.
En este artículo te mostraré cómo usar iconos de manera efectiva para tu proyecto.

Para que tengas una idea clara de cómo incorporar iconos en tus proyectos, comenzaremos con uno desde cero.

El uso de iconos puede parecer un detalle pequeño, pero verás cómo pueden transformar totalmente la presentación y la comprensión de tu trabajo. Por lo pronto ubiquémonos donde crearás tu proyecto y haz conmigo lo siguiente

pnpm create vue@latest

Para este preciso ejemplo no añadiré typescript, pero siéntete libre de hacerlo si gustas.

Ahora te muestro las configuraciones que escogí para este ejemplo

Con todo esto listo, vamos a nuestro navegador al puerto que nos indica el último comando, en mi caso localhost:5173, y tendremos lo siguiente

Bien, no modificaré mucho esto por el fin general del blog, así que dejemos el navegador por un rato y vámonos a la terminal nuevamente porque deberemos hacer unas cuantas descargas.
En el terminal pondremos lo siguiente:

pnpm add @fortawesome/fontawesome-free sass sass-loader

Ahora sí, vamos a implementar los iconos como unos profesionales que somos, el siguiente paso es algo difícil de entender al principio, pero solo confía en mí, todo estará bien. Nos moveremos al archivo de configuración, por lo general se llama vite.config.js o vite.config.ts, el contenido de este archivo puede variar un poco pero no te asustes, es normal, solo sígueme.

Esto es lo que verás, se genera automáticamente a crear el proyecto

Lo modificaremos para que pueda dentro de todo el proyecto leer cuando le pasemos un icono, es fácil, ahora te dejo como sería

export default defineConfig({
  plugins: [
    vue()
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
          @import '@fortawesome/fontawesome-free/scss/solid.scss';
          @import '@fortawesome/fontawesome-free/scss/regular.scss';
          @import '@fortawesome/fontawesome-free/scss/brands.scss';
        `,
      },
    },
  },
  resolve: {
    alias: {
      '@': fileUrlToPath(new URL('./src', import.meta.url)),
    }
  }
})

vite.config.ts o vite.config.js

Yo sé, te preguntarás qué es lo que acabamos de agregar, pues te lo explico. Estos archivos están dentro de la carpeta node_modules.

En esa carpeta está lo que importamos en el archivo de configuración (vite.config.js o vite.config.ts), de ahí provienen los iconos que usaremos después. Tenemos que importarlo porque estas son las clases que usaremos para que el proyecto los detecte al usar la etiqueta <i>, en un rato te explico qué es esto de la etiqueta <i>.
Con esto implementado, ahora te mostraré lo fácil que es usar iconos en nuestro proyecto.

Puedes ir a cualquiera de tus archivos .vue y de la siguiente manera usar iconos, yo usaré el archivo default que se genera al crear un proyecto de vue, app.vue.

Se que la imagen se ve algo distinta, esto es porque borre todo el contenido de app.vue para que se vea más limpio, nada raro.

En tu archivo vas a escribir una etiqueta <i> con una clase, como en la siguiente imagen. Y con eso terminaríamos la configuración del proyecto con los iconos.

<script setup>
import hola from './components/hola.vue';
</script>

<template>
  <h1>
    Aqui te mostrare como usar los iconos
  </h1>
  <p>
    basicamente aqui puedes escribir importar tus componentes y hacer tu template y si necesitas usar un icono solo escribes esto 
  </p>
  <p>
    <i class="fa-brands fa-spotify"></i>
  </p>
</template>

App.vue

Con esta forma de establecer los iconos en el navegador verás algo así

¿Ves?, ¿Lo fácil que fue usar iconos en un proyecto de vue3? ¿Pero ahora te preguntarás de dónde saqué esa etiqueta <i>? ¿con aquella clase que incluye? Pues muy fácil, solo vas a este sitio web https://fontawesome.com/ y aquí debes entrar a esta sección

Una vez dentro verás un buscador, en este podrás buscar el icono que tu desees, en mi caso, spotify.

Presionamos el icono de tu agrado y copiarás lo siguiente

Esto es lo que iría en tu template de vue.

¡Y eso es todo! Así de sencillo es utilizar iconos en cualquier proyecto que estés desarrollando. Hemos visto que es un proceso fácil de implementar y accesible para cualquiera. Con estos pasos, puedes darle a tus proyectos un toque visualmente atractivo y funcional, aprovechando al máximo el poder de los iconos.

NOTA: Los iconos que dicen pro en el sitio web no se podrán usar porque estos son de pago.