¿Qué es Iconify y cómo integrarlo en las aplicaciones Vue?

Las mejores aplicaciones web son en realidad una colección de texto e imágenes. Además de la sensación estética que las imágenes brindan a una aplicación web, también brindan pistas visuales y mejoran el interés de los usuarios en la aplicación.

Iconify es un marco de iconos que proporciona una gran colección de iconos renderizados en SVG de varios paquetes de iconos, incluidos los iconos de Bootstrap y Material Design. Iconify es compatible con diferentes marcos de JavaScript front-end, lo que lo convierte en una solución versátil para agregar íconos a sus aplicaciones web.

Cómo integrar Iconify en su aplicación Vue

Puede aprovechar Iconify en su aplicación Vue con el @iconificar/vue paquete npm. Este paquete npm es una integración de Vue para el marco de iconos de Iconify.

@iconificar/vue proporciona una manera perfecta de usar íconos dentro de las aplicaciones Vue. Este paquete le permite agregar y personalizar rápidamente íconos en su proyecto. Instalar

@iconificar/vue en su aplicación Vue, ejecute el siguiente comando npm en la terminal del directorio raíz de su aplicación:

npm install --save-dev @iconify/vue

Este comando instala el @iconificar/vue paquete como un dependencia del desarrollo en su aplicación Vue.

Este paquete solo funcionará para las aplicaciones Vue 3 que necesita para seguir este artículo. El paquete no admite aplicaciones Vue 2. Sin embargo, para usar Iconify en Vue 2, ejecute el siguiente comando npm:

npm install @iconify/vue2

Como Vue 2 ya no se administrará a partir del 31 de diciembre de 2023, debe aprender a usar Vue 3 y sus funciones. Esto es para garantizar que se mantenga actualizado y relevante en la comunidad de Vue.

Cómo agregar íconos a sus componentes Vue

Puede agregar iconos importando el Icono componente del paquete en sus componentes Vue. Para agregar íconos, pegue el siguiente código en el bloque de script del componente Vue:

<scriptsetup>
import { Icon } from '@iconify/vue'
script>

Después de este paso, puede acceder a todos los íconos en la biblioteca de Iconify. Para agregar un icono, diríjase a la iconificar sitio web. Al navegar al sitio web, ingresará el nombre del ícono que necesita en su aplicación.

La siguiente imagen muestra los resultados de la búsqueda de un icono de verificación.

A continuación, puede elegir el estilo del icono de verificación que necesita haciendo clic en el icono. Puede personalizar aún más sus iconos proporcionando el Color, Tamaño, Voltear, y Girar campos.

Con estos campos, puede especificar el color, el tamaño, la posición y la orientación requeridos de su icono. Una vez que haya personalizado su ícono, ahora puede usar el componente de ícono en su aplicación Vue copiando el código del componente en la página web.

<template>
<Iconicon="ph: check-fill"color="red"width="500"height="500" />
template>

El bloque de código anterior establece el color del icono en rojo. También especifica que la altura y el ancho sean de 500 píxeles cada uno.

Al obtener una vista previa de la aplicación, obtendrá una imagen similar a la siguiente:

Aunque agregar íconos a su aplicación con el @iconificar/vue paquete es generalmente sencillo, en ocasiones puede dar lugar a problemas. Algunos problemas comunes incluyen problemas de procesamiento previo, mensajes de error en el Modelo de objeto de documento (DOM), y Vue no renderiza el componente correctamente.

Estos problemas surgen debido a la sincronización del proceso de montaje de componentes en relación con la carga de iconos. Puede resolver este problema con el desenchufar-iconos biblioteca.

Adición de iconos con la biblioteca de iconos de desconexión

El desenchufar-iconos biblioteca ofrece una forma alternativa y sin errores de importar y usar íconos directamente dentro de su plantilla.

Este enfoque de integración de íconos resuelve los problemas resaltados con @iconificar/vue, asegurándose de que Vue incluirá automáticamente cada ícono que emplee en su aplicación incluida.

Para empezar con el desenchufar-iconos biblioteca, abra su terminal e instale la biblioteca ejecutando el siguiente comando npm:

npm install unplugin-icons

Después de la instalación, debe configurar su herramienta de compilación. Vue 3 usos Vite como su herramienta de compilación. Dirigirse a vite.config.js y configure el archivo para que se vea exactamente como el bloque de código a continuación:

import { fileURLToPath, URL } from'node: url'
import { defineConfig } from'vite'
import vue from'@vitejs/plugin-vue'
import Icons from'unplugin-icons/vite';
// https://vitejs.dev/config/
exportdefault defineConfig({
 plugins: [vue(), Icons()],
 resolve: {
 alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
 }
 }
})

El bloque de código anterior muestra el archivo de configuración de Vite. El fragmento de código importa el Iconos complemento de icono de desconexión/invitación. A continuación, el bloque de código establece Iconos() como un complemento en el complementos formación.

Puede instalar todos los conjuntos de iconos para maximizar su elección de icono. Para instalar todos los conjuntos de iconos, ejecute el siguiente comando npm en la terminal del directorio de su aplicación:

npm i -D @iconify/json

El código instala todos los conjuntos de iconos disponibles para Iconify. El tamaño de instalación de este paquete es de unos 200 MB. También puede instalar solo un conjunto de iconos en particular en lugar de todos los conjuntos para reducir el tamaño del paquete:

npm i -D @iconify-json/ph

El fragmento de código anterior instala solo íconos del conjunto de íconos de Phosphor, que Iconify denota con ph.

Después de la instalación, puede importar el componente del icono a su aplicación Vue. Debe importar nombres de iconos con la convención ~iconos/{conjunto}/{iconName} para utilizar los iconos en sus componentes.

La descripción de la convención para importar iconos es la siguiente:

• ~iconos: Se refiere a la ruta del icono.
• { colocar }: Hace referencia al conjunto o colección de iconos.
• { nombre icónico }: Hace referencia al nombre del icono en el estuche de kebab.

He aquí un ejemplo que muestra la importación y el uso de la VerificarRellenar componente de icono:

<scriptsetup>
import CheckFill from "~icons/ph/check-fill"
script>
<template>
<CheckFillcolor="red"width="500"height="500" />
template>

Este fragmento de código demuestra cómo importar nombres de iconos con la convención ~iconos/ph/verificar-rellenar. El fragmento de código importa el VerificarRellenar componente de icono del conjunto de iconos de fósforo. Luego establece los atributos de color, ancho y alto del componente de icono en la plantilla de Vue.

La vista previa de la aplicación desde el bloque de código anterior dará como resultado la misma imagen de la aplicación que se vio antes.

Haga que sus aplicaciones Vue sean más accesibles

Iconify es una valiosa biblioteca para sus aplicaciones Vue, ya que le permite integrar fácilmente iconos en la interfaz de su aplicación. La amplia biblioteca de iconos de Iconify ofrece mejores opciones de personalización para su aplicación.

Como desarrollador de Vue, debe hacer que sus aplicaciones web sean accesibles para todo tipo de personas. Esto se debe a que diferentes personas tienen diferentes formas en que pueden usar sus aplicaciones, por ejemplo, personas ciegas y sordas. Aprenda herramientas para hacer que sus aplicaciones web sean fácilmente accesibles para estas personas.