Comment utiliser les icônes SVG dans React avec les icônes React et Font Awesome

Les icônes sont un moyen de communiquer visuellement des concepts et une signification sans utiliser de mots. Cela peut être pour une catégorisation, une action ou même un avertissement.

Comment pouvons-nous ajouter des icônes en utilisant SVG à nos applications React pour améliorer notre communication visuelle?

  • Qu'est-ce que SVG?
  • Qu'est-ce qui rend SVG génial pour le Web?
  • Partie 0: Créer une application React
  • Partie 1: Ajout d'icônes SVG avec des icônes de réaction
  • Partie 2: Ajout manuel de fichiers SVG à un composant React

Qu'est-ce que SVG?

SVG signifie Scalable Vector Graphics. C'est un format de fichier basé sur un langage de balisage similaire à XML qui permet aux développeurs et aux concepteurs de créer des images vectorielles en utilisant des définitions de chemin.

Qu'est-ce qui rend SVG génial pour le Web?

SVG est né pour le Web. Il s'agit d'une norme ouverte créée par le W3C pour fournir un meilleur moyen d'ajouter des images sur le Web. Si vous ouvrez un fichier SVG sur votre ordinateur, vous serez peut-être surpris de constater que tout est du code!

Cela joue un rôle dans la petite taille du fichier. En général, lorsque vous utilisez SVG, vous pouvez tirer parti de sa taille plus petite par rapport aux fichiers image plus volumineux qui pourraient être nécessaires pour fournir la même haute résolution.

De plus, puisque nous définissons SVG comme des chemins, ils peuvent évoluer aussi grand ou aussi petit que nous le voulons. Cela les rend plus flexibles pour l'utilisation du Web, en particulier lorsqu'ils rendent les expériences réactives.

Qu'allons-nous créer?

Nous allons d'abord utiliser un package appelé react-icons qui nous permettra d'importer facilement des icônes à partir de jeux d'icônes populaires tels que Font Awesome directement dans notre application.

Nous verrons également comment nous pouvons ajouter manuellement des fichiers SVG directement dans notre application en copiant le code d'un fichier SVG directement dans un nouveau composant.

Partie 0: Créer une application React

Pour cette procédure pas à pas, vous pouvez utiliser n'importe quel framework React de votre choix, que ce soit Create React App ou Next.js. Vous pouvez même utiliser un projet existant.

Parce que nous n'avons besoin de rien de spécial pour ajouter nos icônes, je vais utiliser create-react-app.

Pour démarrer avec create-react-app, vous pouvez créer un nouveau projet à l'aide de la commande suivante dans votre terminal:

yarn create react-app [project-name] # or npx create-react-app [project-name] 

Remarque: remplacez-le [project-name]par le nom que vous souhaitez utiliser pour votre projet. Je vais utiliser my-svg-icons.

Une fois que vous avez votre nouvelle application ou votre application existante, nous devrions être prêts à partir!

Partie 1: Ajout d'icônes SVG avec des icônes de réaction

Ajouter des icônes de réaction à votre projet

Pour commencer avec react-icons, nous voulons l'installer dans notre projet.

À l'intérieur de votre projet, exécutez la commande suivante:

yarn add react-icons # or npm install react-icons --save 

Une fois terminé, nous devrions être prêts à l'utiliser dans notre projet.

Sélection d'icônes pour un projet

L'une des choses intéressantes à propos des icônes de réaction est la vaste bibliothèque qu'elles mettent à disposition dans un seul paquet.

Non seulement Font Awesome est disponible immédiatement, mais nous avons les octicons, les héros, les icônes de conception matérielle de GitHub et bien d'autres.

Lorsque vous choisissez des icônes, vous avez à peu près la possibilité d'utiliser n'importe quelle icône de votre choix à tout moment. Cela dit, je recommanderais d'essayer de garder une apparence cohérente avec vos icônes.

Si vous utilisez principalement Font Awesome pour votre site Web, cela pourrait sembler un peu étrange et incohérent si vous deviez commencer à ajouter des icônes de couleur plate au mélange. En fin de compte, vous voulez offrir une expérience que les gens pourront facilement identifier les modèles que vous créez.

Utiliser des icônes de réaction dans votre projet

Une fois que vous avez trouvé les icônes que vous souhaitez utiliser, nous pouvons maintenant les ajouter à notre projet.

Le site Web de react-icons nous permet de rechercher facilement le nom de l'icône que nous voulons utiliser pour importer dans notre projet.

Si nous voulions utiliser l'icône de fusée Font Awesome, nous pouvons accéder à Font Awesome dans la barre latérale, rechercher sur la page "fusée" (CMD + F ou CTRL + F), puis cliquer sur l'icône qui copiera son nom dans votre presse-papiers.

Nous pourrions également rechercher «fusée» dans le formulaire de recherche en haut à gauche de la page, qui nous montre le résultat «fusée» dans tous les jeux d'icônes.

À l'intérieur de notre projet, nous pouvons maintenant importer cette icône. Semblable aux instructions en haut de la page des icônes de réaction, nous voulons importer cette icône spécifique à partir de react-icons/fa, qui fait référence au module Font Awesome des icônes de réaction.

Ajoutez ce qui suit en haut du fichier dans lequel vous souhaitez importer l'icône. Si vous utilisez un nouveau projet create-react-app, vous pouvez l'ajouter en haut de src/App.js.

import { FaRocket } from 'react-icons/fa'; 

Pour tester cela, remplaçons le logo React par notre icône.

Retirer le component and instead add:

And if we reload the page, we can see our rocket!

Original text


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 for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ? Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter
  • ? Sponsor Me