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

npm install @lunaversex/atlas-icons
# o
yarn add @lunaversex/atlas-icons
# o
pnpm add @lunaversex/atlas-icons

🎯 Uso

React

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

<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

<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

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

// 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

/* 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

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:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset/source'
      }
    ]
  }
};

// vite.config.js
export default {
  assetsInclude: ['**/*.svg']
};

Tree Shaking

Para optimizar el bundle, importa solo los iconos que necesites:

// ✅ 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

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

# 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 para más detalles.