@restosoft/resty-icons

Resty Icons es la biblioteca oficial de iconos vectoriales (SVG) de RestoSoft 360 optimizada para el ecosistema de React. Todos los iconos han sido diseñados bajo una cuadrícula base de 24x24 px con un trazo limpio y uniforme de 2px.

📦 Instalación

Instala el paquete en tu proyecto utilizando tu gestor de paquetes preferido:

# Con npm
npm install @restosoft/resty-icons

# Con yarn
yarn add @restosoft/resty-icons

# Con pnpm
pnpm add @restosoft/resty-icons

⚙️ Propiedades del Componente (Props)

Todos los iconos aceptan las siguientes propiedades opcionales para personalizar su aspecto:

| Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | size | number | 24 | Tamaño (ancho y alto) del icono en píxeles. | | color | string | 'currentColor' | Color del trazo (soporta cualquier color CSS, hex, rgb o HSL). | | strokeWidth | number | 2 | Grosor de las líneas del icono. | | className | string | '' | Clases de CSS adicionales para aplicar estilos personalizados (p. ej., Tailwind CSS). |

🚀 Ejemplos de Integración

1. En un proyecto React Estándar (o Create React App)

Importa el icono que necesites directamente desde el paquete y úsalo en tu árbol de componentes de React.

import React from 'react';
import { TableTableBusyIcon, KitchenChefIcon } from '@restosoft/resty-icons';

export default function RestaurantStatus() {
  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>Panel del Salón</h1>
      
      {/* Icono personalizado en color y tamaño */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
        <TableTableBusyIcon size={32} color="#ef4444" strokeWidth={2} />
        <span>Mesa 4 — Ocupada</span>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginTop: '10px' }}>
        <KitchenChefIcon size={32} color="#10b981" strokeWidth={1.5} />
        <span>Chef — Preparando Orden</span>
      </div>
    </div>
  );
}

2. En un proyecto Vite + React (TypeScript)

Dado que la biblioteca está precompilada con definiciones de TypeScript completas, obtendrás autocompletado inteligente y validación de tipos instantánea en tu editor.

import { useState } from 'react';
import { DeliveryMotorcycleIcon, DeliveryDeliveryCompletedIcon } from '@restosoft/resty-icons';

export function OrderTracker() {
  const [isCompleted, setIsCompleted] = useState(false);

  return (
    <div className="p-6 bg-gray-900 text-white rounded-xl shadow-lg max-w-sm">
      <h3 className="text-lg font-bold mb-4">Seguimiento de Reparto</h3>
      
      <div className="flex items-center gap-3">
        {isCompleted ? (
          <DeliveryDeliveryCompletedIcon size={40} color="#10b981" className="animate-bounce" />
        ) : (
          <DeliveryMotorcycleIcon size={40} color="#3b82f6" className="animate-pulse" />
        )}
        
        <div>
          <p className="font-semibold">{isCompleted ? 'Pedido Entregado' : 'Pedido en Camino'}</p>
          <button 
            onClick={() => setIsCompleted(!isCompleted)}
            className="mt-2 text-xs bg-gray-800 hover:bg-gray-700 px-3 py-1.5 rounded"
          >
            Alternar estado
          </button>
        </div>
      </div>
    </div>
  );
}

3. En un proyecto Next.js (App Router - Server Components)

Nuestros iconos están escritos como componentes puros de React y son compatibles con React Server Components (RSC) por defecto, lo que significa que no incrementan el tamaño del bundle de JavaScript de cliente si se renderizan en el servidor.

// app/dashboard/page.tsx
import { SysDashboardIcon, PosInvoiceIcon, CrmCustomerIcon } from '@restosoft/resty-icons';

export default function DashboardPage() {
  return (
    <main className="min-h-screen bg-black text-white p-8">
      <div className="flex items-center gap-2 mb-8">
        <SysDashboardIcon size={28} color="#a78bfa" />
        <h1 className="text-2xl font-bold">Administración</h1>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Tarjeta de Ventas */}
        <div className="p-6 bg-neutral-900 border border-neutral-800 rounded-lg flex items-center justify-between">
          <div>
            <p className="text-sm text-neutral-400">Facturación de Caja</p>
            <p className="text-2xl font-bold mt-1">$12,450.00</p>
          </div>
          <PosInvoiceIcon size={36} color="#60a5fa" />
        </div>

        {/* Tarjeta de Clientes */}
        <div className="p-6 bg-neutral-900 border border-neutral-800 rounded-lg flex items-center justify-between">
          <div>
            <p className="text-sm text-neutral-400">Clientes Nuevos</p>
            <p className="text-2xl font-bold mt-1">+48</p>
          </div>
          <CrmCustomerIcon size={36} color="#34d399" />
        </div>
      </div>
    </main>
  );
}