@codeplex-sac/iconos 0.0.6 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +39 -44
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,106 +1,101 @@
1
- # @codeplex-sac/icons
1
+ # @codeplex-sac/iconos
2
2
 
3
- 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**.
3
+ 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**.
4
4
 
5
- ## 🚀 Instalación
5
+ ## Instalación
6
6
 
7
7
  ```bash
8
- bun add @codeplex-sac/icons @mui/material @emotion/react @emotion/styled
8
+ bun add @codeplex-sac/iconos @codeplex-sac/tema @mui/material @emotion/react @emotion/styled
9
9
  ```
10
10
 
11
11
  > [!IMPORTANT]
12
- > 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.
12
+ > 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.
13
13
 
14
14
  ---
15
15
 
16
- ## 🛠️ Componente Base: CodeplexIcono
16
+ ## Componente Base: CodeplexIcono
17
17
 
18
- `CodeplexIcono` es el bloque fundamental que permite renderizar cualquier icono de Google usando **ligaduras**.
18
+ `CodeplexIcono` renderiza cualquier icono de Google Material Symbols usando **ligaduras**.
19
19
 
20
- ### Propiedades (Props)
21
- | Propiedad | Tipo | Por Defecto | Descripción |
20
+ **Props:**
21
+ | Propiedad | Tipo | Por defecto | Descripción |
22
22
  | :--- | :--- | :--- | :--- |
23
- | `nombre` | `string` | - | Nombre oficial del icono (ej: 'search', 'home'). |
23
+ | `nombre` | `string` | — | Nombre oficial del icono (ej: `'search'`, `'home'`). |
24
24
  | `relleno` | `boolean` | `false` | Activa el estilo sólido (FILL 1). |
25
- | `sx` | `SxProps` | - | Estilos personalizados de MUI. |
25
+ | `color` | `'primario' \| 'secundario' \| 'error' \| 'exito' \| 'advertencia' \| 'info' \| 'heredado'` | `'heredado'` | Color semántico del icono. |
26
26
 
27
27
  **Uso:**
28
28
  ```tsx
29
- import { CodeplexIcono } from '@codeplex-sac/icons';
29
+ import { CodeplexIcono } from '@codeplex-sac/iconos';
30
30
 
31
- <CodeplexIcono nombre="settings" color="primary" relleno />
31
+ export const Ejemplo = () => (
32
+ <CodeplexIcono nombre="settings" color="primario" relleno />
33
+ );
32
34
  ```
33
35
 
34
36
  ---
35
37
 
36
- ## 🏷️ Catálogo de Iconos Semánticos
38
+ ## Catálogo de Iconos Semánticos
37
39
 
38
- Para garantizar la consistencia, el paquete expone componentes específicos para cada concepto de interfaz. Estos **no requieren** la prop `nombre`.
40
+ Iconos preconfigurados que no requieren la prop `nombre`. Úsalos para mantener consistencia semántica en toda la aplicación.
39
41
 
40
- ### ⚡ Acciones Comunes y Globales
42
+ ### Acciones Comunes
41
43
  | Componente | Icono | Componente | Icono |
42
44
  | :--- | :--- | :--- | :--- |
43
45
  | `CodeplexIconoBuscar` | `search` | `CodeplexIconoBorrar` | `delete` |
44
46
  | `CodeplexIconoEditar` | `edit` | `CodeplexIconoGuardar` | `save` |
45
47
  | `CodeplexIconoSubir` | `cloud_upload` | `CodeplexIconoEnviar` | `send` |
46
- | `CodeplexIconoAñadir` | `add_circle` | `CodeplexIconoQuitar` | `do_not_disturb_on`|
47
- | `CodeplexIconoCerrar` | `close` | `CodeplexIconoDescargar`| `download` |
48
- | `CodeplexIconoRefrescar`| `refresh` | `CodeplexIconoFiltro` | `filter_alt` |
48
+ | `CodeplexIconoAnadir` | `add_circle` | `CodeplexIconoQuitar` | `do_not_disturb_on` |
49
+ | `CodeplexIconoCerrar` | `close` | `CodeplexIconoDescargar` | `download` |
50
+ | `CodeplexIconoRefrescar` | `refresh` | `CodeplexIconoFiltro` | `filter_alt` |
49
51
 
50
- ### 🛡️ Seguridad y Autenticación
52
+ ### Seguridad y Autenticación
51
53
  | Componente | Icono | Componente | Icono |
52
54
  | :--- | :--- | :--- | :--- |
53
- | `CodeplexIconoSeguridad`| `security` | `CodeplexIconoCandado` | `lock` |
55
+ | `CodeplexIconoSeguridad` | `security` | `CodeplexIconoCandado` | `lock` |
54
56
  | `CodeplexIconoLlave` | `key` | `CodeplexIconoEscudo` | `shield` |
55
57
 
56
- ### 🚦 Estados y Feedback
58
+ ### Estados y Feedback
57
59
  | Componente | Icono | Componente | Icono |
58
60
  | :--- | :--- | :--- | :--- |
59
- | `CodeplexIconoExito` | `check_circle` | `CodeplexIconoInformacion`| `info` |
61
+ | `CodeplexIconoExito` | `check_circle` | `CodeplexIconoInformacion` | `info` |
60
62
  | `CodeplexIconoError` | `error` | `CodeplexIconoAyuda` | `help` |
61
63
  | `CodeplexIconoAlerta` | `warning` | `CodeplexIconoProgreso` | `autorenew` |
62
64
 
63
- ### 💬 Comunicación y Social
65
+ ### Comunicación y Social
64
66
  | Componente | Icono | Componente | Icono |
65
67
  | :--- | :--- | :--- | :--- |
66
68
  | `CodeplexIconoCorreo` | `mail` | `CodeplexIconoTelefono` | `phone` |
67
- | `CodeplexIconoCompartir`| `share` | `CodeplexIconoChat` | `forum` |
69
+ | `CodeplexIconoCompartir` | `share` | `CodeplexIconoChat` | `forum` |
68
70
 
69
- ### 💰 Finanzas y Comercio
71
+ ### Finanzas y Comercio
70
72
  | Componente | Icono | Componente | Icono |
71
73
  | :--- | :--- | :--- | :--- |
72
- | `CodeplexIconoBilletera`| `account_balance_wallet`| `CodeplexIconoBanco` | `account_balance` |
74
+ | `CodeplexIconoBilletera` | `account_balance_wallet` | `CodeplexIconoBanco` | `account_balance` |
73
75
  | `CodeplexIconoMoneda` | `payments` | `CodeplexIconoCarrito` | `shopping_cart` |
74
76
  | `CodeplexIconoPrecio` | `sell` | `CodeplexIconoRecibo` | `receipt` |
75
77
 
76
- ### 📸 Multimedia
78
+ ### Multimedia
77
79
  | Componente | Icono | Componente | Icono |
78
80
  | :--- | :--- | :--- | :--- |
79
81
  | `CodeplexIconoImagen` | `image` | `CodeplexIconoCamara` | `photo_camera` |
80
- | `CodeplexIconoVideo` | `videocam` | `CodeplexIconoColeccion`| `collections` |
82
+ | `CodeplexIconoVideo` | `videocam` | `CodeplexIconoColeccion` | `collections` |
81
83
 
82
- ### 🏗️ Profesional e Industria
84
+ ### Estructura e Interfaz
83
85
  | Componente | Icono | Componente | Icono |
84
86
  | :--- | :--- | :--- | :--- |
85
- | `CodeplexIconoEdificio` | `apartment` | `CodeplexIconoHerramientas`| `home_repair_service`|
86
- | `CodeplexIconoCalculadora`| `calculate` | `CodeplexIconoMapa` | `map` |
87
- | `CodeplexIconoUbicacion`| `location_on` | `CodeplexIconoTrabajo` | `work` |
88
-
89
- ### 📐 Layout y Estructura
90
- | Componente | Icono | Componente | Icono |
91
- | :--- | :--- | :--- | :--- |
92
- | `CodeplexIconoDiseno` | `dashboard` | `CodeplexIconoBarraLateral`| `view_sidebar` |
87
+ | `CodeplexIconoDiseno` | `dashboard` | `CodeplexIconoBarraLateral` | `view_sidebar` |
93
88
  | `CodeplexIconoCaja` | `inbox` | `CodeplexIconoCuadricula` | `grid_view` |
94
89
  | `CodeplexIconoPila` | `layers` | `CodeplexIconoContenedor` | `view_quilt` |
95
90
 
96
91
  ---
97
92
 
98
- ## 🎨 Mejores Prácticas
93
+ ## Mejores Prácticas
99
94
 
100
- 1. **Semántica sobre Estética**: Usa `CodeplexIconoBorrar` en lugar de `CodeplexIcono` con nombre "delete" para mantener la consistencia en el mantenimiento.
101
- 2. **Relleno**: Activa `relleno` para estados activos o para dar mayor peso visual a una acción primaria.
102
- 3. **Escalado**: Al heredar de `Icon` de MUI, puedes usar el tema para el escalado automático: `<CodeplexIconoUsuario fontSize="large" />`.
95
+ 1. **Semántica sobre nombre**: usa `CodeplexIconoBorrar` en lugar de `<CodeplexIcono nombre="delete" />` para mantener la consistencia en el mantenimiento.
96
+ 2. **Relleno**: activa `relleno` para estados activos o acciones primarias.
97
+ 3. **Tamaño**: hereda el `fontSize` de MUI — usa `fontSize="large"` directamente en el componente.
103
98
 
104
- ## 📄 Licencia
99
+ ## Licencia
105
100
 
106
- Este proyecto es propiedad privada de **Codeplex SAC**. Todos los derechos reservados.
101
+ Propiedad privada de **Codeplex SAC**. Todos los derechos reservados.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codeplex-sac/iconos",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "type": "module",
5
5
  "main": "./index.js",
6
6
  "module": "./index.js",