Zero React Icon Library

Zero React Icon Library es una colección de iconos SVG personalizables y listos para usar en proyectos de React. Con esta librería, puedes agregar fácilmente iconos vectoriales escalables y de alta calidad a tus aplicaciones React. Los iconos son completamente personalizables en tamaño, color (tanto de borde como de relleno) y ofrecen funcionalidades interactivas como hover y estado activo gracias al componente IconWrapper. Además, incluye componentes para renderizar banderas de países (FlagWrapper) e iconos de redes sociales (SocialWrapper), así como iconos de redes sociales con sus colores originales.

Características

• Basado en SVG para iconos y banderas escalables y de alta calidad, sin pérdida de resolución.
• Totalmente personalizable: Controla el tamaño (size para iconos sociales y generales, width y height para banderas), el color de trazo (stroke), el color de relleno (fill), y añade títulos accesibles (title) mediante props de React.
• Iconos Outline y Solid: Amplia variedad de iconos en dos estilos distintos para adaptarse a tus necesidades de diseño.
• Componente IconWrapper: Simplifica la implementación de efectos hover y estados activos para iconos, permitiendo el cambio dinámico entre las versiones Outline y Solid.
• Componente FlagWrapper: Permite renderizar banderas de países fácilmente utilizando códigos de país ISO 3166-1 alfa-2.
• Componente SocialWrapper: Permite renderizar iconos de redes sociales con un color personalizable.
• Iconos Original Social: Iconos de redes sociales con sus colores originales para importación directa.
• Optimizado: Convertimos los SVG a componentes React utilizando SVGR, asegurando un rendimiento óptimo y un tamaño de bundle reducido.
• Compatibilidad con TypeScript: Incluye archivos de declaración de tipo (.d.ts) para una experiencia de desarrollo fluida y segura con TypeScript.
• Licencia libre: Utiliza esta librería en tus proyectos personales y comerciales sin restricciones.

Instalación

Para instalar Zero React Icon Library en tu proyecto de React, ejecuta el siguiente comando en tu terminal:

npm install zero-react-icon-library
yarn add zero-react-icon-library

Uso
Importación de Iconos Individuales

Puedes importar iconos individuales directamente desde el paquete. Los nombres de los iconos siguen la convención NombreDelIconoOutline para los iconos de contorno y NombreDelIconoSolid para los iconos rellenos.
JavaScript

import { ArrowUpOutline, AcademicCapSolid } from 'zero-react-icon-library';

function App() {
  return (
    <div>
      <h1>Bienvenido a la librería de iconos</h1>
      <ArrowUpOutline size='10rem' color='blue' /> {/* Icono outline */}
      <AcademicCapSolid title={'AcademicCap'} size='10rem' fill='green' /> {/* Icono solid */}
    </div>
  );
}

export default App;

Uso del Componente IconWrapper para Interacciones y Estados

El componente IconWrapper es una forma poderosa y reutilizable de manejar la visualización de iconos, incluyendo la implementación de efectos hover y la representación de un estado activo (que puede cambiar el color o incluso mostrar la versión Solid del icono).

import { useState } from 'react';
import { IconWrapper } from 'zero-react-icon-library';

function App() {
  const [activeIcon, setActiveIcon] = useState('home');

  return (
    <div>
      <h2>Iconos con Interacción</h2>
      <IconWrapper
        name="Home" // Nombre base del icono (sin Outline/Solid)
        type="outline" // Tipo inicial del icono: 'outline' o 'solid'
        size="5rem"
        color="#333"
        hoverColor="skyblue"
        isActive={activeIcon === 'home'}
        activeColor="lime" // Color cuando isActive es true (si no se proporciona, usa el color normal)
        onClick={() => setActiveIcon('home')}
        style={{ margin: '10px', cursor: 'pointer' }}
      />
      {/* ... otros ejemplos de IconWrapper ... */}
    </div>
  );
}

export default App;

Uso del Componente FlagWrapper para Banderas

El componente FlagWrapper permite renderizar banderas de países utilizando los códigos ISO 3166-1 alfa-2.

import { FlagWrapper } from 'zero-react-icon-library';

function App() {
  return (
    <div>
      <h2>Banderas de Países</h2>
      <FlagWrapper name="BR" width="3em" title="Bandera de Brasil" />
      <FlagWrapper name="US" width="3em" title="Bandera de Estados Unidos" height="2em" />
      <FlagWrapper name="CO" width="3em" title="Bandera de Colombia" />
      {/* ... */}
    </div>
  );
}

export default App;

Uso del Componente SocialWrapper para Iconos de Redes Sociales

El componente SocialWrapper permite renderizar iconos de redes sociales con un color personalizado.

import { SocialWrapper } from 'zero-react-icon-library';

function App() {
  return (
    <div>
      <h2>Iconos de Redes Sociales</h2>
      <SocialWrapper name="Facebook" size="3em" color="#1877F2" title="Facebook" />
      <SocialWrapper name="Twitter" size="3em" color="#1DA1F2" title="Twitter" />
      <SocialWrapper name="Instagram" size="3em" color="#E4405F" title="Instagram" />
      {/* ... */}
    </div>
  );
}

export default App;

Importación de Iconos Original Social

Puedes importar directamente los iconos de redes sociales con sus colores originales.

import { FacebookOriginal, InstagramOriginal } from 'zero-react-icon-library/originalSocial';

function App() {
  return (
    <div>
      <h2>Iconos de Redes Sociales Originales</h2>
      <FacebookOriginal size="3em" title="Facebook Original" />
      <InstagramOriginal size="3em" title="Instagram Original" />
      {/* ... */}
    </div>
  );
}

export default App;

Props Props Comunes para Iconos Individuales

Cada componente de icono (importado directamente) soporta las siguientes propiedades:

size: string - Tamaño del icono (por defecto: '1em'). Cambia el width y height del SVG.
color: string - Color del trazo (borde) para los iconos Outline y el color principal para SocialWrapper.
fill: string - Color de relleno para los iconos Solid (y puede usarse en Outline).
title: string - Título accesible del icono para lectores de pantalla.
className: string - Clases CSS adicionales que se aplicarán al elemento <svg>.
style: object - Estilos en línea adicionales para el elemento <svg>.
...props: Permite pasar cualquier otra prop válida al elemento <svg>.

Props del Componente IconWrapper

El componente IconWrapper proporciona una forma sencilla de añadir interacciones y manejar estados para iconos:

name: string - Obligatorio. El nombre base del icono que deseas renderizar (ej: 'Home', 'ShoppingCart'). El IconWrapper intentará cargar la versión Outline o Solid según la prop type y el estado isActive.
type: 'outline' | 'solid' - Especifica el tipo de icono a renderizar inicialmente (por defecto: 'outline').
size: string - Tamaño del icono (por defecto: '1em').
color: string - Color normal del icono.
hoverColor: string - Color del icono al pasar el cursor por encima.
isActive: boolean - Indica si el icono está en estado activo. Si es true, el IconWrapper intentará renderizar la versión Solid del icono (si existe) y aplicará el activeColor. Si no existe la versión Solid, se mantendrá la versión inicial (type) con el activeColor.
activeColor: string - Color del icono cuando isActive es true.
onClick: function - Función que se ejecuta al hacer clic en el contenedor del icono.
className: string - Clases CSS adicionales que se aplicarán al div contenedor del icono.
style: object - Estilos en línea adicionales para el div contenedor del icono.
...rest: Permite pasar cualquier otra prop válida al div contenedor.

Props del Componente FlagWrapper

El componente FlagWrapper permite renderizar banderas:

name: string - Obligatorio. El código ISO 3166-1 alfa-2 del país cuya bandera deseas renderizar (ej: 'BR', 'US', 'CO').
width: string - Ancho de la bandera (por defecto: '48px').
height: string - Alto de la bandera (por defecto: '32px'). La altura se ajustará proporcionalmente para mantener la relación de aspecto de la bandera original.
title: string - Título accesible de la bandera para lectores de pantalla (por defecto: el valor de name).
className: string - Clases CSS adicionales que se aplicarán al elemento <svg>.
style: object - Estilos en línea adicionales para el elemento <svg>.
...props: Permite pasar cualquier otra prop válida al elemento <svg>.

Props del Componente SocialWrapper

El componente SocialWrapper permite renderizar iconos de redes sociales con un color personalizado:

name: string - Obligatorio. El nombre del icono de red social a renderizar (ej: 'Facebook', 'Twitter', 'Instagram').
size: string - Tamaño del icono (por defecto: '1em'). Cambia el width y height del SVG.
color: string - Obligatorio. El color con el que se renderizará el icono.
title: string - Título accesible del icono para lectores de pantalla (por defecto: el valor de name).
className: string - Clases CSS adicionales que se aplicarán al elemento <svg>.
style: object - Estilos en línea adicionales para el elemento <svg>.
...props: Permite pasar cualquier otra prop válida al elemento <svg>.

Ejemplo con IconWrapper y Cambio a Solid Activo

import { useState } from 'react';
import { IconWrapper } from 'zero-react-icon-library';

function Navigation() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <nav>
      <IconWrapper
        name="Home"
        size="2rem"
        color="#555"
        hoverColor="#007bff"
        isActive={activeTab === 'home'}
        activeColor="#007bff"
        onClick={() => setActiveTab('home')}
        style={{ margin: '0 10px', cursor: 'pointer' }}
      />
      {/* ... otros ejemplos de IconWrapper ... */}
    </nav>
  );
}

export default Navigation;

Ejemplo con FlagWrapper

import { FlagWrapper } from 'zero-react-icon-library';

function CountryInfo() {
  return (
    <div>
      <h2>Información de Países</h2>
      <p>Brasil: <FlagWrapper name="BR" width="2em" /></p>
      <p>Estados Unidos: <FlagWrapper name="US" width="2em" height="1.5em" /></p>
      <p>Colombia: <FlagWrapper name="CO" width="2em" /></p>
    </div>
  );
}

export default CountryInfo;

Ejemplo con SocialWrapper
JavaScript

import { SocialWrapper } from 'zero-react-icon-library';

function SocialLinks() {
  return (
    <div>
      <h2>Síguenos en Redes Sociales</h2>
      <SocialWrapper name="Facebook" size="2.5em" color="#3b5998" style={{ marginRight: '10px' }} />
      <SocialWrapper name="Twitter" size="2.5em" color="#1da1f2" style={{ marginRight: '10px' }} />
      <SocialWrapper name="LinkedIn" size="2.5em" color="#0077b5" />
    </div>
  );
}

export default SocialLinks;

Ejemplo con Iconos Original Social

import { Facebook, Instagram } from 'zero-react-icon-library/originalSocial';

function OriginalSocialIcons() {
  return (
    <div>
      <h2>Iconos Originales</h2>
      <Facebook size="3em" style={{ marginRight: '10px' }} />
      <Instagram size="3em" />
    </div>
  );
}

export default OriginalSocialIcons;

Contribución

¡Las contribuciones son bienvenidas! Si deseas agregar más iconos, banderas o iconos de redes sociales, mejorar la librería o corregir errores, por favor, sigue estos pasos:

Crea un fork del repositorio.
Crea una rama con tu funcionalidad (git checkout -b feature/nueva-funcionalidad).
Realiza tus cambios y haz commit (git commit -m 'Añade nueva funcionalidad').
Sube los cambios a tu rama (git push origin feature/nueva-funcionalidad).
Abre un Pull Request.