Selector y Personalizador de Iconos SVG

Guía Rápida: Encontrando y Usando tus Iconos SVG

1. Realiza tu Búsqueda:
   • En el panel lateral "Buscar y Filtrar", introduce un término de búsqueda en el campo principal. Recuerda que las búsquedas deben ser en INGLÉS (ej. home, arrow left, shopping cart, data analysis, pdf file, user profile).
   • Ajusta el "Límite de Resultados" si deseas ver más o menos iconos por búsqueda.
   • Haz clic en " Buscar Iconos".
2. Explora los Resultados:
   • Los iconos encontrados aparecerán en la cuadrícula "Resultados de Búsqueda". Desplázate para verlos todos.
   • Pasa el cursor sobre un icono para ver su nombre completo (incluyendo el prefijo de la colección, ej. mdi:home).
   • Haz clic en el icono que te interese para seleccionarlo.
3. Personaliza el Icono Seleccionado:
   • Una vez seleccionado, la sección "Personalizar y Exportar" aparecerá (o se actualizará) mostrando el icono.
   • Tamaño: Usa el deslizador o el campo numérico para ajustar el tamaño en píxeles.
   • Color Primario: Haz clic en el recuadro de color para abrir el selector (Pickr) y elige el color deseado.
   • Grosor de Trazo: Ajusta este valor si el icono es de tipo "outline" o si su diseño permite modificar el grosor de sus líneas. Puede no tener efecto en iconos sólidos o "filled".
   • La "Previsualización" se actualizará en tiempo real con tus cambios.
4. Exporta tu Icono:
   • " Copiar Código SVG": Copia el código HTML completo del SVG al portapapeles.
   • " Descargar Archivo .SVG": Descarga el icono como un archivo .svg.
   • " Copiar como Data URI": Copia una representación Data URI del SVG, útil para CSS.
5. Gestiona tus Favoritos:
   • Con un icono seleccionado, haz clic en " Añadir a Favoritos" para guardarlo en el panel lateral.
   • Haz clic en un icono de tu lista de favoritos para cargarlo rápidamente en el panel de personalización.
   • Usa " Limpiar Todos los Favoritos" para borrar tu lista guardada (se almacena en tu navegador).

Recuerda: La calidad y la estructura interna de los SVG provienen de Iconify; la personalización de color y trazo se aplica de forma general y podría no afectar a todos los iconos de la misma manera si tienen múltiples colores o estructuras complejas.

Sobre Iconify y sus Colecciones

Iconify es un proyecto impresionante que unifica más de 100 colecciones de iconos, ofreciendo acceso a más de 150,000 iconos vectoriales bajo licencias de código abierto (principalmente). Es una solución universal para desarrolladores y diseñadores que buscan iconos consistentes y de alta calidad.

Algunas Colecciones Populares en Iconify (accesibles a través de esta herramienta):

• Material Design Icons (mdi): La extensa colección de Google para Material Design. Ej: mdi:home, mdi:account-circle.
• Font Awesome (fa-brands, fa-solid, fa-regular): Una de las bibliotecas de iconos más populares y versátiles. Ej: fa-brands:twitter, fa-solid:star.
• Bootstrap Icons (bi): Iconos diseñados para el framework Bootstrap, limpios y modernos. Ej: bi:search, bi:gear-fill.
• Tabler Icons (tabler): Una colección con un estilo distintivo y una gran variedad de iconos. Ej: tabler:settings, tabler:message-circle.
• Heroicons (heroicons-outline, heroicons-solid): Iconos de los creadores de Tailwind CSS. Ej: heroicons-solid:arrow-left.
• Feather Icons (feather): Iconos simples y elegantes con un enfoque en la ligereza. Ej: feather:download.
• Simple Icons (simple-icons): Una enorme colección de logos de marcas populares. Ej: simple-icons:google, simple-icons:apple.
• Y muchas, muchas más...

Cuando buscas, los resultados te mostrarán iconos de diversas colecciones. El nombre completo del icono (ej. mdi:home) incluye un prefijo (mdi) que identifica la colección. Esta herramienta recupera directamente el SVG desde la API de Iconify para cada icono que seleccionas.

Licencias: La mayoría de los iconos en Iconify son de código abierto (MIT, Apache 2.0, CC BY, etc.). Es tu responsabilidad verificar la licencia específica de la colección de iconos que elijas si tienes requisitos de atribución o uso comercial muy estrictos, aunque Iconify facilita esto al centrarse en iconos abiertos.

Preguntas Frecuentes (FAQ)

¿Necesito registrarme o pagar para usar los iconos de Iconify?

No. Iconify se centra en agregar colecciones de iconos de código abierto. Puedes usar los iconos que encuentres a través de esta herramienta de forma gratuita, respetando las licencias individuales de cada conjunto de iconos (la mayoría son muy permisivas, como MIT o CC).

¿Por qué mi búsqueda no devuelve resultados o son pocos?

Asegúrate de estar buscando con términos en INGLÉS, ya que la API de Iconify y los nombres de los iconos están principalmente en inglés. Prueba con sinónimos o términos más generales. También, verifica el "Límite de Resultados"; un límite bajo podría no mostrar todos los iconos disponibles para una búsqueda amplia.

¿Puedo usar estos iconos SVG en mis proyectos comerciales?

En la mayoría de los casos, sí. Iconify agrega predominantemente colecciones de iconos con licencias de código abierto que permiten el uso comercial (como MIT, Apache 2.0, SIL OFL, etc.). Sin embargo, es una buena práctica (y a veces un requisito de la licencia) verificar la licencia específica del conjunto de iconos original si tienes dudas o un uso muy sensible. Esta herramienta no muestra información de licencia individual por icono, pero puedes encontrarla en el sitio de Iconify o del conjunto de iconos.

¿Por qué la personalización de "Grosor de Trazo" no afecta a algunos iconos?

El grosor del trazo (stroke-width) solo tiene un efecto visible en iconos que están diseñados como "outline" (contorno) o que utilizan explícitamente trazos (stroke) en su estructura SVG en lugar de solo formas rellenas (fill). Muchos iconos son "filled" (rellenos sólidos) y no tienen un trazo que se pueda modificar de esta manera. La herramienta intenta aplicar el grosor, pero el diseño del SVG determinará si es aplicable.

¿Qué es una "Data URI" y para qué sirve?

Una Data URI (o URL de datos) es un esquema que permite incrustar datos (en este caso, el código SVG codificado en Base64) directamente dentro de una URL. Para iconos, esto significa que puedes usar la Data URI en lugares donde se espera una URL de imagen, como en CSS (background-image: url(data:image/svg+xml;base64,...);) o en etiquetas . La ventaja es que el icono se carga con el documento sin necesidad de una petición HTTP externa, lo que puede ser bueno para iconos pequeños y críticos.

¿El cambio de color afecta a todos los elementos del SVG?

La herramienta intenta aplicar el color seleccionado al atributo fill y stroke de los elementos principales del SVG. Para iconos simples de un solo color, esto suele funcionar bien. Sin embargo, para SVGs multicolores o con estructuras de color complejas (múltiples fills, fills específicos en elementos anidados), el cambio de color global puede no afectar a todas las partes o podría tener resultados inesperados. La edición de SVGs complejos requiere herramientas de edición de vectores más avanzadas.

¿Los iconos favoritos se guardan en mi cuenta de Optikit?

No, los iconos que guardas como favoritos se almacenan localmente en el LocalStorage de tu navegador. Son privados para ti en ese navegador y dispositivo específico. No están vinculados a ninguna cuenta de usuario de Optikit.

¿Cómo puedo saber de qué colección es un icono (ej. Font Awesome, Material Design)?

Cuando realizas una búsqueda y pasas el cursor sobre un icono en los resultados, el `title` del elemento te mostrará el nombre completo del icono, que incluye un prefijo de la colección. Por ejemplo, mdi:home significa que el icono "home" es de la colección "Material Design Icons" (mdi). fa-solid:star es de Font Awesome Solid.

¿La búsqueda diferencia entre mayúsculas y minúsculas?

Generalmente, la API de Iconify no diferencia estrictamente entre mayúsculas y minúsculas para las palabras clave de búsqueda, pero es una buena práctica usar minúsculas para los términos de búsqueda.

¿Puedo solicitar la inclusión de una nueva colección de iconos?

Esta herramienta utiliza la API de Iconify, por lo que las colecciones disponibles dependen de las que Iconify integre. Puedes consultar el sitio de Iconify (iconify.design) para ver todas las colecciones soportadas y, si hay alguna que te gustaría ver allí, tendrías que sugerírsela al proyecto Iconify directamente.

Si la API de Iconify está caída, ¿funcionará la herramienta?

Si la API de Iconify (api.iconify.design) no está disponible, la búsqueda de nuevos iconos y la carga de los SVG crudos no funcionarán. Sin embargo, la funcionalidad de favoritos (si ya tienes iconos guardados localmente) y la personalización de un icono cuyo SVG ya se haya cargado previamente podrían seguir funcionando parcialmente.