Usar un icono SVG en HTML, React y React Native, y cambiarle el color
Guía para desarrolladores: SVG inline o img, currentColor para temas, el SVG como componente React y react-native-svg en móvil.
Tienes un icono SVG, convertido o dibujado. Las preguntas que vienen después son siempre las mismas: cómo lo pongo en la página, cómo le cambio el color desde CSS y cómo uso el mismo archivo en una app de React Native. Aquí está el camino completo, con sus compromisos.
Paso 0: haz que el color sea controlable
Un SVG convertido tiene rellenos literales, por ejemplo fill="#0d1014". Para recolorearlo desde CSS, sustituye el relleno de las formas que quieras tematizar por currentColor. A partir de ahí el icono toma el color CSS de su elemento padre. Deja los colores literales en las partes que deben quedarse fijas, como un acento de marca.
- Icono de un solo color: sustituye cada relleno por currentColor.
- Icono de dos tonos: currentColor para la forma principal y un color literal o una variable CSS (fill="var(--accent)") para el acento.
- Quita los atributos width y height de la raíz, conserva el viewBox y dimensiona con CSS.
HTML puro: inline o img
Una etiqueta img (o un fondo CSS) es lo más simple: se cachea y no ensucia el HTML, pero el color no se puede cambiar desde CSS y currentColor no hace nada ahí. El SVG inline, pegado en el HTML, se puede estilizar y animar y cuesta unos cientos de bytes por uso. Regla práctica: inline para iconos que cambian de color o de estado; img para logos e ilustraciones que no cambian.
Ejemplo inline: pega el elemento svg en la página, pon color en un padre y todos los rellenos currentColor lo siguen. Para muchos iconos, mételos en un svg oculto como elementos symbol y referéncialos con use; el navegador pinta cada use con el color vigente en ese punto.
React: el icono como componente
Convierte el SVG en un componente para que acepte props. Pasa los nombres de atributo a camelCase (stroke-width pasa a strokeWidth, fill-rule a fillRule), quita el xmlns y esparce las props en la raíz para que className y aria-label lleguen. Una herramienta como SVGR hace exactamente esto desde la línea de comandos o como plugin del bundler, así que conservas los archivos .svg y los importas como componentes.
El color pasa a ser una cuestión de color CSS en el componente o en un padre, o de una prop color que fija el fill en la raíz. Para una biblioteca de iconos tematizable bastan currentColor y variables CSS; no hace falta ninguna biblioteca en tiempo de ejecución.
React Native: react-native-svg
Las vistas nativas no renderizan marcado SVG. El paquete react-native-svg ofrece Svg, Path, Circle y el resto de elementos como componentes. Convierte el archivo con SVGR y su preset native, que emite esos componentes en lugar de elementos DOM. El tamaño es explícito (props width y height, con el viewBox conservado) y el color es una prop fill en los elementos Path; el patrón habitual es una prop color en tu componente que se pasa a cada relleno que deba seguir el tema.
- Instala react-native-svg (Expo lo incluye).
- Ejecuta SVGR con la opción native para obtener un archivo de componente por icono.
- Mantén los degradados simples; react-native-svg admite lineales y radiales, pero cada uno necesita un bloque Defs, que SVGR genera por ti.
Mantén el archivo pequeño
Un icono debería ser un puñado de trazados. Si tu archivo convertido tiene decenas, la fuente tenía ruido o sombreado; conviértelo de nuevo en modo Logo con menos colores. svgize muestra el número de trazados junto a cada resultado, así que puedes comprobarlo antes de publicar. Pasa el archivo final por un optimizador como SVGO para quitar metadatos y acortar los números.