lib-iconos-zeroq

Una librería de iconos SVG reutilizable para proyectos ZeroQ, construida con React y TypeScript.

🚀 Instalación

npm install lib-iconos-zeroq
# o
yarn add lib-iconos-zeroq
# o
pnpm add lib-iconos-zeroq

📖 Uso Básico

import React from 'react';
import { HomeIcon, SearchIcon, UserIcon, SettingsIcon } from 'lib-iconos-zeroq';

// O usando los aliases
import { Home, Search, User, Settings } from 'lib-iconos-zeroq';

function App() {
  return (
    <div>
      {/* Uso básico */}
      <HomeIcon />
      <SearchIcon />
      <UserIcon />
      <SettingsIcon />

      {/* Con propiedades personalizadas */}
      <HomeIcon size={32} color="blue" />
      <SearchIcon size="2rem" color="#ff6b6b" />
      <UserIcon className="my-custom-class" />
      
      {/* Usando aliases */}
      <Home size={24} />
      <Search color="red" />
    </div>
  );
}

🎨 Propiedades

Todos los iconos aceptan las siguientes propiedades:

| Propiedad | Tipo | Default | Descripción | |-----------|------|---------|-------------| | size | number \| string | 24 | Tamaño del icono en píxeles o cualquier unidad CSS | | color | string | "currentColor" | Color del icono (cualquier valor CSS válido) | | className | string | "" | Clase CSS adicional |

Además, todos los iconos aceptan todas las propiedades estándar de SVG (onClick, onMouseOver, etc.).

📝 Iconos Disponibles

| Icono | Componente | Alias | |-------|------------|-------| | 🏠 | HomeIcon | Home | | 🔍 | SearchIcon | Search | | 👤 | UserIcon | User | | ⚙️ | SettingsIcon | Settings | | ❤️ | HeartIcon | Heart |

🛠️ Desarrollo

Agregar un Nuevo Icono

Opción 1: Script Automatizado (Recomendado)

1. Agrega tu archivo SVG a assets/svg/mi-icono.svg
2. Ejecuta el generador:

   npm run generate-icon mi-icono

¡Listo! El script creará automáticamente el componente y actualizará todos los archivos de exportación.

Opción 2: Manual

1. Crear el componente del icono:

// src/components/icons/MiNuevoIcon.tsx
import React from 'react';
import { IconBase } from '../IconBase';
import { IconProps } from '../../types';

export const MiNuevoIcon: React.FC<IconProps> = (props) => {
  return (
    <IconBase {...props} viewBox="0 0 24 24">
      {/* Aquí va el contenido SVG */}
      <path d="..." />
    </IconBase>
  );
};

export default MiNuevoIcon;

2. Exportar en el índice:

// src/components/icons/index.ts
export { MiNuevoIcon } from './MiNuevoIcon';
export { default as MiNuevo } from './MiNuevoIcon';

3. Actualizar el índice principal:

// src/index.ts
export { MiNuevoIcon, MiNuevo } from './components';

Convertir SVG a Componente

Si tienes un archivo SVG, puedes convertirlo siguiendo estos pasos:

1. Copia el contenido interno del SVG (solo los elementos <path>, <circle>, etc.)
2. Ajusta los atributos si es necesario
3. Envuelve el contenido en el componente IconBase

Scripts Disponibles

# Construir la librería
npm run build

# Modo desarrollo con watch
npm run dev

# Verificación de tipos
npm run type-check

# Preparar para publicación
npm run prepublishOnly

📦 Publicación

Para publicar la librería en npm:

Opción 1: Script automatizado

# Publish con bump de versión patch
./scripts/publish.sh

# O especifica el tipo de versión
./scripts/publish.sh minor
./scripts/publish.sh major

Opción 2: Manual

1. Construye la librería:

   npm run build

2. Actualiza la versión:

   npm version patch # o minor, o major

3. Publica:

   npm publish

🏗️ Arquitectura

La librería está construida con:

• React - Para los componentes
• TypeScript - Para tipado estático
• Rollup - Para bundling
• SVG - Para los iconos vectoriales

Estructura de Archivos

lib-iconos-zeroq/
├── src/
│   ├── components/
│   │   ├── icons/
│   │   │   ├── HomeIcon.tsx
│   │   │   ├── SearchIcon.tsx
│   │   │   └── index.ts
│   │   ├── IconBase.tsx
│   │   └── index.ts
│   ├── types/
│   │   └── index.ts
│   └── index.ts
├── assets/
│   └── svg/
├── dist/ (generado)
├── package.json
├── tsconfig.json
├── rollup.config.js
└── README.md

📄 Licencia

MIT © ZeroQ Team

🤝 Contribución

Las contribuciones son bienvenidas. Por favor:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/nueva-funcionalidad)
3. Commit tus cambios (git commit -am 'Agregar nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. Abre un Pull Request

📞 Soporte

Si tienes preguntas o encuentras problemas, por favor abre un issue en el repositorio.