npm package: @lunaversex/atlas-icons
Description: Universal icon library for Atlas Design System
Author: LunaVerseX
Latest version: 1.0.0

# Atlas Icons

Una biblioteca universal de iconos SVG para el ecosistema Atlas Design System. Compatible con React, Vue, Svelte y cualquier framework JavaScript.

## 🚀 Características

- **Universal**: Funciona en React, Vue, Svelte y vanilla JavaScript
- **TypeScript**: Soporte completo de tipos
- **SVG Optimizado**: Iconos vectoriales escalables
- **Tema Adaptable**: Usa `currentColor` para adaptarse a cualquier tema
- **Tree-shaking**: Solo importa los iconos que uses
- **Accesible**: Atributos ARIA incluidos

## 📦 Instalación

```bash
npm install @lunaversex/atlas-icons
# o
yarn add @lunaversex/atlas-icons
# o
pnpm add @lunaversex/atlas-icons
```

## 🎯 Uso

### React

```tsx
import { Atlas, ArrowDown, Github } from '@lunaversex/atlas-icons';

function App() {
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: Atlas }} />
      <div 
        dangerouslySetInnerHTML={{ __html: ArrowDown }} 
        style={{ width: '24px', height: '24px', color: '#007bff' }}
      />
      <div 
        dangerouslySetInnerHTML={{ __html: Github }} 
        className="my-icon"
      />
    </div>
  );
}
```

### Vue

```vue
<template>
  <div>
    <div v-html="Atlas" />
    <div v-html="ArrowDown" style="width: 24px; height: 24px; color: #007bff;" />
    <div v-html="Github" class="my-icon" />
  </div>
</template>

<script setup lang="ts">
import { Atlas, ArrowDown, Github } from '@lunaversex/atlas-icons';
</script>
```

### Svelte

```svelte
<script lang="ts">
  import { Atlas, ArrowDown, Github } from '@lunaversex/atlas-icons';
</script>

<div>
  {@html Atlas}
  <div style="width: 24px; height: 24px; color: #007bff;">
    {@html ArrowDown}
  </div>
  <div class="my-icon">
    {@html Github}
  </div>
</div>
```

### Vanilla JavaScript

```javascript
import { Atlas, ArrowDown, Github } from '@lunaversex/atlas-icons';

// Usar como string SVG
const atlasIcon = Atlas;
console.log(atlasIcon); // "<svg>...</svg>"

// Insertar en DOM
document.getElementById('icon-container').innerHTML = Atlas;
```

### SVG Directo

```javascript
// Importar archivos SVG directamente
import atlasIcon from '@lunaversex/atlas-icons/svg/atlas.svg';
import arrowDownIcon from '@lunaversex/atlas-icons/svg/arrow_down.svg';
```

## 🎨 Uso de los Iconos

Los iconos se importan como strings SVG y puedes usarlos de varias maneras:

### Personalización con CSS

```css
/* Cambiar tamaño */
.icon {
  width: 32px;
  height: 32px;
}

/* Cambiar color */
.icon {
  color: #007bff;
}

/* Cambiar color de stroke */
.icon svg {
  stroke: currentColor;
}

/* Cambiar color de fill */
.icon svg {
  fill: currentColor;
}
```

### Personalización con JavaScript

```javascript
import { Atlas } from '@lunaversex/atlas-icons';

// Modificar el SVG dinámicamente
const modifiedSvg = Atlas.replace('stroke="currentColor"', 'stroke="red"');
```
| `...props` | `any` | - | Cualquier otra prop válida de SVG |

## 📚 Iconos Disponibles

### Navegación
- `ArrowUp` - Flecha hacia arriba
- `ArrowDown` - Flecha hacia abajo
- `ArrowLeft` - Flecha hacia la izquierda
- `ArrowRight` - Flecha hacia la derecha

### UI
- `SidebarOpen` - Abrir sidebar
- `SidebarClose` - Cerrar sidebar
- `AlignLeft` - Alinear a la izquierda
- `AlignRight` - Alinear a la derecha

### Marcas
- `Atlas` - Logo de Atlas
- `Atom` - Icono de átomo

### Redes Sociales
- `Github` - GitHub
- `Instagram` - Instagram
- `XTwitter` - X (Twitter)

### Plataformas
- `Android` - Android
- `Apple` - Apple
- `Figma` - Figma
- `Google` - Google

### Otros
- `NewChat` - Nuevo chat
- `XTwitter` - X (Twitter)

## 🔧 Configuración Avanzada

### Webpack/Vite

Para usar los archivos SVG directamente, configura tu bundler:

```javascript
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset/source'
      }
    ]
  }
};
```

```javascript
// vite.config.js
export default {
  assetsInclude: ['**/*.svg']
};
```

### Tree Shaking

Para optimizar el bundle, importa solo los iconos que necesites:

```javascript
// ✅ Bueno - Solo importa lo necesario
import { Atlas, ArrowDown } from '@lunaversex/atlas-icons/react';

// ❌ Evita - Importa todo
import * as Icons from '@lunaversex/atlas-icons/react';

## 🎨 Temas

Los iconos se adaptan automáticamente al tema usando `currentColor`:

```css
/* Tema claro */
.icon {
  color: #333;
}

/* Tema oscuro */
.dark .icon {
  color: #fff;
}
```

## 🔍 TypeScript

```typescript
import type { IconName, IconProps } from '@lunaversex/atlas-icons';

// Tipos disponibles
const iconName: IconName = 'Atlas'; // Autocompletado de todos los iconos
const props: IconProps = {
  size: 24,
  color: '#007bff',
  className: 'my-icon'
};
```

## 🚀 Desarrollo

```bash
# Instalar dependencias
npm install

# Construir la biblioteca
npm run build

# Desarrollo con watch
npm run dev

# Limpiar dist
npm run clean
```

## 📁 Estructura del Proyecto

```
atlas-icons/
├── src/
│   ├── icons/           # Archivos SVG fuente (.txt)
│   ├── react/           # Componentes React
│   ├── vue/             # Componentes Vue
│   ├── svelte/          # Componentes Svelte
│   └── index.ts         # Exportaciones principales
├── dist/
│   ├── svg/             # Archivos SVG compilados
│   ├── react/           # Build React
│   ├── vue/             # Build Vue
│   └── svelte/          # Build Svelte
├── scripts/
│   └── build-icons.js   # Script de construcción
└── package.json
```

## 🤝 Contribuir

1. Añade nuevos iconos en `src/icons/` como archivos `.txt`
2. Ejecuta `npm run build` para regenerar la biblioteca
3. Los iconos se convertirán automáticamente a componentes para todos los frameworks

## 📄 Licencia

MIT - Ver [LICENSE](LICENSE) para más detalles.