Sådan bruges SVG-ikoner i React med React Icons og Awesome Font

Ikoner er en måde til visuelt at kommunikere begreber og mening uden brug af ord. Dette kan være til kategorisering, en handling eller endda en advarsel.

Hvordan kan vi tilføje ikoner ved hjælp af SVG til vores React-apps for at forbedre vores visuelle kommunikation?

  • Hvad er SVG?
  • Hvad gør SVG fantastisk til internettet?
  • Del 0: Oprettelse af en React-app
  • Del 1: Tilføjelse af SVG-ikoner med reaktive-ikoner
  • Del 2: Tilføjelse af SVG-filer manuelt til en React-komponent

Hvad er SVG?

SVG står for skalerbar vektorgrafik. Det er et filformat baseret på et markeringssprog svarende til XML, der giver udviklere og designere mulighed for at oprette vektorbaserede billeder ved hjælp af stigdefinitioner.

Hvad gør SVG fantastisk til internettet?

SVG blev født til internettet. Det er en åben standard, der blev oprettet af W3C for at give en bedre måde at tilføje billeder til internettet. Hvis du åbner en SVG-fil på din computer, kan du blive overrasket over at finde ud af, at det hele er kode!

Dette spiller en rolle i den lille filstørrelse. Typisk når du bruger SVG, kan du drage fordel af dens mindre størrelse sammenlignet med større billedfiler, der muligvis kræves for at levere den samme høje opløsning.

Derudover, da vi definerer SVG som stier, kan de skaleres så store eller så små, som vi vil. Dette gør dem ekstra fleksible til webbrug, især når de gør oplevelser lydhøre.

Hvad skal vi skabe?

Vi går først igennem ved hjælp af en pakke kaldet react-icons, der giver os mulighed for nemt at importere ikoner fra populære ikonsæt som Font Awesome lige ind i vores app.

Vi vil også se på, hvordan vi manuelt kan tilføje SVG-filer lige ind i vores app ved at kopiere koden til en SVG-fil lige ind i en ny komponent.

Del 0: Oprettelse af en React-app

Til denne gennemgang kan du bruge enhver React-ramme, du vil have, uanset om det er Opret React-app eller Next.js. Du kan endda bruge et eksisterende projekt.

Fordi vi ikke har brug for noget specielt for at tilføje vores ikoner, skal jeg bruge create-react-app.

For at komme i gang med create-react-app kan du oprette et nyt projekt ved hjælp af følgende kommando i din terminal:

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

Bemærk: erstat [project-name]med det navn, du vil bruge til dit projekt. Jeg skal bruge my-svg-icons.

Når du har din nye app eller din eksisterende app, skal vi være klar til at gå!

Del 1: Tilføjelse af SVG-ikoner med reaktive-ikoner

Tilføjelse af reaktionsikoner til dit projekt

For at komme i gang med react-ikoner, vil vi installere det i vores projekt.

Inde i dit projekt skal du køre følgende kommando:

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

Når det er afsluttet, skal vi være klar til at bruge det i vores projekt.

Valg af ikoner til et projekt

En af de seje ting ved reaktionsikoner er det omfattende bibliotek, de stiller til rådighed inden for den enkelte pakke.

Ikke kun har vi Font Awesome med det samme, vi har GitHubs Octicons, Heroicons, Material Design Icons og en hel masse mere.

Når du vælger ikoner, har du stort set evnen til at bruge ethvert ikon, du vil til enhver tid. Når det er sagt, vil jeg anbefale at forsøge at holde et ensartet udseende med dine ikoner.

Hvis du primært bruger Font Awesome til dit websted, kan det se lidt underligt og inkonsekvent ud, hvis du skulle begynde at tilføje flade farveikoner til blandingen. I sidste ende vil du give en oplevelse, som folk nemt kan identificere de mønstre, du opretter.

Brug af reaktive ikoner i dit projekt

Når du har fundet de ikoner, du vil bruge, kan vi nu føje dem til vores projekt.

react-icons hjemmeside gør det let for os at slå op på navnet på det ikon, vi vil bruge til at importere til vores projekt.

Hvis vi ønskede at bruge Font Awesome-raketikonet, kan vi navigere til Font Awesome i sidepanelet, søge på siden efter "raket" (CMD + F eller CTRL + F) og derefter klikke på ikonet, der kopierer navnet til dit udklipsholder.

Vi kunne også søge efter "raket" i søgeformularen øverst til venstre på siden, hvilket viser os resultatet "raket" gennem alle ikonsæt.

Inde i vores projekt kan vi nu importere ikonet. I lighed med instruktionerne øverst på siden med reaktionssymboler ønsker vi at importere det specifikke ikon fra det react-icons/fa, der refererer til Font Awesome-modulet med reaktionsikoner.

Tilføj følgende til toppen af ​​filen, du vil importere ikonet til. Hvis du bruger et nyt create-react-app-projekt, kan du tilføje det øverst på src/App.js.

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

Lad os erstatte React-logoet med vores ikon for at teste dette.

Fjern component and instead add:

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

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