Iconos SVG en React con componentes

Cursos Empresas Blog Live Conf Precios

Contenido del curso

No sé dónde empezar

Introducción y requisitos

1
Qué construirás con React JS
06:35 min

Maquetación con React.js

Interacción con React.js

Librería de Iconos Personalizados

Herramientas avanzadas: escalabilidad, organización y persistencia

Deploy

Próximos pasos: React #UnderTheHood

Bonus: creando proyectos en React desde cero

Tomar examen

Iconos SVG en React con componentes

Resumen

Tu app de to-dos en React ya reacciona a los clics, pero todavía se ve fea: una V para completar, una X para borrar, puro texto plano. Para llevarla a nivel portafolio necesitas iconos SVG bien implementados. Aquí verás cómo agregar iconos en React, ya sea con la librería React Icons o creando tu propia librería de iconos personalizados.

¿Cuándo conviene usar React Icons y cuándo crear tu propia librería?

La decisión depende de si tu equipo de diseño tiene iconos propios o si puedes apoyarte en sets ya existentes.

React Icons es la opción más rápida y popular. Importas el componente, lo usas y listo. Incluye repertorios enormes:

Ant Design, ideal si te gusta ese estilo limpio.
Bootstrap y Font Awesome, clásicos infaltables.
Octicons de GitHub y Material Design.
Hasta los iconos de Visual Studio Code.

Ahora, si tu equipo diseñó SVGs propios, te toca usarlos. No puedes meter un icono random de otra librería porque rompe la identidad visual. Ese es el caso de la app de to-dos: el equipo de diseño entregó dos archivos, check.svg y delete.svg, y hay que integrarlos creando una librería personalizada [03:45].

¿Qué es React Icons? Es una librería que centraliza iconos de múltiples sets como Material Design, Font Awesome o Bootstrap, y los expone como componentes React listos para importar.

¿Cómo importar SVG en React con Create React App?

Create React App incluye soporte nativo para importar SVGs como componentes. La sintaxis es muy específica y hay que respetarla.

Primero arrastras tus archivos .svg a la carpeta src. Importante: si tu SVG tiene la propiedad fill con un color fijo, quítasela. Así puedes pasarle el color dinámicamente desde React más adelante.

Luego importas con esta sintaxis:

js import { ReactComponent as CheckSVG } from './check.svg'; import { ReactComponent as DeleteSVG } from './delete.svg';

El truco está en ReactComponent. Así lo diseñaron los creadores de Create React App. Cuando importas varios SVGs en el mismo archivo, usas exports nombrados renombrando cada uno (CheckSVG, DeleteSVG) para evitar conflictos [10:20].

¿Cómo crear componentes de iconos reutilizables en React?

La idea es centralizar la lógica en un solo componente, TodoIcon, y que CompleteIcon y DeleteIcon solo le pasen propiedades.

Estructura de los componentes hijos

Cada icono específico delega el trabajo pesado a TodoIcon y solo le indica qué tipo y color quiere:

jsx import React from 'react'; import { TodoIcon } from './TodoIcon';

function CompleteIcon() { return <TodoIcon type="check" color="gray" />; }

export { CompleteIcon };

Lo mismo aplica para DeleteIcon, pero con type="delete". Nombrar los componentes por su funcionalidad (CompleteIcon, DeleteIcon) en lugar de su forma (XIcon, VIcon) es buena práctica: el nombre describe qué hace, no cómo se ve.

Clases dinámicas con className

Dentro de TodoIcon, usas un span con className dinámico para que el CSS posicione cada icono correctamente:

jsx {/* SVG aquí */}

Si recibes type="delete", se renderiza la clase Icon-svg--delete. Si recibes check, se renderiza Icon-svg--check. Cada clase aplica una posición distinta: arriba a la derecha o a la izquierda del to-do.

¿Cómo renderizar varios SVG según una prop sin condicionales complejos?

Usar un if o un ternario funciona con dos opciones, pero se vuelve ilegible si agregas más iconos. La solución elegante es un objeto que mapea tipos a componentes.

jsx const iconTypes = { check: <CheckSVG className="Icon-svg" fill="gray" />, delete: <DeleteSVG className="Icon-svg" fill="gray" />, };

function TodoIcon({ type }) { return ( {iconTypes[type]} ); }

Una línea por cada tipo de icono. Si mañana agregas un tercer SVG, solo sumas otra entrada al objeto. Sin if, sin switch, sin spaghetti.

¿Cómo cambiar el color de un SVG en React? Quita el atributo fill del archivo SVG original y pásalo como prop al componente importado. Así el color se vuelve dinámico y reutilizable.

¿Por qué usar un objeto en lugar de if/else para renderizar componentes? Porque escala mejor: agregar un nuevo caso es una línea, no un bloque condicional, y el código queda más legible.

Habilidades y conceptos que se trabajaron en la clase

Más allá del paso a paso, hay ideas que vale la pena retener para tus próximos proyectos.

Importación de SVG como componentes con ReactComponent de Create React App, una sintaxis exclusiva de esa herramienta [10:20].
Exports nombrados con alias (as CheckSVG) para evitar colisiones cuando importas archivos con el mismo nombre exportado.
Composición de componentes: CompleteIcon y DeleteIcon son envoltorios delgados sobre TodoIcon, lo que centraliza la lógica visual.
Props como configuración: pasar type y color permite que un mismo componente cambie de comportamiento sin duplicar código.
className dinámico con template literals: combinar clases fijas con valores de props dentro de comillas invertidas.
Patrón de objeto-mapa para condicionales: una alternativa limpia al if/else cuando tienes múltiples casos paralelos, técnica vista también en el Curso Práctico de JavaScript [13:50].
Limpieza de SVGs antes de importarlos: quitar fill para controlar el color desde React.

¿Vas a usar React Icons o crear tu propia librería de iconos? Cuéntame en los comentarios qué set te gusta más y cómo organizas tus SVGs en proyectos React.

Comentarios

José Fabián Beltrán Meza

Estudiante

Esto se veía muy feo

osman Perez

Estudiante

jjajajajajaj

Camilo Andrés Granda Cortés

Estudiante

Así lo hice con React Icons:

Primero instalé react Icons

npm install react-icons --save

despues hice el componente DeleteIcon.js.

despues hice el componente CompleteIcon.js.

despues modifiqué el TodoItem.js

y en el css de TodoItem.css

eso es todo. la cuestion es que no sé que tan válido sea.

Alejandro Calderón

Estudiante

Me gusta mucho como quedo el apartado visual.

Julio Peña

Estudiante

Eres un crack, me parece una solución muy buena!

Enrique Villalobos Andrade

Estudiante

React icons: https://react-icons.github.io/react-icons/

Comando:

npm install react-icons --save

Daniel Moreno

Estudiante

en que archivo pegamos esa linea?

Jesus Alejandro Gutierrez Guevara

Estudiante

en vs code abre la consola integrada para la carpeta en donde tienes el proyecto, y ejecutas ese comando

Leopoldo Martinez

Estudiante

Para los que lo estan haciendo con la libreria de react-icons les recomiendo no usar el archivo TodoIcons.js, aumenta la complejidad del codigo. En lugar de eso creen los componentes de cada icono por separado y usenlos directamente sobre su componente TodoItem de esta manera

CompleteTodo.js

import React from 'react'
import {RxCheck} from 'react-icons/rx'


const CompleteIcon = (props) => {
    const {className, onClick} = props
  return (
    <RxCheck
        className={className}
        onClick={onClick}
    />
  )
}

export {CompleteIcon}

DeleteTodo.js

import React from 'react'
import {RxCross1} from 'react-icons/rx'

const DeleteIcon = (props) => {
    const {className, onClick} = props
  return (
    <RxCross1
        className={className}
        onClick={onClick}
    />
  )
}

export {DeleteIcon}

TodoItem

import React from "react";
import "../styles/TodoItem.css";
import { CompleteIcon } from "./CompleteIcon";
import { DeleteIcon } from "./DeleteIcon";

const TodoItem = (props) => {
  const { text, completed, onToggle, onDelete } = props;

  return (
    <li className="TodoItem">
      <div className={`check-container ${completed && "completed"}`}>
        <CompleteIcon
          className={`check ${completed && "completed"}`}
          onClick={onToggle}
        />
      </div>
      <p className={`todo ${completed && "completed"}`}>{text}</p>
      <div className="closer-container">
        <DeleteIcon className="closer" onClick={onDelete} />
      </div>
    </li>
  );
};

export { TodoItem };

Lucia Rodriguez

Estudiante

solucionen los problemas que tienen con la carga de las clases, es imposible estudiar y entender un concepto si cada minuto y medio se pausa la clase y tengo que esperar otros tres minutos para que cargue. Paso una hora con cada clase

Chanel Mariannis Paredes Sánchez

Estudiante

Encarecidamente Platzi!!

Santiago Quintana

Estudiante

el cambio de servidor me salvo, si estaba lento

Facundo Castro

Estudiante

Hasta ahora sigo usando la versión gratuita de FontAwesome. Por ahora, funciona como debe funcionar.

npm i @fortawesome/fontawesome-svg-core 
npm i @fortawesome/free-regular-svg-icons
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome

Luis Fernando Montoya Garcia

Estudiante

Para los que no pudieron usar los icons aqui les dejo una lista de lo que podrian hacer para usar los iconos de la pagina "React icons"

Paso 1. Instala React Icons Si aun no lo has hecho, instala React Icons en tu proyecto

npm install react-icons

Importa el icono en tu componente: En tu archivo donde estás trabajando (supongamos que es un componente de React), importa el icono que deseas usar:

import React from 'react';
import { CiAlignCenterH } from "react-icons/ci";

Usa el icono dentro de tu JSX: Integra el icono dentro del elemento span en tu JSX:

<p><span><CiAlignCenterH/></span></p>

Espero te pueda servir.....!!!!!

Nick Jonathan Silva Riascos

Estudiante

Para los que quieran usar react icons los importan tal cual como lo hacen en el video con los SVG , solo que usan el nombre del icono definido por la librería.

import { BsCheck } from "react-icons/bs";
import { TiDelete } from "react-icons/ti";

const iconType = {
    'check': <BsCheck/>,
    'delete': <TiDelete/>
};

function TodoIcon({type}) {
    return <span className={`icon icon-${type}`}>
        {iconType[type]}
    </span>
}

export { TodoIcon };
```import { BsCheck } from "react-icons/bs";import { TiDelete } from "react-icons/ti";
const iconType = {    'check': \<BsCheck/>,    'delete': \<TiDelete/>};
function TodoIcon({type}) {    return \<span className={`icon icon-${type}`}>        {iconType\[type]}    \</span>}
export { TodoIcon };

Rodrigo Damián Martinez

Estudiante

Me salvaste, no sabia como avanzar y solo tenia que usar el nombre del icono definido por la librería.

Gian HM

Estudiante

Si estan usando react-icons, se realiza de la siguiente manera y es más facil

import { BsCheckCircleFill } from "react-icons/bs";
import { BsFillXCircleFill } from "react-icons/bs";
import './TodoItem.css'

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <span
        className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}
        onClick={props.onComplete}
      >
        <BsCheckCircleFill />
      </span>
      <p className={`TodoItem-p ${props.completed && "TodoItem-p--complete"}`}>{props.text}</p>
      <span
        className="Icon Icon-delete"
        onClick={props.onDelete}
      >
        <BsFillXCircleFill />
      </span>
    </li>
  );
}

export { TodoItem };
```import { BsCheckCircleFill } from "react-icons/bs";import { BsFillXCircleFill } from "react-icons/bs";import './TodoItem.css'
function TodoItem(props) {  return (    \<li className="TodoItem">      \<span        className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}        onClick={props.onComplete}      >        \<BsCheckCircleFill />      \</span>      \<p className={`TodoItem-p ${props.completed && "TodoItem-p--complete"}`}>{props.text}\</p>      \<span        className="Icon Icon-delete"        onClick={props.onDelete}      >        \<BsFillXCircleFill />      \</span>    \</li>  );}
export { TodoItem };

Juan Pablo Berrio Berrio

Estudiante

totalmente, que complejo es ponerse a dar vueltas y vueltas cuando puedes hacerlo mas sencillo y rapido

Chanel Mariannis Paredes Sánchez

Estudiante

Super!

Javier Andrés Portilla Rosero

Estudiante

Quedé un poco perdido en cómo se estaba haciendo antes pero lo probé de esta manera y quisiera compartirlo :D

TodoItem.js

import './TodoItem.css';
import { DeleteIcon } from "./DeleteIcon";
import { CompleteIcon } from "./CompleteIcon";

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <CompleteIcon completed={props.completed} onComplete={props.onComplete} />
      <p className={`TodoItem-p ${props.completed && "TodoItem-p-completed"}`}>{props.text}</p>
      <DeleteIcon onDelete={props.onDelete} />
    </li>
  );
}
export { TodoItem };

A continuación CompleteIcon.js

import { GiChainedArrowHeads } from "react-icons/gi";
import React from 'react'

export const CompleteIcon = (props) => {
  return (
    <GiChainedArrowHeads
    className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}
    onClick={props.onComplete}
    />
  )
}

A continuación DeleteIcon.js

import React from 'react'
import {GiAnticlockwiseRotation} from "react-icons/gi";

export const DeleteIcon = (props) => {
  return (
    <GiAnticlockwiseRotation
    className={"Icon Icon-delete"}
    onClick={props.onDelete}
    />
  )
}

Jesús Vivas

Estudiante

Me sirvio esta solucion :), gracias

SANTIAGO CANO GONZALEZ

Estudiante

Hasta este momento les queria compartir como realice la app. Utilizando emojis jajajaj

Me gusto bastante agregarle nuevos estilos, pero me genera curiosidad, ahora que entendemos mejor los estados. ¿Cómo evitar los dupliacados de arreglos para diferentes operaciones y de ser posible implementar buenas practicas en react?

Pero como todo, con la practica podemos aprender un monton. Muchas gracias!

Juan Castro

Profesor

A qué te refieres con los duplicados de arreglos, Santi?

Antonio Pineda

Estudiante

Yo lo pude hacer de otra manera:

function TodoIcon({ type }) { return ( {type === 'check' && <Check />} {type === 'delete' && <Delete />}

    </span>
);

}

Donovan RM

Estudiante

Bueno revisando los comentarios y lo aprendido en clase logré ambos usos uno con el svg local y otro importando la libreria de react:

npm install react-icons --save

el TodoItem.js

import { DeleteIcon } from './DeleteIcon'
import { CheckIcon } from './CheckIcon'
import './TodoItem.css'

function TodoItem (props) {

    return(
      <li className="TodoItem">
        <label>
          <CheckIcon 
              completed={props.completed}
              onClick={props.onComplete}
          />          
          <p 
            className={`TodoItem-p ${props.completed ? 'TodoItem-p--complete' : ''}`}>
            {props.text}
          </p>
        </label>
        <DeleteIcon 
          onClick = {props.onDelete}  
        />
        
        
      </li>
    );
  }
  export { TodoItem };

el TodoIcon.js:

import { ReactComponent as DeleteSVG } from './quit.svg';
import { BsClipboardCheck } from 'react-icons/bs';


const iconTypes = {
    "check": <BsClipboardCheck />,
    "delete": <DeleteSVG />,
};

function TodoIcon({ type , onClick , completed}) {
    return (
        <span
            className={`Icon Icon-${type} ${completed ? `Icon-${type}--active` : ''}`}
            onClick = {onClick}
        >
            {iconTypes[type]}
        </span>
    )
}

export { TodoIcon };

el CheckIcon.js

import React from 'react';
import { TodoIcon } from './TodoIcon'

function CheckIcon({ completed, onClick}) {
    return (
        <TodoIcon 
            type="check"
            color="gray"
            completed = {completed}
            onClick={onClick}
        />
    );
}

export { CheckIcon };

y el que vimos en clase DeleteIcon.js

import React from 'react';
import { TodoIcon } from './TodoIcon'

function DeleteIcon({onClick}) {
    return (
        <TodoIcon 
            type="delete"
            color="gray"
            onClick={onClick}
        />
    );
}

export { DeleteIcon };

Espero les sirva un poco

Donovan RM

Estudiante

Les envio el Repo https://github.com/IngDonovan/list-todo-react.git

Rubén Ernesto Aragón Gil

Estudiante

Tip:

Cuando vayas a importar un useEffect, useState, useRef no hagas esto:

import React, { useEffect, useState } from "react";

Mejor déjalo así:

import { useEffect, useState } from "react";

Que se quitó, pues, el React. Porque agregar este mismo es redundante.

Andrés Soret Chacin

Estudiante

En esta sección, nos enfocaremos en personalizar íconos en ReactJS para mejorar la apariencia de nuestra aplicación. Utilizaremos una librería de íconos llamada React Icons, aunque también exploraremos cómo crear nuestra propia librería de íconos para íconos personalizados. A continuación, detallamos los pasos:

Librería React Icons

React Icons: Una herramienta popular que facilita la integración de íconos en proyectos React.
Permite la importación sencilla de íconos como componentes, brindando una amplia variedad de opciones, como íconos de Andesign, Bootstrap, Fontosom, GitHub Octicons, Material Design, entre otros.
Se puede integrar fácilmente en aplicaciones React, haciendo que la visualización de íconos sea tan simple como importar y utilizar un componente.

Creación de Íconos Personalizados

Aunque React Icons proporciona una amplia gama de íconos, en algunos casos, es necesario trabajar con íconos personalizados diseñados específicamente para el proyecto.
En el ejemplo, se menciona que el equipo de diseño compartió íconos en formato SVG llamados check.svg y delete.svg.
La personalización de íconos también implica gestionar su posición y color, lo cual se abordará dinámicamente mediante React.

Implementación en ReactJS

Crear Archivo de Iconos Personalizados (todoicon.js):
- Se crea un archivo central para manejar la lógica de los íconos personalizados.
- Este archivo permite importar íconos específicos según el tipo y aplicar propiedades como el color.
Componentes CompleteIcon y DeleteIcon:
- Se crean componentes específicos (CompleteIcon.js y DeleteIcon.js) que importan íconos personalizados y especifican el tipo y el color.
- La personalización incluye el uso de React para manejar dinámicamente la clase de estilo y los sbg.
Lógica de Estilo y Posición:
- Se emplea una lógica sencilla para asignar clases dinámicas y aplicar estilos CSS según el tipo de ícono.
- La propiedad type decide qué ícono renderizar, y las clases de estilo (icon-check o icon-delete) gestionan su posición.
Integración en la Aplicación:
- Se integran los componentes CompleteIcon y DeleteIcon en la aplicación principal.
- Se establecen propiedades como type y color para personalizar la apariencia de los íconos según las necesidades del proyecto.

Próximos Pasos

Continuar explorando y personalizando íconos según el diseño del proyecto.
Adaptar y mejorar la aplicación para cumplir con los estándares de presentación y usabilidad.
Considerar la posibilidad de utilizar React Icons para íconos estándar o explorar otras bibliotecas de íconos populares en el ecosistema de React.

Este enfoque en la personalización de íconos proporciona flexibilidad y control sobre la apariencia de la aplicación, permitiendo adaptarse a los requisitos específicos del proyecto.

Willie David Roa Hidalgo

Estudiante

🙃 Los que estén oscuros sobre SVG, entren acá. 🙂

Fernando Labastida Vázquez

Estudiante

Yo lo hice así con React Icons

Nataly Fernandez

Estudiante

duuudeee, y yo importando desde google fonts 😂😂

yeferson soto

Estudiante

tengo una pregunta uso como empaquetador a vite.js y no puedo usar ReactComponent con los svg que soluciones me pueden dar ya que al momento de compilar no funciona no reconoce ReactComponent help plis

Juan Castro

Profesor

Mira: https://dev.to/cassidoo/importing-svg-files-as-react-components-with-vite-l3n

yeferson soto

Estudiante

You should use @svgr/rollup instead of vite-plugin-svgr. vite-plugin-svgr is not a good choice, because it doesn't support svgo, and it use esbuild to transform some svg code, it may have some problem in es5 environment.

The worst thing is vite-plugin-svgr can't add svgo plugin, see this issue: https://github.com/pd4d10/vite-plugin-svgr/issues/49.

//en vite.config.js add:

import svgr from '@svgr/rollup';

export default defineConfig({ plugins: [react(), svgr()] });

Michael Vega

Estudiante

Use tailwindcss para darle más estilo y use react-icons con fontawesome 6.

Introducción y requisitos

Qué construirás con React JS

Maquetación con React.js

Componentes y JSX en React desde cero

Componentes de TODO Machine

¿Cómo se comunican los componentes? Props y atributos

Estilos CSS en componentes de React

Interacción con React.js

Eventos onClick y onChange en React JS

¿Qué es el estado?

Contando TODOs

Filtrar TODOs con estados derivados en React

Completar y eliminar to-dos con eventos React

Librería de Iconos Personalizados