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 reprezintă grafică vectorială scalabilă. Este un format de fișier bazat pe un limbaj de marcare similar XML, care permite dezvoltatorilor și proiectanților să creeze imagini pe bază de vector 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?

Vom merge mai întâi folosind un pachet numit icoane de reacție care ne va permite să importăm cu ușurință pictograme din seturi de pictograme populare precum Font Awesome direct î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 doriți, indiferent dacă este Creați aplicația React 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!

Cum se utilizeaza pictogramele SVG in React cu pictogramele React
Noua aplicație Create React

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, dar avem Octonii lui GitHub, Heroiconi, Icoane de proiectare a materialelor, și încă o grămadă întreagă.

1611604447 249 Cum se utilizeaza pictogramele SVG in React cu pictogramele React
icoane de reacție Heroicons

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 principal Font Awesome pentru site-ul dvs. web, ar putea părea puțin ciudat și inconsecvent dacă ați începe să adăugați Icoane color plate 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 clipboard.

1611604447 556 Cum se utilizeaza pictogramele SVG in React cu pictogramele React
Pictogramă rachetă minunat

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.

1611604447 26 Cum se utilizeaza pictogramele SVG in React cu pictogramele React
Icoane rachete în icoane react

Î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 react-icons.

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 <img componentă și în schimb adăugați:

<FaRocket />

Și dacă reîncarcăm pagina, ne putem vedea racheta!

1611604447 232 Cum se utilizeaza pictogramele SVG in React cu pictogramele React
Pictograma rachetă în aplicația React

Totuși, racheta noastră nu se învârte ca logo-ul React, așa că hai să remediem asta.

Adăugați clasa .App-logo la FaRocket componentă:

<FaRocket className="App-logo" />

Iar racheta ar trebui să se învârtă acum!

Cum se utilizeaza pictogramele SVG in React cu pictogramele React
Pictogramă rachetă rotativă în aplicația React

Dar este și puțin mic. Dacă ne uităm înăuntru src/App.css, stabilim înălțimea de .App-logo la 40vmin. În timp ce funcționează, pentru ca pictograma noastră să umple spațiul, trebuie să oferim și o lățime pentru a o umple.

Adăugați următoarele la .App-logo clasă pentru a adăuga o lățime:

width: 40vmin;

Și, deși este probabil puțin prea mare acum, suntem la o dimensiune mai potrivită și avem pictograma noastră!

1611604447 141 Cum se utilizeaza pictogramele SVG in React cu pictogramele React
Dimensiune crescută a pictogramei rachete rotative în aplicația React

Urmați împreună cu comiterea.

Partea 2: Adăugarea manuală a fișierelor SVG la o componentă React

Uneori nu doriți să adăugați o nouă bibliotecă doar pentru a obține o pictogramă. Uneori este o pictogramă personalizată care nu este disponibilă într-o bibliotecă publică.

Din fericire, cu React, putem crea o nouă componentă SVG destul de ușor, care ne permite să adăugăm pictogramele noastre SVG personalizate oriunde dorim.

În primul rând, să găsim o pictogramă.

În timp ce toate Heroiconi-urile sunt disponibile în pictogramele react, să-l folosim ca exemplu, deoarece este ușor de găsit și copiat un anumit cod SVG.

Accesați heroicons.com și căutați o pictogramă pe care doriți să o utilizați pentru acest exemplu. Voi folosi „glob”.

După ce găsiți pictograma dorită, treceți cu mouse-ul peste acea pictogramă, unde veți vedea opțiuni pentru a copia acea pictogramă ca SVG sau JSX și copiați-o ca JSX.

1611604447 322 Cum se utilizeaza pictogramele SVG in React cu pictogramele React
Copiați ca JSX în Heroicons

Cu acea pictogramă copiată, creați un fișier nou sub src numit Globe.js.

În interiorul acelui fișier, vom crea o nouă componentă numită Globe și lipim în SVG-ul nostru în cadrul componentei respective.

import React from 'react';

const Globe = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  )
}

export default Globe;

Notă: atunci când copiați SVG normal pe o componentă React, este posibil să nu funcționeze „așa cum este”. Uneori, fișierele SVG includ clase CSS sau atribute de element care nu sunt valabile cu JSX.

Dacă întâmpinați erori, încercați să remediați atributele și să priviți consola web pentru a vedea avertismentele și erorile React throws. Deoarece am copiat ca JSX, am reușit să o facem să funcționeze imediat.

Acum, întoarce-te la src/App.js și importă noua noastră componentă:

import Globe from './Globe';

Apoi, putem înlocui pictograma rachetă cu noua noastră componentă:

<Globe />

Și dacă ne deschidem browserul, ne putem vedea globul!

1611604447 481 Cum se utilizeaza pictogramele SVG in React cu pictogramele React
Pictogramă glob mare în aplicația REact

Totuși, este puțin mare.

Vrem să ne aplicăm .App-logo clasă la componenta noastră Globe, deci trebuie să actualizăm acea componentă pentru a lua un className recuzită.

Inapoi la src/Globe.js, adauga o className argument argument:

const Globe = ({ className }) => {

Apoi, adăugați un nou accesoriu cu asta className la <svg componentă:

<svg className={className}

Acum, ne putem actualiza componenta Globe în src/App.js pentru a include acea clasă:

<Globe className="App-logo" />

Și dacă reîncarcăm pagina, putem vedea că logo-ul nostru a revenit la dimensiunea corectă și se învârte din nou!

1611604447 165 Cum se utilizeaza pictogramele SVG in React cu pictogramele React
Pictogramă rotitoare, cu dimensiuni normale, în aplicația React

Urmați împreună cu comiterea.

De ce nu îl includem ca fișier img?

Deși îl putem include ca fișier imagine, așa cum face React în codul implicit create-react-app, obținem câteva avantaje din adăugarea fișierelor noastre SVG „inline”.

În primul rând, atunci când adăugăm SVG inline, putem accesa diferitele căi cu proprietăți CSS. Acest lucru ne oferă mai multă flexibilitate pentru a-l personaliza dinamic.

De asemenea, va furniza mai puține solicitări HTTP. Browserul va ști cum să încarce acel SVG, deci nu trebuie să ne deranjăm browserul pentru a solicita ca fișierul să fie inclus în pagină.

Acestea fiind spuse, este încă o opțiune validă pentru adăugarea unui fișier SVG la pagină.