Kako koristiti SVG ikone u reakciji s React ikonama i fontom Awesome

Ikone su način vizualne komunikacije pojmova i značenja bez upotrebe riječi. To može biti za kategorizaciju, akciju ili čak upozorenje.

Kako možemo dodati ikone pomoću SVG-a našim React aplikacijama kako bismo poboljšali vizualnu komunikaciju?

  • Što je SVG?
  • Što SVG čini izvrsnim za web?
  • Dio 0: Izrada React aplikacije
  • 1. dio: Dodavanje SVG ikona reakcijskim ikonama
  • Dio 2: Ručno dodavanje SVG datoteka u React komponentu

Što je SVG?

SVG je skraćenica od Scalable Vector Graphics. To je format datoteke zasnovan na jeziku za označavanje sličan XML-u koji programerima i dizajnerima omogućuje stvaranje slika temeljenih na vektorima pomoću definicija puta.

Što SVG čini izvrsnim za web?

SVG je rođen za web. To je otvoreni standard koji je stvorio W3C kako bi pružio bolji način za dodavanje slika na web. Ako na računalu otvorite SVG datoteku, možda ćete se iznenaditi kad utvrdite da je to sve kod!

Ovo igra ulogu u maloj veličini datoteke. Uobičajeno kada koristite SVG, možete iskoristiti njegovu manju veličinu u usporedbi s većim slikovnim datotekama koje bi mogle biti potrebne za isporuku iste visoke razlučivosti.

Uz to, budući da SVG definiramo kao staze, oni se mogu mjeriti onoliko veliko ili malo koliko želimo. To ih čini izuzetno fleksibilnima za upotrebu weba, posebno kada iskustva čine prilagodljivima.

Što ćemo stvoriti?

Prvo ćemo proći kroz upotrebu paketa nazvanog ikona reakcije koji će nam omogućiti da lako uvezemo ikone iz popularnih skupova ikona poput Font Awesome izravno u našu aplikaciju.

Također ćemo pogledati kako možemo ručno dodati SVG datoteke izravno u našu aplikaciju kopiranjem koda SVG datoteke izravno u novu komponentu.

Dio 0: Izrada React aplikacije

Za ovo uputstvo možete koristiti bilo koji React okvir koji želite bilo da je to Create React App ili Next.js. Možete čak koristiti i postojeći projekt.

Budući da nam za dodavanje ikona ne treba ništa posebno, upotrijebit ću aplikaciju create-response-.

Da biste započeli s kreiranjem-reakcijom-aplikacije, možete stvoriti novi projekt pomoću sljedeće naredbe u vašem terminalu:

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

Napomena: zamijenite [project-name]imenom koje želite koristiti za svoj projekt. Idem koristiti my-svg-icons.

Nakon što nabavite novu ili postojeću aplikaciju, trebali bismo biti spremni!

1. dio: Dodavanje SVG ikona reakcijskim ikonama

Dodavanje ikona reakcije u vaš projekt

Da bismo započeli s reakcijskim ikonama, želimo ga instalirati u naš projekt.

Unutar projekta izvedite sljedeću naredbu:

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

Kad se završi, trebali bismo biti spremni za upotrebu u našem projektu.

Odabir ikona za projekt

Jedna od zgodnih stvari u vezi s reakcijskim ikonama je opsežna biblioteka koju čine dostupnom u jednom paketu.

Ne samo da imamo Font Awesome odmah dostupan, već imamo i GitHub-ove Octicons, Heroicons, Ikone materijalnog dizajna i još gomilu.

Kada odabirete ikone, u velikoj mjeri imate mogućnost koristiti bilo koju ikonu koju želite u bilo kojem trenutku. Ipak, preporučio bih da pokušate zadržati dosljedan izgled i izgled svojih ikona.

Ako primarno koristite Font Awesome za svoje web mjesto, moglo bi izgledati pomalo čudno i nedosljedno ako biste u mješavinu počeli dodavati ravne ikone u boji. Konačno želite pružiti iskustvo da će ljudi moći lako prepoznati obrasce koje stvarate.

Korištenje reakcijskih ikona u projektu

Nakon što pronađete ikone koje želite koristiti, sada ih možemo dodati u naš projekt.

Web stranica reak-ikona olakšava nam traženje imena ikone koju želimo koristiti za uvoz u naš projekt.

Ako smo željeli koristiti ikonu Font Awesome raketa, na bočnoj traci možemo doći do Font Awesomea, potražiti stranicu za "raketu" (CMD + F ili CTRL + F), a zatim kliknuti ikonu koja će kopirati njezino ime na vaš međuspremnik.

Također bismo mogli potražiti "raketu" u obrascu za pretragu u gornjem lijevom dijelu stranice, koji nam pokazuje rezultat "raketa" u svim skupovima ikona.

Unutar našeg projekta sada možemo uvesti tu ikonu. Slično uputama na vrhu stranice s reakcijskim ikonama, želimo uvesti tu specifičnu ikonu iz react-icons/fa, koja se odnosi na modul Font Awesome reakcijskih ikona.

Na vrh datoteke u koju želite uvesti ikonu dodajte sljedeće. Ako koristite novi projekt create-response-app, možete je dodati na vrh src/App.js.

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

Da bismo to testirali, zamijenimo logotip React našom ikonom.

Uklonite 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