3dlink-icons: Guía de uso y generación de iconos

3dlink-icons es una librería de React que proporciona una colección de íconos SVG que puedes usar en tus proyectos. Estos íconos están organizados en módulos para facilitar su importación y uso.

La librería viene con un script llamado convert-icons que convierte archivos SVG en componentes de React que se pueden usar directamente en tu código. Esta es una descripción de cómo usarlo.

Añadiendo nuevos iconos

1. Crear una rama en tu repositorio: Para asegurar la estabilidad del código, antes de realizar cualquier cambio en la librería, debes crear una nueva rama en tu repositorio local. Esta rama debe ser distinta a main. El nombre de la rama debe seguir la convención fix/nombre-de-la-rama si solo vas a realizar reemplazos de íconos, o feat/nombre-de-la-rama si vas a añadir nuevos íconos.

   git checkout -b feat/newIcons

2. Preparar los íconos: Primero, necesitas tener tus archivos SVG listos. Debes poner todos tus archivos SVG en una carpeta dentro de src/migrations. Por ejemplo, puedes crear una carpeta llamada newIcons dentro de src/migrations.

3. Usar el comando convert-icons: Después de preparar tus íconos, puedes ejecutar el comando convert-icons para convertirlos en componentes de React. El comando se usa de la siguiente manera:

   npm run convert-icons <nombre_del_grupo> <ruta_a_la_carpeta_desde_migrations>

   Donde:

   • <nombre_del_grupo>: Este es el nombre del grupo o módulo de íconos. Este nombre será utilizado para crear un archivo JSX que agrupa todos los íconos convertidos y también para organizar los íconos en módulos cuando se generen las exportaciones finales.

   • <ruta_a_la_carpeta_desde_migrations>: es la ruta a la carpeta que contiene tus archivos SVG desde la carpeta migrations. Por ejemplo, si creaste una carpeta newIcons en el paso 2, esta ruta sería simplemente newIcons.

   Ejemplo de uso:

   npm run convert-icons newIcons general

4. Revisar la documentación de la migración: El comando convert-icons generará una documentación para cada migración que realiza. Esta documentación, que se encuentra en migrations-logs, contiene información sobre los íconos añadidos y reemplazados durante la migración.

5. Realizar un merge request a main: Una vez que hayas añadido tus íconos y estés satisfecho con los cambios, debes hacer push de tu rama al repositorio remoto y luego realizar un merge request a main.

   git push origin feat/newIcons

   Asegúrate de revisar cuidadosamente el merge request y fusionarlo en main solo cuando estés seguro de que los cambios son correctos y estables.

Generando la build final

Una vez que hayas añadido tus íconos, puedes generar la build final con el comando npm run build. Esto compilará tus componentes de React en un formato que se puede importar fácilmente en otros proyectos de React.

Durante el proceso de build, también se genera una documentación que lista todos los íconos disponibles en la librería. Esta documentación se genera a partir de una plantilla ubicada en la raíz del proyecto (library-readme-template.md) y se coloca en la carpeta dist con el nombre README.md. La documentación lista todos los íconos disponibles, organizados por módulo.

Ahora estás listo para usar y contribuir a la librería de íconos 3dlink-icons. Asegúrate de seguir estas pautas al agregar nuevos íconos para mantener la librería organizada y fácil de usar. ¡Disfrútalo!