🎨 Dropi Icons Library

Una librería de iconos SVG moderna y multiplataforma diseñada específicamente para el ecosistema de DROPI. Incluye soporte nativo para Angular, React y React Native con un sistema completo de Design Tokens integrado.

✨ Características Principales

• 🎯 225+ iconos cuidadosamente diseñados y optimizados
• 🌈 Design System completo con 67 tokens de color oficiales de Dropi
• 📱 Multiplataforma: Angular, React y React Native
• ⚡ Alto rendimiento usando sprites SVG optimizados
• 📝 TypeScript completamente tipado con IntelliSense
• 🎨 CSS Variables listas para usar en tu proyecto
• ♿ Accesibilidad completa con soporte ARIA
• 🔧 Tree-shaking automático para bundles optimizados

📦 Instalación

Con npm

npm install dropi-lib-icons

Con yarn

yarn add dropi-lib-icons

Con pnpm

pnpm add dropi-lib-icons

🚀 Guía de Inicio Rápido

React

import { ReactIcon } from "dropi-lib-icons";

function App() {
  return (
    <div>
      <ReactIcon name="home" size={24} color="primary" />
      <ReactIcon name="user" color="secondary-600" />
    </div>
  );
}

Angular

// app.component.ts
import { Component } from "@angular/core";
import { IconComponent } from "dropi-lib-icons";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [IconComponent],
  template: `
    <dropi-icon name="home" size="24px" color="primary"></dropi-icon>
    <dropi-icon name="user" color="secondary-600"></dropi-icon>
  `,
})
export class AppComponent {}

React Native

import { ReactNativeIcon } from "dropi-lib-icons";

export default function App() {
  return (
    <View>
      <ReactNativeIcon name="home" size={24} color="primary" />
      <ReactNativeIcon name="user" color="secondary-600" />
    </View>
  );
}

🎨 Sistema de Design Tokens

Esta librería incluye todos los tokens de color oficiales del Design System de Dropi:

🔥 Colores de Marca

| Token | Color | Uso | | ----------- | ------- | ---------------------------------- | | primary | #f49a3d | Color principal de Dropi (naranja) | | secondary | #008dbf | Color secundario de Dropi (azul) |

Escalas disponibles: primary-50, primary-100, ..., primary-900

✅ Estados de Feedback

| Token | Color | Uso | | --------- | ------- | --------------------------- | | success | #0abb87 | Confirmaciones, éxito | | error | #f46a6b | Errores, alertas críticas | | info | #50a5f1 | Información, notificaciones | | warning | #f1b44c | Advertencias, precauciones |

Escalas disponibles: success-50 a success-900, error-50 a error-900, etc.

⚫ Neutrales

| Token | Color | Uso | | ---------------------- | --------------- | ------------------ | | white | #ffffff | Fondos claros | | black | #000000 | Texto oscuro | | gray-50 a gray-900 | Escala completa | Grises del sistema |

📱 Guías de Integración Detalladas

React - Guía Completa

1. Instalación y Setup

# Instalar la librería
npm install dropi-lib-icons

# Para TypeScript (opcional)
npm install @types/react

2. Uso básico

import { ReactIcon } from "dropi-lib-icons";
import type { IconName, DropiColorToken } from "dropi-lib-icons";

// Opcional: Importar CSS variables
import "dropi-lib-icons/dist/tokens.css";

function MyComponent() {
  return (
    <div>
      {/* Uso básico */}
      <ReactIcon name="home" />

      {/* Con tokens de Dropi */}
      <ReactIcon name="search" color="primary" size={32} />

      {/* Con props avanzadas */}
      <ReactIcon
        name="user"
        size={24}
        color="secondary-600"
        className="user-icon"
        title="Perfil de usuario"
        testId="user-profile-icon"
      />

      {/* Con colores CSS tradicionales */}
      <ReactIcon name="heart" color="#ff6b6b" />
    </div>
  );
}

3. Con CSS-in-JS (styled-components, emotion)

import styled from "styled-components";
import { ReactIcon } from "dropi-lib-icons";

const StyledIcon = styled(ReactIcon)`
  margin-right: 8px;
  transition: color 0.2s ease;

  &:hover {
    color: var(--dropi-primary-600);
  }
`;

function Button() {
  return (
    <button>
      <StyledIcon name="plus" size={16} />
      Agregar item
    </button>
  );
}

Angular - Guía Completa

1. Instalación y Setup

# Instalar la librería
npm install dropi-lib-icons

# Dependencia peer
npm install @angular/core@>=16.0.0

2. Usando Componente Standalone (Recomendado)

Importación Principal (Recomendada):

// app.component.ts
import { Component } from "@angular/core";
import { IconComponent } from "dropi-lib-icons";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [IconComponent],
  template: `
    <!-- Uso básico -->
    <dropi-icon name="home"></dropi-icon>

    <!-- Con tokens de Dropi -->
    <dropi-icon name="search" color="primary" size="32px"> </dropi-icon>

    <!-- Con props avanzadas -->
    <dropi-icon
      name="user"
      size="24px"
      color="secondary-600"
      title="Perfil de usuario"
      testId="user-profile-icon"
    >
    </dropi-icon>

    <!-- Con colores CSS -->
    <dropi-icon name="heart" color="#ff6b6b"></dropi-icon>
  `,
  styles: [
    `
      dropi-icon {
        margin-right: 8px;
        transition: fill 0.2s ease;
      }

      dropi-icon:hover {
        fill: var(--dropi-primary-600) !important;
      }
    `,
  ],
})
export class AppComponent {}

⚠️ Solución de Problemas de Importación:

Si encuentras errores como 'imports' must be an array of components..., prueba estas alternativas:

// Opción 1: Importación específica
import { IconComponent } from "dropi-lib-icons/angular";

// Opción 2: Si persiste el error, usa el módulo temporalmente
import { IconModule } from "dropi-lib-icons";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [IconModule], // Usa IconModule en lugar de IconComponent
  template: `<dropi-icon name="home"></dropi-icon>`
})
export class AppComponent {}

// Opción 3: Limpia caché si el problema persiste
// rm -rf node_modules && npm install

🔧 Problemas de Resolución de Módulos TypeScript:

Si tienes errores relacionados con moduleResolution, actualiza a la versión 1.2.3+ que incluye compatibilidad con todas las configuraciones de TypeScript:

# Actualiza a la versión compatible
npm install dropi-lib-icons@latest
# o
yarn add dropi-lib-icons@latest

La librería ahora es compatible con:

• ✅ "moduleResolution": "node" (Angular clásico)
• ✅ "moduleResolution": "node16" (Angular moderno)
• ✅ "moduleResolution": "bundler" (Vite, etc.)

3. Usando con Módulos (Legacy)

// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { IconModule } from "dropi-lib-icons";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IconModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

4. CSS Variables en Angular

// styles.scss
@import "~dropi-lib-icons/dist/tokens.css";

.my-component {
  .icon-primary {
    fill: var(--dropi-primary);
  }

  .icon-secondary {
    fill: var(--dropi-secondary-600);
  }
}

React Native - Guía Completa

1. Instalación y Setup

# Instalar la librería
npm install dropi-lib-icons

# Dependencias requeridas
npm install react-native-svg@>=12.0.0

# Para iOS (si usas CocoaPods)
cd ios && pod install

2. Configuración adicional

Para React Native 0.60+, react-native-svg se enlaza automáticamente.

Para versiones anteriores:

react-native link react-native-svg

3. Uso básico

import React from "react";
import { View, StyleSheet } from "react-native";
import { ReactNativeIcon } from "dropi-lib-icons";

export default function App() {
  return (
    <View style={styles.container}>
      {/* Uso básico */}
      <ReactNativeIcon name="home" />

      {/* Con tokens de Dropi */}
      <ReactNativeIcon name="search" color="primary" size={32} />

      {/* Con props avanzadas */}
      <ReactNativeIcon
        name="user"
        size={24}
        color="secondary-600"
        testID="user-profile-icon"
        style={styles.userIcon}
      />

      {/* Con colores hex */}
      <ReactNativeIcon name="heart" color="#ff6b6b" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  userIcon: {
    marginHorizontal: 8,
  },
});

4. Integración con Navigation

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { ReactNativeIcon } from "dropi-lib-icons";

const Tab = createBottomTabNavigator();

function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName: IconName;

          if (route.name === "Home") {
            iconName = "home";
          } else if (route.name === "Profile") {
            iconName = "user";
          }

          return (
            <ReactNativeIcon
              name={iconName}
              size={size}
              color={focused ? "primary" : "gray-500"}
            />
          );
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

📋 API Reference Completa

Propiedades Comunes (Todas las Plataformas)

| Prop | Tipo | Default | Descripción | | ------- | --------------------------- | ---------------- | ---------------------------------- | | name | IconName | requerido | Nombre del icono a mostrar | | size | number \| string | 24 | Tamaño del icono en píxeles | | color | DropiColorToken \| string | 'currentColor' | Color usando tokens de Dropi o CSS |

Props Específicas de React

| Prop | Tipo | Default | Descripción | | ------------ | --------------------- | --------------- | ------------------------------------------ | | className | string | - | Clases CSS adicionales | | style | React.CSSProperties | - | Estilos inline | | testId | string | - | ID para testing (data-testid) | | title | string | - | Título accesible para lectores de pantalla | | spritePath | string | '/sprite.svg' | Ruta personalizada al archivo sprite |

Props Específicas de Angular

| Prop | Tipo | Default | Descripción | | ------------ | -------- | ----------------- | ------------------------------------------ | | width | string | '24px' | Ancho específico del icono | | height | string | '24px' | Alto específico del icono | | testId | string | - | ID para testing (data-testid) | | title | string | - | Título accesible para lectores de pantalla | | spritePath | string | '../sprite.svg' | Ruta personalizada al archivo sprite |

Props Específicas de React Native

| Prop | Tipo | Default | Descripción | | -------- | ----------- | ------- | ---------------------- | | style | ViewStyle | - | Estilos del contenedor | | testID | string | - | ID para testing |

🎯 Ejemplos de Tokens

Usando Aliases (Recomendado)

// Colores principales
<ReactIcon name="home" color="primary" />          // #f49a3d
<ReactIcon name="user" color="secondary" />        // #008dbf

// Estados de feedback
<ReactIcon name="check-circle" color="success" />  // #0abb87
<ReactIcon name="cross-circle" color="error" />    // #f46a6b
<ReactIcon name="info" color="info" />             // #50a5f1
<ReactIcon name="warning" color="warning" />       // #f1b44c

Usando Escalas Específicas

// Escalas de primary (naranja)
<ReactIcon name="star" color="primary-100" />      // Muy claro
<ReactIcon name="star" color="primary-500" />      // Normal (igual que 'primary')
<ReactIcon name="star" color="primary-900" />      // Muy oscuro

// Escalas de grises
<ReactIcon name="user" color="gray-300" />         // Gris claro
<ReactIcon name="user" color="gray-600" />         // Gris medio
<ReactIcon name="user" color="gray-900" />         // Gris oscuro

// Neutrales
<ReactIcon name="document" color="white" />        // Blanco
<ReactIcon name="document" color="black" />        // Negro

🎨 CSS Variables y Personalización

Importar CSS Variables

// En tu archivo CSS principal
@import '~dropi-lib-icons/dist/tokens.css';

// O en JavaScript/TypeScript
import 'dropi-lib-icons/dist/tokens.css';

Variables Disponibles

/* Principales */
--dropi-primary: #f49a3d;
--dropi-secondary: #008dbf;

/* Estados */
--dropi-success: #0abb87;
--dropi-error: #f46a6b;
--dropi-info: #50a5f1;
--dropi-warning: #f1b44c;

/* Escalas completas (ejemplo con primary) */
--dropi-primary-50: #fef8f2;
--dropi-primary-100: #ffecda;
--dropi-primary-200: #fcddbd;
/* ... hasta primary-900 */

/* Grises */
--dropi-gray-50: #f7f8fa;
--dropi-gray-100: #e6eaf2;
/* ... hasta gray-900 */

/* Neutrales */
--dropi-white: #ffffff;
--dropi-black: #000000;

Clases Utilitarias Incluidas

/* Colores de texto */
.dropi-color-primary {
  color: var(--dropi-primary);
}
.dropi-color-secondary {
  color: var(--dropi-secondary);
}

/* Colores de fondo */
.dropi-bg-primary {
  background-color: var(--dropi-primary);
}
.dropi-bg-secondary {
  background-color: var(--dropi-secondary);
}

/* Fill para SVGs */
.dropi-fill-primary {
  fill: var(--dropi-primary);
}
.dropi-fill-secondary {
  fill: var(--dropi-secondary);
}

📖 Guía de Migración

Desde v1.1.x a v1.2.x

La v1.2.0 introduce el sistema de Design Tokens, pero mantiene compatibilidad hacia atrás:

// ❌ Antes (sigue funcionando)
<ReactIcon name="home" color="blue" />
<ReactIcon name="user" color="#ff6b6b" />

// ✅ Recomendado ahora (usa tokens del Design System)
<ReactIcon name="home" color="primary" />
<ReactIcon name="user" color="secondary-600" />

Beneficios de migrar a tokens:

• ✅ Consistencia automática con el Design System
• ✅ Actualizaciones centralizadas de colores
• ✅ Mejor experiencia de desarrollo con IntelliSense
• ✅ Temas y modo oscuro preparados para el futuro

🛠️ Desarrollo y Contribución

Setup Local

# Clonar repositorio
git clone https://github.com/dropi/ui-icons-library.git
cd ui-icons-library

# Instalar dependencias
npm install

# Generar sprites y mapeos
npm run generate:icons

# Compilar
npm run build

# Desarrollo con watch mode
npm run dev

Scripts Disponibles

npm run build          # Build completo
npm run dev            # Desarrollo con watch
npm run generate:icons # Generar sprites y mapeos
npm run clean          # Limpiar dist/

📄 Licencia

MIT © DROPI SAS

🤝 Soporte y Contribuciones

Reportar Issues

Si encuentras un bug o tienes una sugerencia, por favor crea un issue.

Contribuir

1. Fork el proyecto
2. Crea tu feature branch (git checkout -b feature/amazing-feature)
3. Commit tus cambios (git commit -m 'Add amazing feature')
4. Push a la branch (git push origin feature/amazing-feature)
5. Abre un Pull Request

Roadmap

• [ ] Storybook para catálogo visual
• [ ] Figma plugin para sincronización
• [ ] Soporte para Vue.js y Svelte
• [ ] Iconos animados
• [ ] Modo oscuro automático
• [ ] Testing automatizado

Hecho con ❤️ por el equipo de DROPI

NPM • GitHub • Design System

Angular:

npm install @angular/core@>=16.0.0

``````bash

npm install @angular/core@>=16.0.0

**React Native:**```

```bash

npm install react-native@>=0.60.0 react-native-svg@>=12.0.0**React Native:**

## 🎨 Design System - Tokens de Colornpm install react-native@>=0.60.0 react-native-svg@>=12.0.0

Esta librería incluye todos los tokens de color del Design System de Dropi:

🎨 Design System - Tokens de Color

🔥 Colores de Marca

• Primary: Naranja (#f49a3d) - primary, primary-50 a primary-900Esta librería incluye todos los tokens de color del Design System de Dropi:

• Secondary: Azul (#008dbf) - secondary, secondary-50 a secondary-900

🔥 Colores de Marca

✅ Estados de Feedback

• Success: Verde (#0abb87) - success, success-50 a success-900- Primary: Naranja (#f49a3d) - primary, primary-50 a primary-900

• Error: Rojo (#f46a6b) - error, error-50 a error-900 - Secondary: Azul (#008dbf) - secondary, secondary-50 a secondary-900

• Info: Azul claro (#50a5f1) - info, info-50 a info-900

• Warning: Amarillo (#f1b44c) - warning, warning-50 a warning-900### ✅ Estados de Feedback

⚫ Neutrales y Grises- Success: Verde (#0abb87) - success, success-50 a success-900

• Neutros: white, black- Error: Rojo (#f46a6b) - error, error-50 a error-900

• Grises: gray-50 a gray-900- Info: Azul claro (#50a5f1) - info, info-50 a info-900

• Warning: Amarillo (#f1b44c) - warning, warning-50 a warning-900

🚀 Uso

⚫ Neutrales y Grises

React

• Neutros: white, black

```tsx- Grises: gray-50agray-900

import { ReactIcon } from 'dropi-lib-icons';

// Opcional: Importar CSS variables## 🚀 Uso

import 'dropi-lib-icons/dist/tokens.css';

React

function App() {

return (```tsx

<div>import { ReactIcon } from "dropi-lib-icons";

  {/* Usando tokens de Dropi */}// Opcional: Importar CSS variables

  <ReactIcon name="home" size={24} color="primary" />import "dropi-lib-icons/dist/tokens.css";

  <ReactIcon name="search" size={32} color="secondary-600" />

  <ReactIcon name="check-circle" color="success" />function App() {

    return (

  {/* También funciona con colores CSS tradicionales */}    <div>

  <ReactIcon name="heart" color="#ff6b6b" />      {/* Usando tokens de Dropi */}

  <ReactIcon name="user" color="currentColor" />      <ReactIcon name="home" size={24} color="primary" />

</div>      <ReactIcon name="search" size={32} color="secondary-600" />

);

}

      <ReactIcon name="heart" color="#ff6b6b" />

### Angular      <ReactIcon name="user" color="currentColor" />

    </div>

**Opción 1: Componente Standalone (Recomendado)**  );

```typescript}

import { Component } from '@angular/core';```

import { IconComponent } from 'dropi-lib-icons';

### Angular

@Component({

  selector: 'app-root',**Opción 1: Componente Standalone (Recomendado)**

  standalone: true,

  imports: [IconComponent],```typescript

  template: `import { Component } from "@angular/core";

    <!-- Usando tokens de Dropi -->import { IconComponent } from "dropi-lib-icons";

    <dropi-icon name="home" size="24px" color="primary"></dropi-icon>

    <dropi-icon name="search" size="32px" color="secondary-600"></dropi-icon>@Component({

    <dropi-icon name="warning-triangle" color="warning"></dropi-icon>  selector: "app-root",

      standalone: true,

    <!-- También funciona con colores CSS -->  imports: [IconComponent],

    <dropi-icon name="heart" color="#ff6b6b"></dropi-icon>  template: `

  `    <!-- Usando tokens de Dropi -->

})    <dropi-icon name="home" size="24px" color="primary"></dropi-icon>

export class AppComponent {}    <dropi-icon name="search" size="32px" color="secondary-600"></dropi-icon>

```    <dropi-icon name="warning-triangle" color="warning"></dropi-icon>



### React Native    <!-- También funciona con colores CSS -->

    <dropi-icon name="heart" color="#ff6b6b"></dropi-icon>

```tsx  `,

import { ReactNativeIcon } from 'dropi-lib-icons';})

export class AppComponent {}

function App() {```

  return (

    <View>Para usar en tu CSS (opcional):

      {/* Usando tokens de Dropi */}

      <ReactNativeIcon name="home" size={24} color="primary" />```scss

      <ReactNativeIcon name="search" size={32} color="secondary-600" />// En tu styles.scss

      <ReactNativeIcon name="check-circle" color="success" />@import "~dropi-lib-icons/dist/tokens.css";

    </View>

  );// Ahora puedes usar las variables

}.my-element {

```  color: var(--dropi-primary);

  background-color: var(--dropi-secondary-100);

## 🎯 Ejemplos de Tokens}

Usando Aliases (Recomendado)

// Colores principales

<ReactIcon name="home" color="primary" />     // #f49a3d```typescript

<ReactIcon name="user" color="secondary" />   // #008dbfimport { NgModule } from "@angular/core";

import { IconModule } from "dropi-lib-icons";

// Estados

<ReactIcon name="check-circle" color="success" />   // #0abb87@NgModule({

<ReactIcon name="cross-circle" color="error" />     // #f46a6b  imports: [IconModule],

<ReactIcon name="info" color="info" />              // #50a5f1})

<ReactIcon name="warning-triangle" color="warning" /> // #f1b44cexport class AppModule {}

Usando Escalas Específicas### React Native

// Escalas de primary (naranja)```tsx

<ReactIcon name="star" color="primary-100" />  // Muy claroimport { ReactNativeIcon } from "dropi-lib-icons";

<ReactIcon name="star" color="primary-500" />  // Normal

<ReactIcon name="star" color="primary-900" />  // Muy oscurofunction App() {

  return (

// Escalas de grises    <View>

<ReactIcon name="user" color="gray-300" />     // Gris claro      {/* Usando tokens de Dropi */}

<ReactIcon name="user" color="gray-600" />     // Gris medio      <ReactNativeIcon name="home" size={24} color="primary" />

<ReactIcon name="user" color="gray-900" />     // Gris oscuro      <ReactNativeIcon name="search" size={32} color="secondary-600" />

```      <ReactNativeIcon name="check-circle" color="success" />

    </View>

## 📋 Referencia de API  );

}

| Prop | Tipo | Default | Descripción |```

|------|------|---------|-------------|

| `name` | `IconName` | - | Nombre del icono (requerido) |## 🎯 Ejemplos de Tokens

| `size` | `number \| string` | `24` | Tamaño del icono |

| `color` | `DropiColorToken \| string` | `'currentColor'` | Color usando tokens o CSS |### Usando Aliases (Recomendado)



## 🎨 67 Tokens Disponibles```tsx

// Colores principales

```typescript<ReactIcon name="home" color="primary" />     // #f49a3d

// Principales (aliases)<ReactIcon name="user" color="secondary" />   // #008dbf

'primary', 'secondary', 'success', 'error', 'info', 'warning'

// Estados

// Escalas completas (50-900)<ReactIcon name="check-circle" color="success" />   // #0abb87

'primary-50', 'primary-100', ..., 'primary-900'<ReactIcon name="cross-circle" color="error" />     // #f46a6b

'secondary-50', 'secondary-100', ..., 'secondary-900'<ReactIcon name="info" color="info" />              // #50a5f1

'success-50', 'success-100', ..., 'success-900'<ReactIcon name="warning-triangle" color="warning" /> // #f1b44c

'error-50', 'error-100', ..., 'error-900'```

'info-50', 'info-100', ..., 'info-900'

'warning-50', 'warning-100', ..., 'warning-900'### Usando Escalas Específicas

'gray-50', 'gray-100', ..., 'gray-900'

'white', 'black'```tsx

```// Escalas de primary (naranja)

<ReactIcon name="star" color="primary-100" />  // Muy claro

## 📖 Guía de Migración<ReactIcon name="star" color="primary-500" />  // Normal

<ReactIcon name="star" color="primary-900" />  // Muy oscuro

### Desde v1.1.x

// Escalas de grises

```tsx<ReactIcon name="user" color="gray-300" />     // Gris claro

// ❌ Antes<ReactIcon name="user" color="gray-600" />     // Gris medio

<ReactIcon name="home" color="blue" /><ReactIcon name="user" color="gray-900" />     // Gris oscuro

// ✅ Ahora (usa tokens del Design System)

## 📋 API Reference

## 📄 Licencia| Prop    | Tipo                        | Default          | Descripción                  |

| ------- | --------------------------- | ---------------- | ---------------------------- |

MIT © DROPI SAS| `name`  | `IconName`                  | -                | Nombre del icono (requerido) |

| `size`  | `number \| string`          | `24`             | Tamaño del icono             |

---| `color` | `DropiColorToken \| string` | `'currentColor'` | Color usando tokens o CSS    |



**Design System**: Integrado con tokens oficiales de Dropi  ### React Props Adicionales

**Soporte**: Angular, React y React Native

**Versión**: 1.2.0 - Design Tokens Update| Prop         | Tipo            | Default         | Descripción            |
| ------------ | --------------- | --------------- | ---------------------- |
| `className`  | `string`        | -               | Clases CSS adicionales |
| `style`      | `CSSProperties` | -               | Estilos inline         |
| `testId`     | `string`        | -               | ID para testing        |
| `title`      | `string`        | -               | Título accesible       |
| `spritePath` | `string`        | `'/sprite.svg'` | Ruta del sprite        |

### Angular Props Adicionales

| Prop         | Tipo     | Default           | Descripción      |
| ------------ | -------- | ----------------- | ---------------- |
| `width`      | `string` | `'24px'`          | Ancho específico |
| `height`     | `string` | `'24px'`          | Alto específico  |
| `testId`     | `string` | -                 | ID para testing  |
| `title`      | `string` | -                 | Título accesible |
| `spritePath` | `string` | `'../sprite.svg'` | Ruta del sprite  |

## 🎨 CSS Variables Disponibles

Todas las variables CSS están disponibles con el prefijo `--dropi-`:

```css
/* Principales */
--dropi-primary: #f49a3d;
--dropi-secondary: #008dbf;

/* Estados */
--dropi-success: #0abb87;
--dropi-error: #f46a6b;
--dropi-info: #50a5f1;
--dropi-warning: #f1b44c;

/* Escalas completas */
--dropi-primary-50: #fef8f2;
--dropi-primary-100: #ffecda;
/* ... hasta primary-900 */

/* Grises */
--dropi-gray-50: #f7f8fa;
--dropi-gray-100: #e6eaf2;
/* ... hasta gray-900 */

📖 Guía de Migración

Desde v1.0.x

// ❌ Antes
<ReactIcon name="home" color="blue" />
<dropi-icon name="search" color="#ff6b6b"></dropi-icon>

// ✅ Ahora (ambos funcionan, pero usa tokens cuando sea posible)
<ReactIcon name="home" color="primary" />
<dropi-icon name="search" color="error"></dropi-icon>

🛠️ Desarrollo

# Instalar dependencias
npm install

# Generar sprites y mapeos
npm run generate:icons

# Compilar
npm run build

# Desarrollo con watch
npm run dev

📄 Licencia

MIT © DROPI SAS

🤝 Contribuir

1. Fork el proyecto
2. Crea tu feature branch (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la branch (git push origin feature/AmazingFeature)
5. Abre un Pull Request

Design System: Integrado con tokens oficiales de Dropi

Soporte: Compatible con las últimas versiones de Angular, React y React Native