Google Icon React

Definición del proyecto

google-icon-react es un paquete open source que publiqué en npm como creador y mantenedor. Se trata de un componente para React y Preact que permite mostrar los iconos con borde redondeado de Google Material Symbols en aplicaciones web de forma sencilla, diseñado para trabajar perfectamente con TailwindCSS. El objetivo del paquete es ofrecer a la comunidad una manera más ergonómica de integrar los iconos de Google sin tener que repetir el mismo boilerplate en cada proyecto.

Actividades realizadas

Diseño de la API del componente, definiendo las props necesarias (icon, fill, className, fontFamily, ariaLabel, onClick) para cubrir los casos de uso más habituales sin perder simplicidad.
Desarrollo del componente con TypeScript, asegurando un tipado claro tanto para React como para Preact.
Configuración de los puntos de entrada del paquete para exponer una versión específica para Preact (google-icon-react/preact) además de la versión por defecto para React.
Integración con la fuente @fontsource-variable/material-symbols-rounded como dependencia requerida, documentando cómo incluirla en distintos frameworks (Next.js, Vite/React y Astro).
Pruebas con Vitest para garantizar la estabilidad del componente y prevenir regresiones entre versiones.
Publicación del paquete en npm, versionado con Git y mantenimiento del repositorio en GitHub.
Documentación completa del paquete, con instrucciones de instalación, ejemplos de uso, tabla de props y configuraciones por framework.

Información adicional del proyecto

Instalación

npm install google-icon-react

bun add google-icon-react

Dependencia requerida

⚠️ Importante: para que el componente funcione correctamente, debes instalar e importar la fuente de iconos de Google Material Symbols:

npm install @fontsource-variable/material-symbols-rounded

bun add @fontsource-variable/material-symbols-rounded

Luego, importa la fuente en el archivo principal de tu aplicación (App.js, _app.js, layout.tsx, etc.):

import "@fontsource-variable/material-symbols-rounded"; // si solo quieres iconos sin fill
import "@fontsource-variable/material-symbols-rounded/fill.css"; // si quieres todas las variantes

Maneras de importar

Para React:

import GoogleIcon from "google-icon-react";

Para Preact:

import GoogleIcon from "google-icon-react/preact";

Uso básico

import GoogleIcon from "google-icon-react";

function App() {
    return (
        <div>
            <GoogleIcon icon="home" />
            <GoogleIcon icon="search" fill={true} />
            <GoogleIcon icon="settings" className="text-blue-500 text-2xl" />
        </div>
    );
}

Props

Prop	Tipo	Por defecto	Descripción
`icon`	`string`	-	Requerido. Nombre del icono de Material Symbols
`fill`	`boolean`	`false`	Si el icono debe estar relleno o no
`className`	`string`	`""`	Clases CSS adicionales (compatible con TailwindCSS)
`fontFamily`	`string`	`"Material Symbols Rounded Variable"`	Familia de fuente personalizada
`ariaLabel`	`string`	`"google icon"`	Etiqueta ARIA para accesibilidad
`onClick`	`() => void`	-	Función que se ejecuta al hacer clic en el icono

Ejemplos

Icono básico:

<GoogleIcon icon="favorite" />

Icono relleno:

<GoogleIcon icon="favorite" fill={true} />

Con estilos de TailwindCSS:

<GoogleIcon icon="star" fill={true} className="text-yellow-500 text-3xl hover:text-yellow-600 cursor-pointer" />

Con manejador de clic:

<GoogleIcon
    icon="add"
    onClick={() => console.log("¡Botón de añadir clickeado!")}
    className="text-green-500 hover:bg-green-100 p-2 rounded-full transition-colors"
/>

Con etiqueta de accesibilidad personalizada:

<GoogleIcon icon="delete" ariaLabel="Eliminar elemento" className="text-red-500" />

Configuración con diferentes frameworks

Next.js, en tu archivo _app.js o layout.tsx:

import "@fontsource-variable/material-symbols-rounded";
import "@fontsource-variable/material-symbols-rounded/fill.css";
import "./globals.css";

export default function Layout({ children }) {
    return (
        <html>
            <body>{children}</body>
        </html>
    );
}

Vite/React, en tu archivo main.tsx o App.tsx:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "@fontsource-variable/material-symbols-rounded";
import "@fontsource-variable/material-symbols-rounded/fill.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

Astro, en tu archivo de layout principal:

---
import '@fontsource-variable/material-symbols-rounded';
import '@fontsource-variable/material-symbols-rounded/fill.css';
---

<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <slot />
  </body>
</html>

Encontrar iconos

Puedes buscar los iconos disponibles en:

Simplemente usa el nombre del icono tal como aparece en la página oficial.

Características

Compatible con TypeScript.
Optimizado para TailwindCSS.
Accesible (soporte ARIA).
Iconos rellenos y con contorno.
Totalmente personalizable.
Sin dependencias externas (excepto React).
Tamaño de bundle mínimo.

Contribuir

Las contribuciones son bienvenidas. Puedes abrir un issue o un pull request en GitHub.

Resultados obtenidos

El paquete está publicado y disponible en npm, lo que permite a cualquier desarrollador integrarlo en sus proyectos de React o Preact con un solo comando. La API se mantuvo simple, compatible con TailwindCSS y con soporte para accesibilidad, lo que facilita su adopción en proyectos reales. Como mantenedor, el proyecto me ha permitido aprender sobre publicación, versionado y mantenimiento de paquetes open source, además de profundizar en TypeScript y en el diseño de APIs públicas reutilizables.

Conclusión

google-icon-react representa mi interés por contribuir al ecosistema open source publicando herramientas que otros desarrolladores puedan reutilizar. Mantener un paquete público implica responsabilidades distintas a las de un proyecto cerrado: documentar bien, mantener la compatibilidad y atender el feedback de la comunidad. Seguiré evolucionando el paquete con nuevas características, integrando feedback y mejorando su compatibilidad con más frameworks dentro del mundo de los paquetes en npm.