@codeplex-sac/icons

El sistema de iconos semánticos de Codeplex-SAC, basado en Google Material Symbols Rounded. Este paquete proporciona una iconografía consistente, moderna y alineada con la tipografía Poppins.

🚀 Instalación

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

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

🛠️ Componente Base: CodeplexIcono

CodeplexIcono es el bloque fundamental que permite renderizar cualquier icono de Google usando ligaduras.

Propiedades (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). | | sx | SxProps | - | Estilos personalizados de MUI. |

Uso:

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

<CodeplexIcono nombre="settings" color="primary" relleno />

🏷️ Catálogo de Iconos Semánticos

Para garantizar la consistencia, el paquete expone componentes específicos para cada concepto de interfaz. Estos no requieren la prop nombre.

⚡ Acciones Comunes y Globales

| Componente | Icono | Componente | Icono | | :--- | :--- | :--- | :--- | | CodeplexIconoBuscar | search | CodeplexIconoBorrar | delete | | CodeplexIconoEditar | edit | CodeplexIconoGuardar | save | | CodeplexIconoSubir | cloud_upload | CodeplexIconoEnviar | send | | CodeplexIconoAñadir | 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 |

🏗️ Profesional e Industria

| Componente | Icono | Componente | Icono | | :--- | :--- | :--- | :--- | | CodeplexIconoEdificio | apartment | CodeplexIconoHerramientas| home_repair_service| | CodeplexIconoCalculadora| calculate | CodeplexIconoMapa | map | | CodeplexIconoUbicacion| location_on | CodeplexIconoTrabajo | work |

📐 Layout y Estructura

| 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 Estética: Usa CodeplexIconoBorrar en lugar de CodeplexIcono con nombre "delete" para mantener la consistencia en el mantenimiento.
2. Relleno: Activa relleno para estados activos o para dar mayor peso visual a una acción primaria.
3. Escalado: Al heredar de Icon de MUI, puedes usar el tema para el escalado automático: <CodeplexIconoUsuario fontSize="large" />.

📄 Licencia

Este proyecto es propiedad privada de Codeplex SAC. Todos los derechos reservados.