React Font Äge on iga Reacti valdava esiotsa arendaja jaoks kohustuslik teadma. See pakett varustab teid skaleeritavate vektorikoonidega, mida saab CSS-i abil kohandada – suurust, värvi, varju jne. Kõik need vapustavad ikoonid sisalduvad teie rakenduse jaoks fantastiliselt lihtsalt kasutatavas Reacti komponendis.
Käsil olev probleem
Sageli võib ikooniteekide integreerimine Reacti rakendustesse kaasa tuua jõudlusprobleeme ja keerulisi konfiguratsioone, kuna kaasatakse kõik ikoonid, olenemata kasutusest. See on koht React Font Äge särab. See võimaldab meil importida ainult meie projekti jaoks vajalikke ikoone, muutes meie rakenduse toimivaks.
Lahendus React Font Awesome'iga
Esiteks installige Font Awesome ja vajalikud paketid oma React Projectisse, kasutades järgmist käsku:
npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/react-fontawesome
Nüüd olete valmis kasutama ikoone järgmiste koodiridadega:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoffee} />
Kood impordib komponendi FontAwesomeIcon ja kohviikooni ning kasutab neid komponendis React.
Samm-sammuline selgitus
Analüüsime, kuidas see toimib. Esimene rida impordib komponendi FontAwesomeIcon teegist react-fontawesome. FontAwesomeIcon on lihtsalt komponent, mida Font Awesome pakub teie Reacti komponentides kasutamiseks. Järgmine rida impordib ühe ikooni (
- faKohv
) paketist free-solid-svg-icons. Lõpuks kasutate imporditud ikoone FontAwesomeIcon komponendi rekvisiidina.
Lisateave FontAwesome'i raamatukogude kohta
pakett @fortawesome/fontawesome-svg-core on Font Awesome'i tuum. See sisaldab stiile ja SVG raamistiku funktsioone ning see tuleks lisada üks kord projekti kohta.
. @fortawesome/free-solid-svg-icons pakett sisaldab kõiki neid tasuta tahkeid ikoone, mida tavaliselt oma saidil/rakenduses kasutaksite. Saadaval on ka muud raamatukogud, nagu tavalised ja kaubamärgid.
. @fortawesome/react-fontawesome pakett on komponentide teek, mis toob FontAwesome'i sujuvalt Reacti.
React Font Awesome on osutunud usaldusväärseks lahenduseks ikoonide rakendamiseks Reacti rakenduses, säilitades samal ajal rakenduse tõhusa ja arusaadavana.
