@iconskeola/icons

Librería de iconos en SVG para React Native (Expo incluido). Publicada en npm como paquete público (sin costo en el registro). Los assets se convierten en componentes con SVGR; el paquete publicado solo incluye la carpeta dist/.

Requisitos en la app consumidora

Asegurate de tener instaladas las peer dependencies:

• react ≥ 18
• react-native ≥ 0.72
• react-native-svg ≥ 15

Instalación

Paquete público en npm:

npm install @iconskeola/icons

No hace falta cuenta para instalar (solo si tu empresa usa un registry proxy o políticas extra).

Publicar una nueva versión (mantenedores)

El paquete se publica bajo el scope de la cuenta npm iconskeola (@iconskeola/icons).

1. Iniciar sesión (si aún no lo hiciste):

   npm login
   npm whoami

2. Subir versión cuando haya cambios listos para release:

   npm version patch

   (Usá minor o major según semver. Para no crear commit/tag de git: npm version patch --no-git-tag-version.)

3. Publicar (el script prepublishOnly ejecuta build antes):

   npm publish

   En package.json, publishConfig.access es public: el paquete es gratis en el plan estándar de npm (visible para todos). Si alguna vez publicás sin esa clave, en la primera subida de un scope podés usar npm publish --access public.

Uso

Componente por nombre

Hay dos categorías de iconos:

| Categoría | color | Ejemplos | | --------- | ------- | -------- | | Tintables | Opcional; un solo color vía currentColor | keola-pay-wallet, keola-pay-edit | | Colores fijos | No aplica (TypeScript lo impide) | keola-pay-recharge, keola-pay-withdrawal |

import { KeolaIcon } from "@iconskeola/icons";

// Tintable: un solo color
<KeolaIcon name="keola-pay-wallet" color="#606060" />
<KeolaIcon name="keola-pay-edit" size={32} color="#000000" />

// Colores fijos: conservan los hex del SVG (multicolor / marca)
<KeolaIcon name="keola-pay-recharge" size={32} />
<KeolaIcon name="keola-pay-withdrawal" size={32} />

// Estilos de layout (margin, padding, opacity, etc.)
<KeolaIcon name="keola-pay-wallet" color="#606060" style={{ marginLeft: 8, marginRight: 8 }} />
<KeolaIcon name="keola-pay-bell" size={32} style={{ paddingLeft: 8, paddingRight: 4 }} />
<KeolaIcon name="keola-pay-check" color="#000" style={{ marginHorizontal: 12, paddingVertical: 2, opacity: 0.8 }} />

• name: clave del icono (coincide con el nombre del archivo .svg sin extensión, en minúsculas).
• size: opcional; por defecto 24.
• color: solo en iconos tintables; tinta todo el trazo/relleno con un solo color.
• style: opcional; estilos de React Native aplicados al <Svg /> (p. ej. margin*, padding*, opacity, alignSelf, transform). El tamaño del dibujo sigue controlado por size, no por width/height en style.

Para comprobar en runtime si un icono es de colores fijos:

import { isFixedColorIcon, fixedColorIcons } from "@iconskeola/icons";

Registro o imports directos

import { iconRegistry, type IconName } from "@iconskeola/icons";
import { KeolaPayWalletIcon } from "@iconskeola/icons";

const Icon = iconRegistry["keola-pay-wallet"];

Añadir o cambiar iconos

1. Colocá o editá archivos .svg en assets/svg, con nombres en kebab-case (por ejemplo shopping-cart.svg → nombre "shopping-cart" y componente ShoppingCartIcon).

2. Regenerá el código:

   npm run generate

   Con el watcher (regenera al guardar SVG):

   npm run generate:watch

3. Commiteá los cambios en assets/svg y en los archivos generados bajo src/ (src/generated/, src/types.ts, src/iconRegistry.ts).

Iconos con colores fijos (multicolor / marca)

Si el SVG ya trae varios colores y no debe tintarse con color:

1. Exportá el SVG con los colores definitivos en assets/svg.
2. Agregá el nombre del icono (sin .svg) a assets/preserve-color-icons.json.
3. Ejecutá npm run generate.

El generador no convertirá esos fills/strokes a currentColor. En TypeScript, KeolaIcon no aceptará color para esos nombres (FixedColorIconName).

Los archivos marcados como generados por scripts/generate-icons.mjs no deben editarse a mano.

Scripts (mantenimiento del paquete)

| Comando | Descripción | | -------- | ----------- | | npm install | Instala dependencias de desarrollo. | | npm run generate | SVG → src/generated, tipos y registro. | | npm run generate:watch | Igual que generate, en bucle al cambiar SVG. | | npm version patch --no-git-tag-version | Instala dependencias de desarrollo. |☻ | npm run build | Ejecuta generate y empaqueta con tsup en dist/. | | npm publish | Publica en npm como público (publishConfig.access: public; prepublishOnly → build). |

Estructura relevante

assets/svg/                    # Fuente: archivos SVG
assets/preserve-color-icons.json  # Iconos que conservan colores del SVG
scripts/
  generate-icons.mjs           # Generador (SVGR + SVGO)
src/
  KeolaIcon.tsx                # API por nombre
  iconRegistry.ts              # Generado: mapa nombre → componente
  types.ts                     # Generado: IconName, FixedColorIconName, TintableIconName
  generated/                   # Generado: un .tsx por icono

Licencia

ISC