Cómo organizar y sincronizar archivos SVG con Iconset

SVG es una forma increíble de incorporar imágenes vectoriales en un flujo de trabajo de diseño y desarrollo. Pero recopilar y organizar archivos SVG en su computadora puede ser un desafío.

¿Cómo puede Iconset ayudar a aliviar el dolor y hacernos más productivos?

  • ¿Qué es SVG?
  • ¿Qué es Iconset?
  • ¿Qué vamos a aprender?
  • Parte 1: Empezando con Iconset
  • Parte 2: Agregar iconos al conjunto de iconos
  • Parte 3: Uso de Iconset con software de diseño como Figma
  • Parte 4: Uso de Iconset en desarrollo como con React
  • Parte 5: Sincronizar el conjunto de iconos en varias computadoras con Dropbox

¿Qué es SVG?

SVG es un formato de archivo de imagen de casi 20 años. Y aunque ha existido por un tiempo, solo recientemente ha estado ganando impulso en la comunidad de desarrollo.

SVG es genial por varias razones. En primer lugar, es un formato vectorial, lo que significa que se escala tan grande o pequeño como desee.

Pero también es flexible, ya que puede usar SVG directamente en su proyecto de desarrollo con un tamaño de archivo típicamente pequeño y una escala infinita. ¡Incluso puedes animarlo!

Pero intentar recopilar y organizar una gran cantidad de archivos puede ser un desafío. ¿Cómo les llamas? ¿Tiene una computadora que pueda previsualizarlos fácilmente? ¿Y la búsqueda?

¿Qué es Iconset?

Iconset es una herramienta multiplataforma gratuita que le permite recopilar y administrar todos sus archivos SVG en un solo lugar.

¿Le encanta moverse rápidamente entre Font Awesome y heroicons pero no quiere seguir cambiando de biblioteca? Puede utilizar Iconset para realizar una búsqueda rápida y arrastrarlo directamente a su proyecto.

Si planeas usarlo para un proyecto de React, ¡incluso puedes copiar el archivo como JSX y volcarlo directamente en tu proyecto!

¿Qué vamos a aprender?

Vamos a recorrer algunos escenarios diferentes que nos mostrarán cómo Iconset es útil.

También veremos cómo puede administrar fácilmente Iconset entre diferentes computadoras o entornos para que pueda tener la misma gran biblioteca en cualquier lugar donde trabaje.

Parte 1: Empezando con Iconset

Para comenzar, primero deberá instalar Iconset localmente. Debería ser un proceso de instalación similar al de cualquier otra aplicación.

Una vez que esté listo y disponible localmente, debería poder abrirlo y ver una IU sin íconos, lo cual se espera, ya que no viene con ningún ícono de fábrica.

Parte 2: Agregar iconos al conjunto de iconos

Agregar íconos a Iconset es tan fácil como arrastrar, pero tiene algunas opciones durante el proceso.

Para empezar, descarguemos el conjunto de iconos gratuito heroicons.

Descárguelo en: //heroicons.com/.

En el sitio web de heroicons, debería ver un gran botón Descargar todo, que descargará un archivo zip que incluye todos los archivos.

Si navega a la carpeta optimizada, verá que hay dos versiones diferentes: sólida y de contorno.

Ahora, para obtenerlos en Iconset, seleccione cada carpeta individualmente y arrástrela directamente a Iconset.

Una vez allí, tienes algunas opciones.

  • Conjunto: dado que este es nuestro primer conjunto, automáticamente creará uno nuevo. Si tenía conjuntos existentes, podría importarlos a esos conjuntos.
  • Nombre del conjunto: aquí podemos nombrar el conjunto con algo que recordaremos. Para ello, recomiendo nombrarlo “heroicons - Outline”.
  • Opciones de importación: estas son configuraciones opcionales, pero normalmente selecciono la opción de optimizar y limpiar para asegurarme de que los íconos estén listos de inmediato para trabajar.

Y una vez que haga clic en Importar, hará su trabajo, ¡y ahora tendrá su primer conjunto de iconos en Iconset!

Puede seguir adelante y hacer lo mismo con el directorio sólido para que ahora tengamos nuestros dos conjuntos listos para funcionar.

En este punto, puede utilizar Iconset para buscar a través de sus iconos y ver todos sus archivos actualmente disponibles en su colección.

Parte 3: Uso de Iconset con software de diseño como Figma

Lo mejor de Iconset es lo fácil que es usarlo con software de diseño como Figma.

Si quisiera agregar un ícono de sobre a mi sitio web para que la gente pudiera contactarme, podría buscar el ícono de correo y simplemente arrastrarlo a mi lienzo:

Luego puedo tratarlo como cualquier otro elemento de diseño vectorial y usarlo inmediatamente en mi proyecto.

Parte 4: Uso de Iconset en desarrollo como con React

Otra cosa interesante es lo fácil que es usarlo en un proyecto como React.

Fuera de la caja, obtienes algunas formas diferentes de copiar el archivo y usarlo en el desarrollo, como copiarlo como JSX.

Si siento que mi Next.js Sass Starter podría usar algunos íconos en la página, puedo hacer clic con el botón derecho en cualquier ícono que desee y, en Copiar como, seleccione JSX ¡Puedo pegarlo directamente en mi proyecto!

Y aunque necesitará un poco de estilo una vez que lo coloque como cualquier otra imagen o ícono, está listo de inmediato.

Parte 5: Sincronizar el conjunto de iconos en varias computadoras con Dropbox

Con Iconset, tiene la capacidad de cambiar entre diferentes bibliotecas. Pero, lo que es más importante, también puede establecer la ubicación de su biblioteca.

Cuando Iconset crea su biblioteca, almacena todo como archivos y una base de datos en su computadora.

Y dentro de la interfaz de usuario de Iconset, podemos mover y cambiar la ubicación que usamos.

Si es la primera vez que configura Iconset, puede comenzar haciendo clic en Mover y luego seleccionando la ubicación con la que desea sincronizarlo.

Y una vez que haga clic en Mover, lo moverá a ese directorio, como una carpeta en Dropbox, y se sincronizará con la nube como cualquier otra carpeta y archivo.

Alternativamente, si ya tiene una biblioteca compartida de Iconset o si está configurando esto en una computadora nueva, puede usar la opción Cambiar y seleccionar esa opción directamente desde Dropbox.

Y una vez que presione Cambiar, ahora cargará su biblioteca compartida y estará listo para ser productivo.

¿Qué más puedes hacer?

Publicar y compartir conjuntos de iconos

Otra característica interesante es que puede exportar conjuntos y compartirlos. Si ha pasado mucho tiempo en una colección y desea compartirla con otros, expórtela, publíquela y compártala con la comunidad.

Más organización

Iconset también admite funciones como Carpetas y Favoritos. Esto hace que sea aún más fácil agrupar y recopilar los iconos, sin embargo, tiene sentido para usted mantener su productividad.

También admite el etiquetado, lo que facilita aún más la búsqueda.

¡Sígueme para obtener más Javascript, UX y otras cosas interesantes!

  • ? Sigueme en Twitter
  • ? Suscríbete a mi Youtube
  • ✉️ Suscríbete a mi boletín
  • ? Patrociname