Zjistil jsem, že nejlepší způsob, jak začlenit ikony do kódu, je pomocí ikon reagovat. Mají řadu různých ikon, od ikon bootstrap, ikon Font Awesome, ikon designu mravenců a BoxIcons, abychom jmenovali několik z mnoha dalších.
Proces instalace je rychlý a snadný.
Nainstalujte zadáním
npm install react-icons --save
v terminálu pro váš projekt.
Jakmile jsou ikony reakce nainstalovány, budete je muset importovat na stránku, kde chcete ikony používat.
Například:
import { FaGithub } from 'react-icons/fa';
Jakmile importujete, musíte ikonu v kódu deklarovat samouzavíracím tagem.
Například:
function App() {
return (
<div className="App">
<h2 align="center">Hello world!</h2>
<div align="center"><FaGithub/></div>
</div>
);
}
Výsledek:
Jedna věc, kterou je třeba mít na paměti!
Kdykoli importujete ikonu, ujistěte se, že adresujete správnou ikonu, ať už z Font Awesome(fa) nebo bootstrap icons(bs). Ikony nebudou fungovat, pokud použijete ikonu bootstrapu a importujete ji jako ikonu „fa“.
Například:
Při importu z 'react-icons/fa' je "fa" na konci tím, co označuje, odkud ikona pochází. V tomto případě Font Awesome.
Skvělé je, že v horní části dokumentace najdete správnou metodu importu pro typ ikony, kterou chcete použít.
Takto:
Bootstrap ikony
import { IconName } from "react-icons/bs";
Písmo úžasné
import { IconName } from "react-icons/fa";
Jednoduše nahraďte IconName ikonou dle vašeho výběru a měli byste být připraveni!
Veškerou dokumentaci k tomuto lze nalézt zde:
React-Icons
Toto jsou všechny informace, které jsem jako nový vývojář považoval za užitečné a trvalo mi nějaký čas, než jsem přišel na to, jak to všechno funguje. Po několika neúspěšných pokusech jsem si řekl, že se podělím o své zkušenosti a doufám, že pomůžu někomu jinému, kdo hledá snadný způsob, jak přidat ikony do svého kódu!
Hodně štěstí na vaší cestě!
-Wensy