Viena elegantiško dizaino piktograma gali perduoti sudėtingus veiksmus ir idėjas universalia, iš pirmo žvilgsnio suprantama kalba, parodydama, kokia svarbi piktogramų reikšmė gerinant bendrą vartotojo patirtį. Bet kur galite įsigyti tokių piktogramų kaip „React“ kūrėjas?
Atsakymas yra piktogramų bibliotekos arba, jei norite žengti žingsnį toliau, Reaguoti piktogramų bibliotekos. „React“ piktogramų biblioteka iš esmės yra paruoštų naudoti SVG piktogramų rinkinys, kurį galima tiesiogiai importuoti į jūsų „React“ projektą. Šios bibliotekos siūlo npm, pnpm arba Yarn paketo diegimą, po kurio galite importuoti bet kurią piktogramą iš jų naudodami tik keletą komandų.
Šiame straipsnyje pateikiamos įvairios React Icons funkcijos (react-icons), viena geriausių ir populiariausių React naudojamų piktogramų bibliotekų. Jame taip pat yra keletas piktogramų bibliotekų, kurios nėra įtrauktos į „React Icons“ biblioteką, bet kurias verta apsvarstyti.
Reakcijos piktogramos ir jos ypatybės
Reagavimo piktogramos yra atvirojo kodo projektas, leidžiantis vieningai naudoti daugiau nei 30 piktogramų rinkinių, tik įdiegus vieną paketą. Jo populiarumas auga, nes žmonės pereina iš kitų bibliotekų į šį projektą. Šiuo metu vidurkis viršija 1,5 min. savaitės npm atsisiuntimai ir beveik 11 000 „GitHub“ žvaigždžių rašant šį straipsnį.
Tai apima tik aukštos kokybės, gerai žinomas bibliotekas, kurios kartu sukuria daugiau nei 45 000 piktogramų, todėl yra tikimybė, kad visada rasite tai, ko ieškote. Jame taip pat yra bibliotekų, kurios yra specializuotos tam tikrais naudojimo atvejais, pavyzdžiui, programai.
Kad suprastumėte bibliotekas, kai kurios populiarios, kurias galite atpažinti, išvardytos toliau be jokios konkrečios tvarkos:
- Šriftas nuostabus (nemokamas)
- Stalo piktogramos
- Fosforo piktogramos
- BoxIcons
- Linija Nuostabi
- Skruzdžių dizaino piktogramos
- Remix piktogramos
- Įkrovos piktogramos
- Medžiagų dizaino piktogramos
- Herojaus piktogramos
- Radix piktogramos
Vienas „React Icons“ naudojimo minusas – ypač jei naudojate piktogramas iš skirtingų piktogramų bibliotekų – gali būti nenuoseklumo baimė, todėl turėsite kruopščiai išbandyti savo naudojimo atvejį. Vis dėlto „React“ piktogramas galima naudoti norint importuoti populiarias piktogramas iš vienos bibliotekos, jei tai viskas, ko jums reikia jūsų „React“ projektui, ir jūs tikrai negalite suklysti naudodami bet kurią iš aukščiau paminėtų parinkčių.
Tačiau „React Icons“ turi ir reikšmingų pranašumų. Vienas jūsų mintyse kylantis klausimas gali būti susijęs su dydžiu, nes tai skamba kaip didelis paketas, galintis turėti įtakos jūsų programos ar svetainės našumui. Tačiau geras dalykas yra tai, kad „React Icons“ naudoja ES6 importą.
Užuot prie projekto pridėję visą piktogramų rinkinį (kuris gali būti labai didelis), galite importuoti tik tas, kurių jums reikia. Šis selektyvus importavimas padeda išlaikyti mažesnį ir efektyvesnį projekto dydį. Be to, „React Icons“ naudoja tik SVG, kurie šiais laikais laikomi geriausiu piktogramų formatu dėl mažiau tinklo užklausų ir mažesnių dydžių.
Paskutinis dalykas, kurį reikia atsiminti prieš pereinant prie naudojimo, yra tai, kad kiekviena React Icons piktogramų biblioteka naudoja nurodytą licenciją. Nors visos piktogramų bibliotekos yra atvirojo kodo ir jas galima naudoti komerciniais tikslais, kai kurioms reikia priskirti, pavyzdžiui, Creative Commons licencijas. Galite patikrinti, kuri biblioteka kurią licenciją naudoja iš „React Icons“ svetainės arba jo npm puslapis.
Reakcijos piktogramų naudojimas
Geriausia React Icons dalis yra jos paprastumas ir paprastas naudojimas. Viskas, ką jums reikia padaryti, tai įdiegti paketą per „npm“ arba „Yarn“, importuoti atitinkamą biblioteką ir dabar esate pasirengę naudoti jos piktogramas.
Pradėkite įdiegdami paketą savo terminale:
npm install react-icons --save
Arba galite tai padaryti:
yarn add react-icons
Dabar ieškokite raktinio žodžio ir pasirinkite bet kurią jums patinkančią piktogramą. Mūsų atveju tai atrodo taip, kaip pavaizduota žemiau.
Patarimas: jei norite ieškoti daugiau piktogramų konkrečioje bibliotekoje, iš anksto pridėkite jos priešdėlį. Ieškant „fa Alarm“ pirmenybė teikiama piktogramoms iš „Font Awesome“ bibliotekos.
Pirmoji matoma komanda yra ta, kurią turite įvesti, norėdami importuoti šią konkrečią piktogramą į savo projektą. Antrasis yra ne komanda, o komponento pavadinimas, kurį naudinga nukopijuoti, nes nenorėtumėte jo įvesti kiekvieną kartą, kai norite jį naudoti.
Grįžtant prie piktogramų importavimo:
import { CiAlarmOn } from "react-icons/ci";
Jei norite importuoti kelias piktogramas iš tos pačios bibliotekos:
import { CiAlarmOn, CiAlarmOff } from "react-icons/ci";
Geriausia viso to dalis yra tai, kad kiekviena piktograma yra „React“ komponentas, todėl labai lengva jas naudoti visur, kur norite:
import { CiAlarmOn, CiAlarmOff } from "react-icons/ci";
class Alarm extends React.Component {
render() {
return <h3> <CiAlarmOff /> You need to wake up! <CiAlarmOn /> </h3>
}
}
Taip pat galima keisti šių piktogramų spalvą ir dydį naudojant IconContext. Daugiau informacijos apie konfigūraciją ir naudojimą galima rasti čia.
Su daugiau nei 45 000 piktogramų iš 30 skirtingų piktogramų bibliotekų ir lengvo įdiegimo, „React Icons“ gali būti vienintelė piktogramų biblioteka, kurios jums reikia jūsų „React“ projektams.
5 naudingos reakcijos piktogramų bibliotekos, kurių nėra React Icons bibliotekoje
Be to, jei nerandate savo idealių piktogramų arba norite išbandyti kitas parinktis, toliau pateikiamos kelios piktogramų bibliotekos, kurios nėra įtrauktos į „React Icons“ (bent jau kol kas).
1. MUI medžiagos piktogramos
Medžiagos vartotojo sąsaja (MUI) yra atvirojo kodo biblioteka, teikianti „React“ komponentus, pagrįstus „Google“ medžiagų dizainu. Tai ne tik piktogramų biblioteka, bet ir išsamus vartotojo sąsajos įrankių rinkinys, skirtas padėti sparčiai plėtoti ir diegti projektus.
MUI medžiagos piktogramos jau seniai palaiko ir pripažįsta kūrėjus, nes jos gali pasigirti 2,5 min. savaitės npm atsisiuntimai ir daugiau 90 000 „GitHub“ žvaigždžių rašant šį straipsnį. Kūrėjai, „Google“ materialių piktogramų dizaino gerbėjai, pamėgs šią atvirojo kodo biblioteką, nes ją sudaro daugiau nei 2000 elegantiškų ir moderniai atrodančių piktogramų. Nors React Icons apima „Google“ originalios medžiagos piktogramosMUI diegimas atrodo šiek tiek intuityvesnis.
Toliau pateikiamas pavyzdys, todėl nuspręskite patys. (Ignoruokite spalvas, nes jas galima keisti).
„Google“ medžiagos piktograma ir MUI diegimas atitinkamai
Jei esate pasirengęs išbandyti MUI, galite kreiptis į ją dokumentacija apie React paketo diegimą ir piktogramų importavimą. Tai taip pat padeda konfigūruoti dydį ir spalvą.
2. Font Awesome Pro
Šriftas Nuostabus yra labai populiari biblioteka ir antra dažniausiai naudojama šrifto scenarijų technologija internete iškart po „Google Fonts“. Jis siūlo platų piktogramų asortimentą, apimantį įvairias kategorijas, įskaitant socialinę žiniasklaidą, internetą, verslą ir kt.
Jame taip pat yra keletas integracijų, kad galėtumėte naudoti šias piktogramas, įskaitant savo „Figma“ komponentą, „AngularJS“, „Vue“ ir, žinoma, „React“.
Šiuo metu jis siūlo daugiau nei 4000 nemokamų piktogramų (v5, v6), o mokamas planas tai padidina iki daugiau nei 30 000 piktogramų. Tačiau pagrindinis šio skyriaus akcentas yra Font Awesome Pro, nes nemokamos piktogramos jau yra React Icons.
Jei esate kūrėjas, kuris dažnai kuria svetaines ir domisi projektavimu, verta apsvarstyti galimybę naudoti Font Awesome Pro. Kai kurie iš mokamas planas funkcijos apima:
- lengviau pritaikyti dydį, spalvą ir pagrindinius pačios piktogramos pakeitimus
- geriau optimizuotas įgyvendinimas naudojant Šriftų nuostabūs rinkiniai
- galimybė įkelti savo piktogramas į rinkinį ir naudoti kartu su Font Awesome
- Privataus registro pralaidumas jūsų projektams naudojant npm, Ruby ir Python privačius registrus
„Font Awesome“ taip pat turi savo „React“ komponentą, todėl, kaip ir „React Icons“, galite lengvai integruoti jo piktogramas į savo projektą naudodami keletą komandų. Šriftas Awesome's naudojimo dokumentacija yra gana išsamus ir daugiau nei pakankamai, kad būtų galima pradėti.
Piktogramų paieška ir naršymas vyksta sklandžiai ir apima įvairias kategorijas, jei norite naršyti rankiniu būdu, o ne ieškoti raktinių žodžių.
Spustelėjus bet kurią piktogramą, atsiranda intuityvi sąsaja, leidžianti atlikti įvairius pakeitimus ir netgi pritaikyti jas kodui – kitaip nei naudojant „React Icons“, kur tai reikia padaryti rankiniu būdu.
Apskritai „Font Awesome“ yra ne tik puiki „React“ piktogramų biblioteka, bet ir viena geriausių piktogramų bibliotekų, kurioje telpa įvairių sluoksnių kūrėjai ir dizaineriai. Jei „React Icons“ neatitiko jūsų skonio, mokamas „Font Awesome“ planas gali tai padaryti. Prieš pirkdami galite užsiregistruoti nemokamam planui kad sužinotumėte, ar atnaujinimas pagerins jūsų patirtį.
3. IconPark
„IconPark“ yra atvirojo kodo piktogramų biblioteka, siūlanti daugiau nei 2500 tinkinamų piktogramų tiek inžinieriams, tiek dizaineriams. Jo piktogramos yra gaiviai unikalaus, tačiau šiuolaikiško dizaino ir leidžia naudoti lanksčius scenarijus.
Jis palaiko sklandų „React“ ir „Vue“ integravimą, taip pat SVG palaikymą, jei norite tai padaryti. Padaryti „IconPark“ pakeitimus yra gana lengva – net kūrėjui, kaip parodyta aukščiau esančiame paveikslėlyje. Visi pakeitimai atsispindi kopijuojamame kode, kuris yra paruoštas įdiegti jūsų projekte.
Šiuo metu jame yra beveik 8 000 „GitHub“ žvaigždžių, tačiau kol kas atsisiunčiama tik 3 tūkst. „npm“ per savaitę. Jei norite jį išbandyti, jame pateikiamas išsamus jo diegimo vadovas dokumentacija.
4. „CoreUI React“ piktogramos
„CoreUI“ yra žinoma dėl savo atvirojo kodo administratoriaus prietaisų skydelio šablonų, tačiau ji taip pat siūlo Reagavimo piktogramų biblioteka dabar sudaryta iš 1500 ir daugiau piktogramų. Nors jame nėra paruoštų naudoti kopijuojamų kodų, galbūt norėsite jį išbandyti, jei kuriate administratoriaus prietaisų skydelius.
Vienas puikus šio paketo dalykas yra tai, kad jame pabrėžiamas prieinamumas žmonėms su regėjimo negalia. Jame siūlomas būdas padalyti piktogramas į semantines ir dekoratyvines piktogramas ir įtraukti kodo eilutę, rodančią ekrano skaitytuvams, ignoruoti tai ar ne. Daugiau informacijos apie šį įgyvendinimą ir viso paketo diegimą rasite jame dokumentacija.
5. Evergreen segmento piktogramos
„Evergreen Segment“ yra „React“ vartotojo sąsajos sistema, kurią sudaro daugybė „React“ komponentų, kurie veikia iš karto. Vienas iš šių komponentų yra jo pagal užsakymą sukurtos piktogramos. Evergreen Segment siūlo daugiau nei 500 unikalaus stiliaus piktogramų, kurios gali atitikti jūsų poreikius.
Nors jame nėra prekės ženklo piktogramų, pagrindinių funkcijų piktogramų nereikia nubraukti. Šiuo metu jis galioja 12 000 „GitHub“ žvaigždžių, tačiau tai daugiausia dėl pagrindinės sistemos sėkmės. Beje, jo piktogramų npm paketas galioja 10 000 atsisiuntimų per savaitę kaip dabar ir tikriausiai kils iš čia.
Jame rasite montavimo ir naudojimo instrukcijas dokumentacija. Įdomu tai, kad jame taip pat yra tiesioginis pavyzdžių redaktorius, todėl galite matyti rekvizitų taikymo piktogramoms poveikį.
Išvada
Kadangi „React Icons“ apima daug populiarių „React“ piktogramų bibliotekų, yra aktyviai prižiūrima ir paprasta naudoti, tai tikriausiai būtų geriausias pasirinkimas jums, kaip „React“ kūrėjui. Didelio jo piktogramų rinkinių arsenalo pakanka, kad galėtumėte išspręsti bet kokius atvejus, kurių jums gali prireikti.
Bet jei nesate jo gerbėjas, MUI Material Icons arba Font Awesome yra puikios universalios piktogramų bibliotekos. „Icon Park“, „CoreUI“ ir „Evergreen Segment“ bibliotekos gali jums padėti nišiniais atvejais, kai jūsų standartinės neveikia.
Nepaisant to, atvirojo kodo „React“ piktogramų bibliotekos yra palaima ir didžiulis patobulinimas, palyginti su ankstesniais diegimais – kai reikėjo atsisiųsti didelį piktogramų rinkinį, mokėti už daugybę bibliotekų, kad nerastumėte reikiamos piktogramos.
