@codeplex-sac/icons 0.0.1
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.
- package/README.md +106 -0
- package/index.d.ts +1 -0
- package/index.mjs +4608 -0
- package/lib/icons.d.ts +104 -0
- package/package.json +24 -0
package/README.md
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
# @codeplex-sac/icons
|
|
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**.
|
|
4
|
+
|
|
5
|
+
## 🚀 Instalación
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @codeplex-sac/icons @mui/material @emotion/react @emotion/styled
|
|
9
|
+
```
|
|
10
|
+
|
|
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.
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## 🛠️ Componente Base: CodeplexIcono
|
|
17
|
+
|
|
18
|
+
`CodeplexIcono` es el bloque fundamental que permite renderizar cualquier icono de Google usando **ligaduras**.
|
|
19
|
+
|
|
20
|
+
### Propiedades (Props)
|
|
21
|
+
| Propiedad | Tipo | Por Defecto | Descripción |
|
|
22
|
+
| :--- | :--- | :--- | :--- |
|
|
23
|
+
| `nombre` | `string` | - | Nombre oficial del icono (ej: 'search', 'home'). |
|
|
24
|
+
| `relleno` | `boolean` | `false` | Activa el estilo sólido (FILL 1). |
|
|
25
|
+
| `sx` | `SxProps` | - | Estilos personalizados de MUI. |
|
|
26
|
+
|
|
27
|
+
**Uso:**
|
|
28
|
+
```tsx
|
|
29
|
+
import { CodeplexIcono } from '@codeplex-sac/icons';
|
|
30
|
+
|
|
31
|
+
<CodeplexIcono nombre="settings" color="primary" relleno />
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## 🏷️ Catálogo de Iconos Semánticos
|
|
37
|
+
|
|
38
|
+
Para garantizar la consistencia, el paquete expone componentes específicos para cada concepto de interfaz. Estos **no requieren** la prop `nombre`.
|
|
39
|
+
|
|
40
|
+
### ⚡ Acciones Comunes y Globales
|
|
41
|
+
| Componente | Icono | Componente | Icono |
|
|
42
|
+
| :--- | :--- | :--- | :--- |
|
|
43
|
+
| `CodeplexIconoBuscar` | `search` | `CodeplexIconoBorrar` | `delete` |
|
|
44
|
+
| `CodeplexIconoEditar` | `edit` | `CodeplexIconoGuardar` | `save` |
|
|
45
|
+
| `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` |
|
|
49
|
+
|
|
50
|
+
### 🛡️ Seguridad y Autenticación
|
|
51
|
+
| Componente | Icono | Componente | Icono |
|
|
52
|
+
| :--- | :--- | :--- | :--- |
|
|
53
|
+
| `CodeplexIconoSeguridad`| `security` | `CodeplexIconoCandado` | `lock` |
|
|
54
|
+
| `CodeplexIconoLlave` | `key` | `CodeplexIconoEscudo` | `shield` |
|
|
55
|
+
|
|
56
|
+
### 🚦 Estados y Feedback
|
|
57
|
+
| Componente | Icono | Componente | Icono |
|
|
58
|
+
| :--- | :--- | :--- | :--- |
|
|
59
|
+
| `CodeplexIconoExito` | `check_circle` | `CodeplexIconoInformacion`| `info` |
|
|
60
|
+
| `CodeplexIconoError` | `error` | `CodeplexIconoAyuda` | `help` |
|
|
61
|
+
| `CodeplexIconoAlerta` | `warning` | `CodeplexIconoProgreso` | `autorenew` |
|
|
62
|
+
|
|
63
|
+
### 💬 Comunicación y Social
|
|
64
|
+
| Componente | Icono | Componente | Icono |
|
|
65
|
+
| :--- | :--- | :--- | :--- |
|
|
66
|
+
| `CodeplexIconoCorreo` | `mail` | `CodeplexIconoTelefono` | `phone` |
|
|
67
|
+
| `CodeplexIconoCompartir`| `share` | `CodeplexIconoChat` | `forum` |
|
|
68
|
+
|
|
69
|
+
### 💰 Finanzas y Comercio
|
|
70
|
+
| Componente | Icono | Componente | Icono |
|
|
71
|
+
| :--- | :--- | :--- | :--- |
|
|
72
|
+
| `CodeplexIconoBilletera`| `account_balance_wallet`| `CodeplexIconoBanco` | `account_balance` |
|
|
73
|
+
| `CodeplexIconoMoneda` | `payments` | `CodeplexIconoCarrito` | `shopping_cart` |
|
|
74
|
+
| `CodeplexIconoPrecio` | `sell` | `CodeplexIconoRecibo` | `receipt` |
|
|
75
|
+
|
|
76
|
+
### 📸 Multimedia
|
|
77
|
+
| Componente | Icono | Componente | Icono |
|
|
78
|
+
| :--- | :--- | :--- | :--- |
|
|
79
|
+
| `CodeplexIconoImagen` | `image` | `CodeplexIconoCamara` | `photo_camera` |
|
|
80
|
+
| `CodeplexIconoVideo` | `videocam` | `CodeplexIconoColeccion`| `collections` |
|
|
81
|
+
|
|
82
|
+
### 🏗️ Profesional e Industria
|
|
83
|
+
| Componente | Icono | Componente | Icono |
|
|
84
|
+
| :--- | :--- | :--- | :--- |
|
|
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` |
|
|
93
|
+
| `CodeplexIconoCaja` | `inbox` | `CodeplexIconoCuadricula` | `grid_view` |
|
|
94
|
+
| `CodeplexIconoPila` | `layers` | `CodeplexIconoContenedor` | `view_quilt` |
|
|
95
|
+
|
|
96
|
+
---
|
|
97
|
+
|
|
98
|
+
## 🎨 Mejores Prácticas
|
|
99
|
+
|
|
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" />`.
|
|
103
|
+
|
|
104
|
+
## 📄 Licencia
|
|
105
|
+
|
|
106
|
+
Este proyecto es propiedad privada de **Codeplex SAC**. Todos los derechos reservados.
|
package/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './lib/icons';
|