Le të importojmë ikonat në Projektin tonë React

Qëllimi i vetëm i këtij lloji të përmbajtjes është t'u japë pak dritë zhvilluesve të rinj si unë për të kapur shpejt mënyrat praktike të zbatimit të gjërave duke përdorur react. Ju inkurajoj të gjithëve që të lexoni dokumentacionin origjinal në lidhje me paketën dhe të largoni frikën nga leximi i dokumentacionit dhe zbatimi i tij.

Na duhen ikona për të shfaqur qartë përmbajtjen. Pra, në këtë artikull, unë do të ndaj mënyrën time të përdorimit të ikonave në projektet e mia të reagimit.

Ekzistojnë biblioteka të mrekullueshme të ikonave të reagimit të disponueshme në internet. Disa prej tyre janë
* Ant-Design Library
* Font Awesome
* Bootstrap Icons
* Devicons

Ne mund t'i përdorim të gjitha këto biblioteka ikonash pa i instaluar veçmas duke përdorur paketën react-ikona npm



Ikonat e reagimit npm

Instaloni paketën e ikonave react duke përdorur npm ose fije
npm install react-icons — save

Pas instalimit, mund të importoni çdo bibliotekë në react duke përdorur deklaratën import.

Importoni ikonat e dizajnit të milingonave

import { IconName } from “react-icons/ai”;

Importoni ikonat e bootstrap

import { IconName } from “react-icons/bs”;

Mund ta përdorni si më poshtë

Projekt Live



Ne gjithashtu mund të shtojmë API-në e kontekstit react për të shtuar stilimin për çdo ikonë menjëherë. Pra, nuk ka nevojë të shtoni të njëjtën ngjyrë dhe stil në çdo komponent ikonë

Ju mund të importoni IconContext dhe t'i shtoni atij stil

import {IconContext} from 'react-icons';

Dhe mbështillni ikonat me kontekst

Ju mund ta shikoni projektin live nga këtu.