Použití React-Icons v Reactjs

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