3dlink-icons
v0.3.0
Published
Icons library for 3d-link projects
Downloads
49
Readme
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
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ónfix/nombre-de-la-rama
si solo vas a realizar reemplazos de íconos, ofeat/nombre-de-la-rama
si vas a añadir nuevos íconos.git checkout -b feat/newIcons
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 llamadanewIcons
dentro desrc/migrations
.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 carpetamigrations
. Por ejemplo, si creaste una carpetanewIcons
en el paso 2, esta ruta sería simplementenewIcons
.
Ejemplo de uso:
npm run convert-icons newIcons general
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 enmigrations-logs
, contiene información sobre los íconos añadidos y reemplazados durante la migración.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!