@opendex-origon/icons

v3.0.1

Published

4 months ago

Biblioteca de iconos SVG para React con tipado TypeScript - Solo para proyectos que se integren con Opendex. 44,260 iconos únicos organizados en 29 categorías temáticas, incluyendo logo personalizado.

🎨 Origon Icons

Biblioteca profesional de iconos SVG para React con tipado TypeScript completo

Una colección completa de 44,281 variantes de iconos optimizados, distribuida como paquete npm ligero con iconos servidos desde Cloudflare CDN para máxima velocidad y rendimiento.

✨ Características Principales

🚀 44,281 variantes en 8 tamaños y 8 estilos
📦 Paquete ultra-ligero - solo 4.33 KB (gzipped)
⚡ CDN global con Cloudflare para carga instantánea
🔒 Validación robusta con manejo de errores
📝 TypeScript completo con autocompletado
🎯 Tree-shaking friendly para bundles optimizados
🌐 Caché optimizado (1 año de duración)
🛡️ Validación de parámetros con warnings informativos

📊 Estadísticas del Proyecto

| Métrica | Valor | | ----------------------- | ------------------------------------------------------ | | Iconos únicos | 2,996 | | Variantes totales | 44,281 | | Tamaños disponibles | 8 (10, 12, 16, 20, 24, 28, 32, 48) | | Estilos disponibles | 8 (regular, filled, light, color, + variantes LTR/RTL) | | Categorías | 2,887 | | Tamaño del paquete | 4.33 KB |

🚀 Instalación

# npm
npm install @opendex-origon/icons

# yarn
yarn add @opendex-origon/icons

# pnpm
pnpm add @opendex-origon/icons

🔧 Compatibilidad

✅ Frameworks Soportados

Next.js 14+ (App Router y Pages Router)
Create React App (CRA)
Vite + React
Gatsby
Remix
Any React 16.8+ application

✅ Bundlers Soportados

Webpack (Next.js, CRA)
Vite
Rollup
esbuild
Parcel

✅ Formatos de Módulo

ESM (ES Modules)
CommonJS (CJS)
TypeScript declarations

✅ Características

Server-Side Rendering (SSR) ✅
Static Site Generation (SSG) ✅
Client-Side Hydration ✅
Tree Shaking ✅
TypeScript ✅

📖 Uso Básico

Componente React (Recomendado)

import React from 'react';
import { OrigonIcon } from '@opendex-origon/icons';

function App() {
  return (
    <div>
      {/* Uso básico */}
      <OrigonIcon name='Zoom In' size={24} style='regular' />

      {/* Con diferentes estilos */}
      <OrigonIcon name='Accessibility' size={32} style='filled' />
      <OrigonIcon name='Add Circle' size={16} style='light' />

      {/* Con props adicionales */}
      <OrigonIcon
        name='Settings'
        size={28}
        style='color'
        className='my-icon'
        onClick={() => console.log('Clicked!')}
      />
    </div>
  );
}

Hook para URLs

import React from 'react';
import { useOrigonIcon } from '@opendex-origon/icons';

function CustomIcon({ name, size = 24, style = 'regular' }) {
  const iconUrl = useOrigonIcon({ name, size, style });

  return (
    <img
      src={iconUrl}
      alt={name}
      width={size}
      height={size}
      onError={() => console.log('Icon failed to load')}
    />
  );
}

URL Directa (sin paquete)

<img
  src="https://cdn.origonlabs.opendex.dev/icons/Accessibility/SVG/ic_origon_accessibility_24_regular.svg"
  alt="Accessibility"
  width="24"
  height="24"
/>

🎨 Estilos Disponibles

| Estilo | Descripción | Ejemplo | | ------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------- | | regular | Contorno estándar | Regular | | filled | Relleno sólido | Filled | | light | Contorno ligero | Light | | color | Versión a color | Color | | regular_ltr | Regular izquierda-derecha | Regular LTR | | regular_rtl | Regular derecha-izquierda | Regular RTL | | filled_ltr | Filled izquierda-derecha | Filled LTR | | filled_rtl | Filled derecha-izquierda | Filled RTL |

📏 Tamaños Disponibles

| Tamaño | Uso recomendado | Ejemplo | | ------ | ------------------------------------ | ---------------------------------------------------------------------------------------------------------- | | 10 | Iconos muy pequeños, badges | 10px | | 12 | Iconos pequeños, tooltips | 12px | | 16 | Iconos estándar pequeños | 16px | | 20 | Iconos estándar | 20px | | 24 | Recomendado - Iconos principales | 24px | | 28 | Iconos grandes | 28px | | 32 | Iconos muy grandes | 32px | | 48 | Iconos extra grandes | 48px |

🔍 API de Búsqueda

Cargar la API

<script src="https://cdn.origonlabs.opendex.dev/icon-search.js"></script>

Uso Básico

// Inicializar
const search = new OrigonIconSearch();

// Buscar iconos
const results = await search.search('zoom');
console.log(results); // Array de iconos que coinciden

// Obtener icono específico
const icon = await search.getIcon('Zoom In', 24, 'filled');
console.log(icon.url); // URL directa del SVG

🛡️ Validación y Manejo de Errores

La biblioteca incluye validación robusta que previene errores comunes:

// ❌ Esto generará un warning y retornará null
<OrigonIcon name="" size={24} style="regular" />
// Warning: [OrigonIcons] Invalid icon name: "". Icon name must contain only letters, numbers, spaces, hyphens, and underscores.

// ❌ Esto generará un warning y retornará null
<OrigonIcon name="Valid Icon" size={1000} style="regular" />
// Warning: [OrigonIcons] Invalid size: "1000". Size must be a number between 1 and 512.

// ❌ Esto generará un warning y retornará null
<OrigonIcon name="Valid Icon" size={24} style="invalid" />
// Warning: [OrigonIcons] Invalid style: "invalid". Valid styles are: regular, filled, light, color, regular_ltr, regular_rtl, filled_ltr, filled_rtl.

⚡ Uso con Next.js

App Router (Recomendado)

// app/page.tsx
'use client';

import { OrigonIcon } from '@opendex-origon/icons';

export default function HomePage() {
  return (
    <div>
      <h1>Mi App Next.js</h1>
      <OrigonIcon name='Settings' size={24} style='regular' />
    </div>
  );
}

Pages Router

// pages/index.tsx
import { OrigonIcon } from '@opendex-origon/icons';

export default function HomePage() {
  return (
    <div>
      <h1>Mi App Next.js</h1>
      <OrigonIcon name='Settings' size={24} style='regular' />
    </div>
  );
}

SSR/SSG Compatible

// Los iconos funcionan perfectamente con SSR
export default function ServerComponent() {
  return (
    <div>
      {/* En SSR: muestra placeholder transparente */}
      {/* En cliente: carga desde CDN */}
      <OrigonIcon name='Home' size={24} style='regular' />
    </div>
  );
}

🎯 Casos de Uso Avanzados

Con Styled Components

import styled from 'styled-components';
import { OrigonIcon } from '@opendex-origon/icons';

const StyledIcon = styled(OrigonIcon)`
  transition: transform 0.2s ease;

  &:hover {
    transform: scale(1.1);
  }
`;

function HoverIcon() {
  return <StyledIcon name='Heart' size={24} style='filled' color='red' />;
}

Con Tailwind CSS

import { OrigonIcon } from '@opendex-origon/icons';

function TailwindIcon() {
  return (
    <OrigonIcon
      name='Settings'
      size={24}
      style='regular'
      className='text-blue-500 hover:text-blue-700 transition-colors'
    />
  );
}

Lista de Iconos Dinámica

import { OrigonIcon } from '@opendex-origon/icons';

const iconList = [
  { name: 'Home', style: 'filled' as const },
  { name: 'Settings', style: 'regular' as const },
  { name: 'User', style: 'light' as const },
];

function IconList() {
  return (
    <div className='flex gap-4'>
      {iconList.map((icon, index) => (
        <OrigonIcon
          key={index}
          name={icon.name}
          size={24}
          style={icon.style}
          className='cursor-pointer'
        />
      ))}
    </div>
  );
}

🛠️ Desarrollo

Scripts Disponibles

# Compilar para publicación
npm run build

# Lint y type-check
npm run lint:check
npm run type-check

# Limpiar dist
npm run clean

# Publicación (se ejecuta build automáticamente)
npm publish --access public

Estructura del Proyecto

src/
├── index.ts              # Exportaciones principales
├── OrigonIcon.tsx        # Componente principal
├── IconBase.tsx          # Componente base con validaciones
├── useOrigonIcon.ts      # Hook para URLs con validaciones
├── types.ts              # Tipos TypeScript
└── icons/                # Componentes individuales (legacy)

🌐 URLs Base

CDN Base: https://cdn.origonlabs.opendex.dev
Catálogo: https://cdn.origonlabs.opendex.dev/catalog.json
API de búsqueda: https://cdn.origonlabs.opendex.dev/icon-search.js

🔒 Seguridad

HTTPS: Obligatorio para CDN
CORS: Configurado para dominios autorizados
Validación: Nombres de archivo sanitizados
Sin secretos: El paquete npm no contiene credenciales
Validación de entrada: Todos los parámetros son validados

📚 Recursos Adicionales

CDN Base: https://cdn.origonlabs.opendex.dev
Catálogo: https://cdn.origonlabs.opendex.dev/catalog.json
API de búsqueda: https://cdn.origonlabs.opendex.dev/icon-search.js
GitHub: https://github.com/Origonlabs/Icons
Issues: https://github.com/Origonlabs/Icons/issues

📄 Licencia

MIT License - Ver LICENSE para más detalles.

Desarrollado con ❤️ por Opendex Corporation

Versión: 3.0.1-beta.1 | Última actualización: 2024