Cum se utilizează pictogramele SVG în React cu pictogramele React și Font Awesome

Icoanele sunt o modalitate de a comunica vizual concepte și semnificații fără a folosi cuvinte. Acest lucru ar putea fi pentru clasificare, o acțiune sau chiar un avertisment.

Cum putem adăuga pictograme folosind SVG în aplicațiile noastre React pentru a ne îmbunătăți comunicarea vizuală?

  • Ce este SVG?
  • Ce face SVG-ul excelent pentru web?
  • Partea 0: Crearea unei aplicații React
  • Partea 1: Adăugarea de pictograme SVG cu pictograme de reacție
  • Partea 2: Adăugarea manuală a fișierelor SVG la o componentă React

Ce este SVG?

SVG înseamnă Grafică vectorială scalabilă. Este un format de fișier bazat pe un limbaj de markup similar XML, care permite dezvoltatorilor și proiectanților să creeze imagini pe bază de vectori folosind definiții de cale.

Ce face SVG-ul excelent pentru web?

SVG s-a născut pentru web. Este un standard deschis care a fost creat de W3C pentru a oferi o modalitate mai bună de a adăuga imagini pe web. Dacă deschideți un fișier SVG pe computer, s-ar putea să fiți surprinși să aflați că totul este cod!

Aceasta joacă un rol în dimensiunea redusă a fișierului. De obicei, atunci când utilizați SVG, puteți profita de dimensiunea sa mai mică în comparație cu fișierele de imagine mai mari care ar putea fi necesare pentru a oferi aceeași rezoluție înaltă.

În plus, din moment ce definim SVG ca căi, acestea pot scala atât de mari sau de mici pe cât dorim. Acest lucru le face extrem de flexibile pentru utilizarea web, mai ales atunci când experiențele sunt receptive.

Ce vom crea?

Mai întâi vom merge prin utilizarea unui pachet numit react-icons care ne va permite să importăm cu ușurință icoane din seturi de pictograme populare precum Font Awesome chiar în aplicația noastră.

De asemenea, vom arunca o privire asupra modului în care putem adăuga manual fișiere SVG direct în aplicația noastră, copiind codul unui fișier SVG direct într-o componentă nouă.

Partea 0: Crearea unei aplicații React

Pentru această prezentare generală, puteți utiliza orice cadru React pe care l-ați dori, indiferent dacă este Create React App sau Next.js. Puteți folosi chiar și un proiect existent.

Deoarece nu avem nevoie de nimic special pentru a adăuga pictogramele noastre, voi folosi create-react-app.

Pentru a începe cu create-react-app, puteți crea un nou proiect folosind următoarea comandă din terminalul dvs.:

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

Notă: înlocuiți [project-name]cu numele pe care doriți să îl utilizați pentru proiectul dvs. O să folosesc my-svg-icons.

Odată ce aveți noua aplicație sau aplicația existentă, ar trebui să fim gata să plecăm!

Partea 1: Adăugarea de pictograme SVG cu pictograme de reacție

Adăugarea de pictograme de reacție la proiect

Pentru a începe cu pictogramele react, vrem să îl instalăm în proiectul nostru.

În interiorul proiectului dvs., rulați următoarea comandă:

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

Odată finalizat, ar trebui să fim gata să-l folosim în proiectul nostru.

Selectarea pictogramelor pentru un proiect

Unul dintre lucrurile interesante despre react-icons este biblioteca extinsă pe care o pun la dispoziție în cadrul pachetului unic.

Nu numai că avem Font Awesome disponibil imediat, avem Octonii GitHub, Heroicons, Pictograme de proiectare a materialelor și multe altele.

Atunci când alegeți pictogramele, aveți destul de mult capacitatea de a utiliza orice pictogramă doriți în orice moment. Acestea fiind spuse, aș recomanda să încercați să păstrați un aspect consistent cu icoanele dvs.

Dacă utilizați în primul rând Font Awesome pentru site-ul dvs. web, ar putea părea puțin ciudat și inconsecvent dacă ați începe să adăugați pictograme colorate la mix. În cele din urmă, doriți să oferiți o experiență pe care oamenii să o poată identifica cu ușurință tiparele pe care le creați.

Utilizarea pictogramelor react în proiect

După ce ați găsit pictogramele pe care doriți să le utilizați, le putem adăuga acum la proiectul nostru.

Site-ul react-icons ne permite să căutăm cu ușurință numele pictogramei pe care dorim să o folosim pentru a o importa în proiectul nostru.

Dacă am vrut să folosim pictograma rachetă Font Awesome, putem naviga la Font Awesome în bara laterală, căutăm în pagină „rachetă” (CMD + F sau CTRL + F), apoi facem clic pe pictograma care îi va copia numele în clipboard.

De asemenea, am putea căuta „rachetă” în formularul de căutare din partea stângă sus a paginii, care ne arată rezultatul „rachetă” în toate seturile de pictograme.

În interiorul proiectului nostru, acum putem importa acea pictogramă. Similar instrucțiunilor din partea de sus a paginii cu pictograme de reacție, dorim să importăm acea pictogramă specifică din react-icons/fa, care se referă la modulul Font Awesome al iconițelor de reacție.

Adăugați următoarele în partea de sus a fișierului în care doriți să importați pictograma. Dacă utilizați un nou proiect create-react-app, îl puteți adăuga în partea de sus a src/App.js.

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

Pentru a testa acest lucru, să înlocuim sigla React cu pictograma noastră.

Scoateți 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