Los iconos son una forma de comunicar visualmente conceptos y significados sin el uso de palabras. Esto podría ser para categorización, una acción o incluso una advertencia.
¿Cómo podemos agregar íconos usando SVG a nuestras aplicaciones React para mejorar nuestra comunicación visual?
- ¿Qué es SVG?
- ¿Qué hace que SVG sea excelente para la web?
- Parte 0: Creando una aplicación React
- Parte 1: Agregar iconos SVG con react-icons
- Parte 2: agregar manualmente archivos SVG a un componente de React
¿Qué es SVG?
SVG son las siglas de Scalable Vector Graphics. Es un formato de archivo basado en un lenguaje de marcado similar a XML que permite a los desarrolladores y diseñadores crear imágenes basadas en vectores utilizando definiciones de ruta.
¿Qué hace que SVG sea excelente para la web?
SVG nació para la web. Es un estándar abierto que fue creado por W3C para proporcionar una mejor manera de agregar imágenes a la web. Si abre un archivo SVG en su computadora, se sorprenderá al descubrir que es todo código.
Esto juega un papel en el tamaño del archivo pequeño. Por lo general, cuando usa SVG, puede aprovechar su tamaño más pequeño en comparación con los archivos de imagen más grandes que pueden ser necesarios para ofrecer la misma alta resolución.
Además, dado que estamos definiendo SVG como rutas, pueden escalar tan grandes o tan pequeñas como queramos. Esto los hace más flexibles para el uso de la web, especialmente al hacer que las experiencias sean receptivas.
¿Qué vamos a crear?
Primero vamos a usar un paquete llamado react-icons que nos permitirá importar fácilmente íconos de conjuntos de íconos populares como Font Awesome directamente en nuestra aplicación.
También veremos cómo podemos agregar manualmente archivos SVG directamente en nuestra aplicación copiando el código de un archivo SVG directamente en un nuevo componente.
Parte 0: Creando una aplicación React
Para este tutorial, puede usar cualquier marco de React que desee, ya sea Create React App o Next.js. Incluso puede utilizar un proyecto existente.
Debido a que no necesitamos nada especial para agregar nuestros íconos, usaré create-react-app.
Para comenzar con create-react-app, puede crear un nuevo proyecto usando el siguiente comando en su terminal:
yarn create react-app [project-name] # or npx create-react-app [project-name] Nota: reemplácelo [project-name]con el nombre que desea usar para su proyecto. Voy a usar my-svg-icons.
Una vez que tenga su nueva aplicación o su aplicación existente, ¡deberíamos estar listos para comenzar!
Parte 1: Agregar iconos SVG con react-icons
Agregar iconos de reacción a su proyecto
Para comenzar con react-icons, queremos instalarlo en nuestro proyecto.
Dentro de su proyecto, ejecute el siguiente comando:
yarn add react-icons # or npm install react-icons --save Una vez que esté completo, deberíamos estar listos para usarlo en nuestro proyecto.
Seleccionar iconos para un proyecto
Una de las cosas interesantes de react-icons es la extensa biblioteca que ponen a disposición en un solo paquete.
No solo tenemos Font Awesome disponible de inmediato, también tenemos Octicons, Heroicons, Material Design Icons de GitHub y mucho más.
Al elegir íconos, prácticamente tiene la capacidad de usar cualquier ícono que desee en cualquier momento. Dicho esto, recomendaría intentar mantener una apariencia coherente con sus íconos.
Si usa principalmente Font Awesome para su sitio web, podría parecer un poco extraño e inconsistente si comenzara a agregar iconos de colores planos a la mezcla. En última instancia, desea brindar una experiencia en la que las personas puedan identificar fácilmente los patrones que crea.
Usando react-icons en su proyecto
Una vez que haya encontrado los íconos que desea usar, ahora podemos agregarlos a nuestro proyecto.
El sitio web de react-icons nos facilita buscar el nombre del ícono que queremos usar para importar a nuestro proyecto.
Si quisiéramos usar el ícono del cohete Font Awesome, podemos navegar a Font Awesome en la barra lateral, buscar en la página "rocket" (CMD + F o CTRL + F), y luego hacer clic en el ícono que copiará su nombre en su portapapeles.
También podríamos buscar "cohete" en el formulario de búsqueda en la parte superior izquierda de la página, que nos muestra el resultado "cohete" en todos los conjuntos de iconos.
Dentro de nuestro proyecto, ahora podemos importar ese icono. De manera similar a las instrucciones en la parte superior de la página react-icons, queremos importar ese icono específico de react-icons/fa, que se refiere al módulo Font Awesome de react-icons.
Agregue lo siguiente en la parte superior del archivo en el que desea importar el icono. Si usa un nuevo proyecto create-react-app, puede agregarlo al principio de src/App.js.
import { FaRocket } from 'react-icons/fa'; Para probar esto, reemplacemos el logotipo de React con nuestro ícono.
Quitar el
And if we reload the page, we can see our rocket!
Our rocket isn’t spinning like the React logo though, so let’s fix that.
Add the class .App-logo to the FaRocket component:
And the rocket should now be spinning!
But it’s also a little small. If we look inside of src/App.css, we’re setting the height of .App-logo to 40vmin. While that’s working, for our icon to fill the space, we need to also provide a width for it to fill.
Add the following to the .App-logo class to add a width:
width: 40vmin;
And while it’s probably a little too big now, we’re at a more appropriate size and we have our icon!
Follow along with the commit.
Part 2: Manually adding SVG files to a React component
Sometimes you don’t want to add a new library just to get an icon. Sometimes it’s a custom icon that’s not available in a public library.
Luckily with React, we can create a new SVG component pretty easily that allows us to add our custom SVG icons anywhere we want.
First, let’s find an icon.
While all Heroicons are available inside react-icons, let’s use it as an example since it’s easy to find and copy some SVG code.
Go to heroicons.com and search for an icon that you’d like to use for this example. I’m going to use “globe”.
After finding the icon you want, hover over that icon, where you’ll see options to copy that icon as SVG or JSX, and copy it as JSX.
With that icon copied, create a new file under src called Globe.js.
Inside of that file, we’re going to create a new component called Globe and paste in our SVG within that component.
import React from 'react'; const Globe = () => { return ( ) } export default Globe;
Note: when copying normal SVG to a React component, it might not work "as is". Sometimes SVG files include CSS classes or element attributes that aren't valid with JSX.
If you run into errors, try fixing the attributes and looking at the web console to see the warnings and errors React throws. Because we copied as JSX, we were able to make it work right away.
Now, go back to src/App.js and import our new component:
import Globe from './Globe';
Then we can replace our rocket icon with our new component:
And if we open up our browser, we can see our globe!
Though, it’s a little big.
We want to apply our .App-logo class to our Globe component, so we need to update that component to take a className prop.
Back at src/Globe.js, add a className prop argument:
const Globe = ({ className }) => {
Then, add a new prop with that className to the
component:
Now, we can update our Globe component in src/App.js to include that class:
And if we reload the page, we can see our logo is back at the right size and it’s spinning again!
Follow along with the commit.
Why don’t we include it as an img file?
While we can include it as an image file just like React does in the default create-react-app code, we get a few benefits from adding our SVG files “inline”.
For one, when adding SVG inline, we can access the different paths with CSS properties. This gives us more flexibility for customizing it dynamically.
It’s also going to provide fewer HTTP requests. The browser will know how to load that SVG, so we don’t need to bother the browser to request that file to include in the page.
That said, it’s still a valid option for adding an SVG file to the page.
- ? Follow Me On Twitter
- ? Subscribe To My Youtube
- ✉️ Sign Up For My Newsletter
- ? Sponsor Me
