Kaip naudoti SVG piktogramas reaguojant su reaguojančiomis piktogramomis ir šriftu

Piktogramos yra būdas vizualiai perteikti sąvokas ir prasmę nenaudojant žodžių. Tai gali būti skirstymas į kategorijas, veiksmas ar net įspėjimas.

Kaip mes galime pridėti piktogramas naudodami SVG prie savo „React“ programų, kad pagerintume savo vizualinį bendravimą?

  • Kas yra SVG?
  • Kuo SVG puikus žiniatinklyje?
  • 0 dalis: „React“ programos kūrimas
  • 1 dalis. SVG piktogramų pridėjimas su reagavimo piktogramomis
  • 2 dalis: SVG failų pridėjimas rankiniu būdu prie „React“ komponento

Kas yra SVG?

SVG reiškia „Scalable Vector Graphics“. Tai failo formatas, pagrįstas žymėjimo kalba, panašia į XML, leidžiančią kūrėjams ir dizaineriams kurti vektorinius vaizdus, ​​naudojant kelio apibrėžimus.

Kuo SVG puikus žiniatinklyje?

SVG gimė internetui. Tai atviras standartas, kurį sukūrė W3C, kad būtų galima geriau pridėti vaizdus į internetą. Atidarę SVG failą savo kompiuteryje, galite nustebti sužinoję, kad visa tai yra kodas!

Tai vaidina nedidelį failo dydį. Paprastai, kai naudojate SVG, galite pasinaudoti mažesnio dydžio pranašumais, palyginti su didesniais vaizdo failais, kurių gali prireikti norint pateikti tą pačią aukštą skiriamąją gebą.

Be to, kadangi mes apibrėžiame SVG kaip kelius, jie gali būti tokie dideli ar maži, kiek norime. Tai daro juos ypač lankstus žiniatinklio naudojimui, ypač kai reaguoja į patirtį.

Ką mes kursime?

Pirmiausia pereisime naudodami paketą, pavadintą „reaguoti piktogramomis“, kuris leis mums lengvai importuoti piktogramas iš populiarių piktogramų rinkinių, pvz., „Font Awesome“, tiesiai į mūsų programą.

Mes taip pat apžvelgsime, kaip mes galime rankiniu būdu pridėti SVG failus tiesiai į savo programą, nukopijuodami SVG failo kodą tiesiai į naują komponentą.

0 dalis: „React“ programos kūrimas

Šiame žingsnyje galite naudoti bet kokią norimą „React“ sistemą, nesvarbu, ar tai būtų „Create React App“, ar „Next.js“. Jūs netgi galite naudoti esamą projektą.

Kadangi mums nereikia nieko ypatingo, kad pridėtume savo piktogramas, aš naudosiu „create-reago“ programą.

Norėdami pradėti naudoti „create-react-app“, galite sukurti naują projektą naudodami šią komandą savo terminale:

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

Pastaba: pakeiskite [project-name]pavadinimu, kurį norite naudoti savo projektui. Aš ketinu naudoti my-svg-icons.

Kai turėsite naują arba esamą programą, turėtume būti pasirengę eiti!

1 dalis. SVG piktogramų pridėjimas su reagavimo piktogramomis

Reakcijos piktogramų pridėjimas prie jūsų projekto

Norėdami pradėti naudoti „reagavimo piktogramas“, norime ją įdiegti į savo projektą.

Projekto viduje vykdykite šią komandą:

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

Kai jis bus baigtas, turėtume būti pasirengę jį naudoti savo projekte.

Projekto piktogramų pasirinkimas

Vienas iš įdomiausių dalykų, susijusių su „reagavimo piktogramomis“, yra plati biblioteka, kurią jie pateikia viename pakete.

Mes ne tik turime iškart „Font Awesome“, bet ir „GitHub“ „Octicons“, „Heroicons“, „Material Design Icons“ ir dar daugybę kitų.

Renkantis piktogramas, jūs turite galimybę bet kuriuo metu naudoti bet kokią norimą piktogramą. Be to, aš rekomenduočiau pabandyti išlaikyti nuoseklią savo piktogramų išvaizdą ir jausmą.

Jei savo svetainei pirmiausia naudojate „Awesome Font“, gali pasirodyti šiek tiek keista ir nenuoseklu, jei pradėtumėte pridėti plokščių spalvų piktogramų prie mišinio. Galų gale norite suteikti patirtį, kad žmonės galėtų lengvai atpažinti jūsų sukurtus modelius.

Reagavimo piktogramų naudojimas jūsų projekte

Radę norimas naudoti piktogramas, dabar galime jas pridėti prie savo projekto.

„Reaguoti-piktogramos“ svetainė leidžia mums lengvai ieškoti piktogramos, kurią norime naudoti importuodami į savo projektą, pavadinimą.

Jei norėjome naudoti raketos „Font Awesome“ piktogramą, šoninėje juostoje galime pereiti prie „Font Awesome“, ieškoti puslapyje „raketa“ (CMD + F arba CTRL + F), tada spustelėkite piktogramą, kuri nukopijuos jos pavadinimą į jūsų mainų sritis.

Mes taip pat galėtume ieškoti „raketos“ paieškos formoje puslapio viršuje kairėje, kuri mums parodo rezultatą „raketa“ visuose piktogramų rinkiniuose.

Savo projekto viduje mes dabar galime importuoti šią piktogramą. Panašiai kaip instrukcijos, pateikiamos puslapio „reaguoti piktogramos“ viršuje, norime importuoti tą konkrečią piktogramą iš react-icons/fa, kuri nurodo reagavimo piktogramų „Šrifto nuostabus“ modulį.

Failo, kuriame norite importuoti piktogramą, viršuje pridėkite šiuos dalykus. Jei naudojate naują programos „sukurti-reaguoti-programą“ projektą, galite jį pridėti prie viršaus src/App.js.

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

Norėdami tai išbandyti, pakeiskite „React“ logotipą savo piktograma.

Pasalinti 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