@codeplex-sac/iconos

Sistema de iconos semánticos de Codeplex-SAC, basado en Google Material Symbols Rounded. Iconografía consistente y moderna, alineada con la tipografía Poppins.

Instalación

bun add @codeplex-sac/iconos @codeplex-sac/tema @mui/material @emotion/react @emotion/styled

[!IMPORTANT] Este paquete depende de la inyección de fuentes realizada por CodeplexProveedorTema de @codeplex-sac/tema. Asegúrate de tenerlo configurado en la raíz de tu aplicación.

Componente Base: CodeplexIcono

CodeplexIcono renderiza cualquier icono de Google Material Symbols usando ligaduras.

Props: | Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | nombre | string | — | Nombre oficial del icono (ej: 'search', 'home'). | | relleno | boolean | false | Activa el estilo sólido (FILL 1). | | color | 'primario' \| 'secundario' \| 'error' \| 'exito' \| 'advertencia' \| 'info' \| 'heredado' | 'heredado' | Color semántico del icono. |

Uso:

import { CodeplexIcono } from '@codeplex-sac/iconos';

export const Ejemplo = () => (
  <CodeplexIcono nombre="settings" color="primario" relleno />
);

Catálogo de Iconos Semánticos

Iconos preconfigurados que no requieren la prop nombre. Úsalos para mantener consistencia semántica en toda la aplicación.

Acciones Comunes

| Componente | Icono | Componente | Icono | | :--- | :--- | :--- | :--- | | CodeplexIconoBuscar | search | CodeplexIconoBorrar | delete | | CodeplexIconoEditar | edit | CodeplexIconoGuardar | save | | CodeplexIconoSubir | cloud_upload | CodeplexIconoEnviar | send | | CodeplexIconoAnadir | add_circle | CodeplexIconoQuitar | do_not_disturb_on | | CodeplexIconoCerrar | close | CodeplexIconoDescargar | download | | CodeplexIconoRefrescar | refresh | CodeplexIconoFiltro | filter_alt |

Seguridad y Autenticación

| Componente | Icono | Componente | Icono | | :--- | :--- | :--- | :--- | | CodeplexIconoSeguridad | security | CodeplexIconoCandado | lock | | CodeplexIconoLlave | key | CodeplexIconoEscudo | shield |

Estados y Feedback

| Componente | Icono | Componente | Icono | | :--- | :--- | :--- | :--- | | CodeplexIconoExito | check_circle | CodeplexIconoInformacion | info | | CodeplexIconoError | error | CodeplexIconoAyuda | help | | CodeplexIconoAlerta | warning | CodeplexIconoProgreso | autorenew |

Comunicación y Social

| Componente | Icono | Componente | Icono | | :--- | :--- | :--- | :--- | | CodeplexIconoCorreo | mail | CodeplexIconoTelefono | phone | | CodeplexIconoCompartir | share | CodeplexIconoChat | forum |

Finanzas y Comercio

| Componente | Icono | Componente | Icono | | :--- | :--- | :--- | :--- | | CodeplexIconoBilletera | account_balance_wallet | CodeplexIconoBanco | account_balance | | CodeplexIconoMoneda | payments | CodeplexIconoCarrito | shopping_cart | | CodeplexIconoPrecio | sell | CodeplexIconoRecibo | receipt |

Multimedia

| Componente | Icono | Componente | Icono | | :--- | :--- | :--- | :--- | | CodeplexIconoImagen | image | CodeplexIconoCamara | photo_camera | | CodeplexIconoVideo | videocam | CodeplexIconoColeccion | collections |

Estructura e Interfaz

| Componente | Icono | Componente | Icono | | :--- | :--- | :--- | :--- | | CodeplexIconoDiseno | dashboard | CodeplexIconoBarraLateral | view_sidebar | | CodeplexIconoCaja | inbox | CodeplexIconoCuadricula | grid_view | | CodeplexIconoPila | layers | CodeplexIconoContenedor | view_quilt |

Mejores Prácticas

1. Semántica sobre nombre: usa CodeplexIconoBorrar en lugar de <CodeplexIcono nombre="delete" /> para mantener la consistencia en el mantenimiento.
2. Relleno: activa relleno para estados activos o acciones primarias.
3. Tamaño: hereda el fontSize de MUI — usa fontSize="large" directamente en el componente.

Licencia

Propiedad privada de Codeplex SAC. Todos los derechos reservados.