ci4admin.test

Heroicons es un conjunto de íconos gratuitos y de código abierto diseñados para integrarse perfectamente en aplicaciones web y móviles. Están desarrollados por el equipo de Tailwind Labs, los creadores de Tailwind CSS. Los íconos tienen un diseño moderno, limpio y minimalista, lo que los hace ideales para interfaces de usuario (UI).

Características principales:

Estilo Consistente:
- Diseñados para complementar interfaces limpias y modernas.
- Disponibles en dos estilos:
  - Outline: Líneas delgadas y minimalistas, ideales para íconos menos prominentes.
  - Solid: Íconos rellenos que destacan más en la interfaz.
Optimización:
- Cada ícono es SVG, lo que asegura alta calidad y escalabilidad en cualquier resolución.
- Los archivos SVG son ligeros, lo que mejora el rendimiento en aplicaciones.
Compatibilidad con Tailwind CSS:
- Diseñados pensando en la integración directa con Tailwind CSS, lo que facilita su personalización con clases como h-6 w-6 para tamaño o text-gray-500 para color.
Código Abierto:
- Licencia MIT, lo que significa que son gratuitos para uso personal y comercial.
Accesibilidad:
- Se pueden usar junto con atributos como aria-hidden="true" o agregar títulos para mejorar la accesibilidad.

Cómo usar Heroicons:

Descarga directa:
- Puedes descargar todos los íconos desde el sitio web oficial de Heroicons.

Uso con SVG:

Copia y pega el código SVG directamente en tu proyecto. Ejemplo:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>

Uso con Tailwind CSS:

Personaliza los íconos con clases Tailwind:

<svg class="w-8 h-8 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
</svg>

Con herramientas de terceros:
- Heroicons se puede integrar fácilmente con bibliotecas y frameworks como React, Vue, Angular, y más. Ejemplo en React:
- ```
import { PlusIcon } from '@heroicons/react/outline';

function MyComponent() {
    return <PlusIcon className="h-6 w-6 text-gray-500" />;
}
```

Categorías comunes de íconos:

Navegación: Flechas, menús, botones de retroceso.
Acciones: Añadir, editar, eliminar.
Estados: Alertas, confirmaciones, errores.
Medios: Play, pausa, volúmenes.
Otros: Cajas de búsqueda, íconos de usuario, configuraciones.

Heroicons es una herramienta esencial para desarrolladores que buscan íconos de alta calidad, fáciles de usar y personalizables para sus aplicaciones. ?

Características principales:

Cómo usar Heroicons:

Categorías comunes de íconos:

Title