Kuinka käyttää SVG-kuvakkeita reagoida React-kuvakkeiden ja kirjasin mahtavien kanssa

Kuvakkeet ovat tapa visuaalisesti kommunikoida käsitteistä ja merkityksestä ilman sanoja. Tämä voi olla luokittelua, toimintaa tai jopa varoitusta.

Kuinka voimme lisätä SVG: tä käyttäviä kuvakkeita React-sovelluksiimme visuaalisen viestinnän parantamiseksi?

  • Mikä on SVG?
  • Mikä tekee SVG: stä erinomaisen verkossa?
  • Osa 0: React-sovelluksen luominen
  • Osa 1: SVG-kuvakkeiden lisääminen reagointi-kuvakkeilla
  • Osa 2: SVG-tiedostojen lisääminen manuaalisesti React-komponenttiin

Mikä on SVG?

SVG on lyhenne sanoista Scalable Vector Graphics. Se on tiedostomuoto, joka perustuu XML: n kaltaiseen merkintäkieleen, jonka avulla kehittäjät ja suunnittelijat voivat luoda vektoripohjaisia ​​kuvia polun määrittelyjen avulla.

Mikä tekee SVG: stä erinomaisen verkossa?

SVG syntyi verkkoon. Se on avoin standardi, jonka W3C loi tarjoamaan paremman tavan lisätä kuvia verkkoon. Jos avaat SVG-tiedoston tietokoneellasi, saatat yllättyä huomatessasi, että kaikki on koodi!

Tämä on osa pientä tiedostokokoa. Tyypillisesti SVG: tä käytettäessä voit hyödyntää sen pienempää kokoa verrattuna suurempiin kuvatiedostoihin, joita saatetaan tarvita saman korkean resoluution tuottamiseen.

Lisäksi, koska määritämme SVG: n poluiksi, ne voivat skaalata niin suuriksi tai pieniksi kuin haluamme. Tämä tekee niistä erityisen joustavia verkkokäytössä, varsinkin kun tehdään kokemuksista reagoivia.

Mitä aiomme luoda?

Käymme ensin läpi reagointikuvakkeilla kutsutun paketin, jonka avulla voimme tuoda kuvakkeita helposti suosituista kuvakkeista, kuten Font Awesome, suoraan sovellukseemme.

Katsomme myös, kuinka voimme lisätä SVG-tiedostot manuaalisesti suoraan sovellukseemme kopioimalla SVG-tiedoston koodi suoraan uuteen komponenttiin.

Osa 0: React-sovelluksen luominen

Tässä läpikäynnissä voit käyttää mitä tahansa haluamaasi React-kehystä riippumatta siitä, onko kyseessä Create React -sovellus tai Next.js. Voit jopa käyttää olemassa olevaa projektia.

Koska emme tarvitse mitään erityistä kuvakkeiden lisäämiseen, aion käyttää create-reagoi-sovellusta.

Aloita luominen-reagoi -sovelluksen avulla voit luoda uuden projektin terminaalisi seuraavan komennon avulla:

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

Huomaa: korvaa [project-name]nimellä, jota haluat käyttää projektissasi. Aion käyttää my-svg-icons.

Kun sinulla on uusi sovelluksesi tai nykyinen sovelluksesi, meidän pitäisi olla valmiita aloittamaan!

Osa 1: SVG-kuvakkeiden lisääminen reagointi-kuvakkeilla

Reagointikuvakkeiden lisääminen projektiisi

Reagointi-kuvakkeiden käytön aloittamiseksi haluamme asentaa sen projektiimme.

Suorita seuraava komento projektisi sisällä:

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

Kun se on valmis, meidän pitäisi olla valmiita käyttämään sitä projektissamme.

Kuvakkeiden valitseminen projektille

Yksi reaktiokuvakkeiden hienoista asioista on laaja kirjasto, jonka ne tarjoavat saataville yhdessä paketissa.

Paitsi että meillä on Font Awesome heti saatavilla, meillä on GitHubin Octicons, Heroicons, Material Design Icons ja vielä joukko muita.

Kun valitset kuvakkeita, sinulla on melkein kyky käyttää mitä tahansa haluamaasi kuvaketta milloin tahansa. Tästä huolimatta suosittelisin, että yrität säilyttää yhdenmukaisen ulkoasun kuvakkeiden kanssa.

Jos käytät ensisijaisesti Font Awesome -sivustoasi, se saattaa näyttää hieman oudolta ja epäjohdonmukaiselta, jos aloitat Flat Color -kuvakkeiden lisäämisen sekoitukseen. Lopulta haluat tarjota kokemuksen, jonka ihmiset pystyvät helposti tunnistamaan luomasi mallit.

Reagointikuvakkeiden käyttö projektissasi

Kun olet löytänyt haluamasi kuvakkeet, voimme nyt lisätä ne projektiimme.

react-icons -sivuston avulla on helppo etsiä kuvakkeen nimi, jota haluamme tuoda projektiimme.

Jos halusimme käyttää Font Awesome -rakettikuvaketta, voimme siirtyä sivupalkista Font Awesome -sivulle, etsiä sivulta "raketti" (CMD + F tai CTRL + F) ja napsauttaa sitten kuvaketta, joka kopioi sen nimen omaan leikepöydälle.

Voisimme myös etsiä sanaa "raketti" sivun vasemmassa yläkulmassa olevasta hakulomakkeesta, joka näyttää meille tuloksen "raketti" kaikissa kuvakesarjoissa.

Projektin sisällä voimme nyt tuoda kyseisen kuvakkeen. Samoin kuin reaktiokuvakkeet -sivun yläosassa olevat ohjeet, haluamme tuoda kyseisen kuvakkeen react-icons/fa, joka viittaa React-kuvakkeiden Font Awesome -moduuliin.

Lisää seuraava tiedoston yläosaan, johon haluat tuoda kuvakkeen. Jos käytät uutta create-reagoi-sovellus-projektia, voit lisätä sen yläosaan src/App.js.

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

Testaa tämä korvaamalla React-logo kuvakkeellamme.

Poista 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