{"id":30964,"date":"2025-10-04T02:41:15","date_gmt":"2025-10-03T23:41:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=30964"},"modified":"2025-10-04T02:41:15","modified_gmt":"2025-10-03T23:41:15","slug":"react-icons-yuzlerce-acik-kaynak-ikona-kolay-erisim","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-icons-yuzlerce-acik-kaynak-ikona-kolay-erisim\/","title":{"rendered":"React Icons: Y\u00fczlerce A\u00e7\u0131k Kaynak \u0130kona Kolay Eri\u015fim"},"content":{"rendered":"

<\/p>\n

React Icons: Y\u00fczlerce A\u00e7\u0131k Kaynak \u0130kona Kolay Eri\u015fim<\/h2>\n

React Geli\u015ftiricileri \u0130\u00e7in \u0130kon \u00c7\u00f6z\u00fcmleri ve React Icons’\u0131n Yeri<\/h3>\n

Modern web uygulamalar\u0131nda kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) ve kullan\u0131c\u0131 deneyimi (UX), bir uygulaman\u0131n ba\u015far\u0131s\u0131nda kritik rol oynamaktad\u0131r. Bu deneyimin temel bile\u015fenlerinden biri de g\u00f6rsel ileti\u015fim ara\u00e7lar\u0131 olan ikonlard\u0131r. \u0130konlar, karma\u015f\u0131k bilgiyi basitle\u015ftirme, navigasyonu kolayla\u015ft\u0131rma ve uygulaman\u0131n genel esteti\u011fini geli\u015ftirme potansiyeline sahiptir. Do\u011fru se\u00e7ilmi\u015f ve tutarl\u0131 kullan\u0131lan ikonlar, kullan\u0131c\u0131lar\u0131n uygulamay\u0131 daha sezgisel bir \u015fekilde anlamas\u0131na ve etkile\u015fim kurmas\u0131na yard\u0131mc\u0131 olur. Ancak, bu k\u00fc\u00e7\u00fck g\u00f6rsel elementlerin y\u00f6netimi, \u00f6zellikle React gibi bile\u015fen tabanl\u0131 bir mimaride \u00e7al\u0131\u015fan geli\u015ftiriciler i\u00e7in zaman zaman zorlay\u0131c\u0131 olabilir.<\/p>\n

Geleneksel olarak, geli\u015ftiriciler ikonlar\u0131 \u00e7e\u015fitli y\u00f6ntemlerle projelerine dahil etmi\u015flerdir. Bunlar aras\u0131nda; do\u011frudan SVG dosyalar\u0131n\u0131 kullanma, ikon fontlar\u0131n\u0131 (\u00f6rne\u011fin, Font Awesome, Material Icons) bir CDN \u00fczerinden veya yerel olarak entegre etme ya da \u00f6zel CSS sprite’lar\u0131 olu\u015fturma gibi yakla\u015f\u0131mlar bulunur. Her bir y\u00f6ntemin kendine \u00f6zg\u00fc avantajlar\u0131 ve dezavantajlar\u0131 mevcuttur. SVG dosyalar\u0131 y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte netlik sunsa da, her ikon i\u00e7in ayr\u0131 bir dosya veya bile\u015fen olu\u015fturmak y\u00f6netim y\u00fck\u00fcn\u00fc art\u0131rabilir. \u0130kon fontlar\u0131 ise tek bir HTTP iste\u011fiyle bir\u00e7ok ikonu y\u00fckleme avantaj\u0131 sunarken, genellikle t\u00fcm font setinin indirilmesini gerektirir ki bu da kullan\u0131lmayan ikonlar i\u00e7in fazladan bant geni\u015fli\u011fi t\u00fcketimine yol a\u00e7abilir. Ayr\u0131ca, ikon fontlar\u0131n\u0131n eri\u015filebilirlik (accessibility) a\u00e7\u0131s\u0131ndan baz\u0131 zorluklar\u0131 ve taray\u0131c\u0131lar aras\u0131 tutarl\u0131l\u0131k sorunlar\u0131 da olabilmektedir.<\/p>\n

React ekosisteminde, bile\u015fen tabanl\u0131 yakla\u015f\u0131m nedeniyle ikonlar\u0131n da birer bile\u015fen olarak ele al\u0131nmas\u0131 do\u011fal bir beklentidir. Bu, ikonlar\u0131n props arac\u0131l\u0131\u011f\u0131yla kolayca \u00f6zelle\u015ftirilebilmesi, React’in render d\u00f6ng\u00fcs\u00fcyle uyumlu \u00e7al\u0131\u015fmas\u0131 ve di\u011fer bile\u015fenlerle sorunsuz bir \u015fekilde entegre olabilmesi anlam\u0131na gelir. \u0130\u015fte tam da bu noktada React Icons devreye girerek, geli\u015ftiricilere y\u00fczlerce a\u00e7\u0131k kaynak ikona tek ve tutarl\u0131 bir API \u00fczerinden eri\u015fim imkan\u0131 sunar. React Icons, farkl\u0131 ikon k\u00fct\u00fcphanelerinden gelen ikonlar\u0131 bir araya getirerek, geli\u015ftiricilerin ikon y\u00f6netimiyle ilgili karma\u015f\u0131kl\u0131klar\u0131 azaltmay\u0131 ve daha verimli bir geli\u015ftirme s\u00fcreci sa\u011flamay\u0131 hedefler. Bu makale, React Icons’\u0131n ne oldu\u011funu, neden tercih edilmesi gerekti\u011fini, nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 ve React projelerindeki ikon ihtiya\u00e7lar\u0131n\u0131 nas\u0131l k\u00f6kten \u00e7\u00f6zd\u00fc\u011f\u00fcn\u00fc detayl\u0131 bir \u015fekilde inceleyecektir.<\/p>\n

React Icons Nedir? Kapsaml\u0131 Bir Bak\u0131\u015f<\/h3>\n

React Icons, pop\u00fcler a\u00e7\u0131k kaynak ikon k\u00fct\u00fcphanelerinden (Font Awesome, Material Design, Ant Design, VS Code Icons, vb.) y\u00fczlerce ikonu tek bir pakette birle\u015ftiren ve React bile\u015fenleri olarak sunan bir k\u00fct\u00fcphanedir. Temel amac\u0131, React geli\u015ftiricilerinin farkl\u0131 ikon setlerini projelerine kolayca entegre etmelerini sa\u011flamak ve ikon y\u00f6netimini basitle\u015ftirmektir. K\u00fct\u00fcphane, bu ikonlar\u0131 do\u011frudan SVG (Scalable Vector Graphics) format\u0131nda React bile\u015fenleri olarak sa\u011flar, bu da bir\u00e7ok avantaj\u0131 beraberinde getirir.<\/p>\n

React Icons’\u0131n en temel \u00f6zelliklerinden biri, tek bir ba\u011f\u0131ml\u0131l\u0131k arac\u0131l\u0131\u011f\u0131yla geni\u015f bir ikon yelpazesine eri\u015fim imkan\u0131 sunmas\u0131d\u0131r. Geli\u015ftiriciler, ayr\u0131 ayr\u0131 Font Awesome, Material Design veya ba\u015fka bir ikon k\u00fct\u00fcphanesini projesine eklemek yerine, yaln\u0131zca React Icons’\u0131 kurarak bu k\u00fct\u00fcphanelerin sundu\u011fu ikonlara eri\u015febilirler. Bu entegrasyon, npm install react-icons<\/code> veya yarn add react-icons<\/code> gibi basit bir komutla ger\u00e7ekle\u015ftirilir ve sonras\u0131nda ikonlar, projenin herhangi bir yerinde standart React bile\u015fenleri gibi kullan\u0131labilir.<\/p>\n

K\u00fct\u00fcphanenin SVG tabanl\u0131 yakla\u015f\u0131m\u0131, ikonlar\u0131n kalitesi ve performans a\u00e7\u0131s\u0131ndan \u00f6nemli avantajlar sunar. SVG’ler vekt\u00f6r tabanl\u0131 olduklar\u0131ndan, herhangi bir \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte veya boyutta piksellenme olmaks\u0131z\u0131n m\u00fckemmel netlikte render edilirler. Bu, ikonlar\u0131n farkl\u0131 ekran boyutlar\u0131nda ve cihazlarda her zaman keskin ve profesyonel g\u00f6r\u00fcnmesini sa\u011flar. Ayr\u0131ca, SVG’ler genellikle daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131na sahiptir ve taray\u0131c\u0131lar taraf\u0131ndan kolayca \u00f6nbelle\u011fe al\u0131nabilir. React Icons, bu SVG’leri do\u011frudan bile\u015fen olarak sundu\u011fu i\u00e7in, taray\u0131c\u0131n\u0131n ek bir font dosyas\u0131 indirmesine veya CSS kurallar\u0131 uygulamas\u0131na gerek kalmaz, bu da render performans\u0131n\u0131 art\u0131r\u0131r.<\/p>\n

Performans a\u00e7\u0131s\u0131ndan bir di\u011fer \u00f6nemli \u00f6zellik ise “tree-shaking” deste\u011fidir. React Icons paketi olduk\u00e7a geni\u015f bir ikon setine sahip olsa da, modern bundler’lar (\u00f6rne\u011fin, Webpack, Rollup) sayesinde sadece projenizde ger\u00e7ekten kulland\u0131\u011f\u0131n\u0131z ikonlar nihai \u00fcretim paketine dahil edilir. Bu, uygulaman\u0131z\u0131n bundle boyutunu gereksiz yere \u015fi\u015firmemesini ve daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar. Geli\u015ftiriciler, ihtiya\u00e7 duyduklar\u0131 ikonlar\u0131 belirli alt dizinlerden (\u00f6rne\u011fin, react-icons\/fa<\/code> for Font Awesome, react-icons\/md<\/code> for Material Design) import ederek bu optimizasyondan tam olarak faydalanabilirler.<\/p>\n

Son olarak, React Icons, ikonlar\u0131n kolayca \u00f6zelle\u015ftirilebilmesine olanak tan\u0131r. Her ikon bile\u015feni, size<\/code>, color<\/code>, className<\/code> ve style<\/code> gibi standart React props’lar\u0131n\u0131 kabul eder. Bu sayede geli\u015ftiriciler, ikonlar\u0131n boyutunu, rengini ve di\u011fer CSS \u00f6zelliklerini dinamik olarak de\u011fi\u015ftirebilir, uygulaman\u0131n tasar\u0131m sistemine tamamen uyum sa\u011flamas\u0131n\u0131 sa\u011flayabilirler. Ayr\u0131ca, IconContext.Provider<\/code> kullanarak t\u00fcm ikonlar i\u00e7in global varsay\u0131lan ayarlar tan\u0131mlama imkan\u0131 da mevcuttur, bu da tutarl\u0131l\u0131\u011f\u0131 sa\u011flamak ve tekrarlayan koddan ka\u00e7\u0131nmak i\u00e7in olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r. T\u00fcm bu \u00f6zellikler, React Icons’\u0131 React projelerinde ikon y\u00f6netimi i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir \u00e7\u00f6z\u00fcm haline getirmektedir.<\/p>\n

Neden React Icons Tercih Edilmeli? Avantajlar\u0131<\/h3>\n

React Icons’\u0131n React geli\u015ftiricileri aras\u0131nda pop\u00fclerlik kazanmas\u0131n\u0131n ard\u0131nda yatan bir\u00e7ok somut avantaj bulunmaktad\u0131r. Bu avantajlar, hem geli\u015ftirici deneyimini (DX) iyile\u015ftirir hem de nihai \u00fcr\u00fcn\u00fcn performans\u0131n\u0131 ve bak\u0131m kolayl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/p>\n

Geli\u015ftirici Deneyimi (DX):<\/strong>
\nReact Icons’\u0131n en b\u00fcy\u00fck avantajlar\u0131ndan biri, sundu\u011fu tek tip API’dir. Farkl\u0131 ikon k\u00fct\u00fcphanelerinden (Font Awesome, Material Design, Ant Design vb.) gelen ikonlar\u0131 kullanmak istedi\u011finizde, her biri i\u00e7in farkl\u0131 entegrasyon y\u00f6ntemleri veya API’ler \u00f6\u011frenmek zorunda kalmazs\u0131n\u0131z. React Icons, t\u00fcm bu ikonlar\u0131 ayn\u0131 bile\u015fen yap\u0131s\u0131 alt\u0131nda sunar: import { IconName } from 'react-icons\/prefix';<\/code> ve <\/code> \u015feklinde. Bu tutarl\u0131l\u0131k, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, \u00f6\u011frenme e\u011frisini d\u00fc\u015f\u00fcr\u00fcr ve kod karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azalt\u0131r. \u0130kon arama ve \u00f6nizleme i\u00e7in sunulan web sitesi (react-icons.github.io\/react-icons\/) de geli\u015ftiricilerin do\u011fru ikonu h\u0131zl\u0131ca bulmas\u0131na yard\u0131mc\u0131 olarak prototipleme ve geli\u015ftirme s\u00fcre\u00e7lerini h\u0131zland\u0131r\u0131r.<\/p>\n

Performans:<\/strong>
\nReact Icons’\u0131n SVG tabanl\u0131 olmas\u0131, performans a\u00e7\u0131s\u0131ndan \u00f6nemli faydalar sa\u011flar. SVG’ler, piksel tabanl\u0131 g\u00f6r\u00fcnt\u00fclerden farkl\u0131 olarak, \u00e7\u00f6z\u00fcn\u00fcrl\u00fckten ba\u011f\u0131ms\u0131zd\u0131r ve her boyutta netli\u011fini korur. Bu, uygulaman\u0131z\u0131n farkl\u0131 cihazlarda ve ekran yo\u011funluklar\u0131nda profesyonel g\u00f6r\u00fcnmesini garantiler. Ayr\u0131ca, ikon fontlar\u0131n\u0131n aksine, taray\u0131c\u0131lar\u0131n ek bir font dosyas\u0131 indirmesine veya karma\u015f\u0131k font render mekanizmalar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rmas\u0131na gerek kalmaz. Bu da sayfa y\u00fckleme s\u00fcrelerini ve render performans\u0131n\u0131 iyile\u015ftirir. En \u00f6nemlisi, modern JavaScript bundler’lar\u0131n\u0131n (Webpack, Rollup) “tree-shaking” yetenekleri sayesinde, React Icons paketi ne kadar b\u00fcy\u00fck olursa olsun, nihai \u00fcretim paketine yaln\u0131zca projenizde ger\u00e7ekten kulland\u0131\u011f\u0131n\u0131z ikonlar dahil edilir. Bu, gereksiz kodun elenmesini ve bundle boyutunun minimumda tutulmas\u0131n\u0131 sa\u011flar, b\u00f6ylece uygulaman\u0131z daha h\u0131zl\u0131 y\u00fcklenir ve daha az bant geni\u015fli\u011fi t\u00fcketir.<\/p>\n

Esneklik ve Kapsam:<\/strong>
\nReact Icons, y\u00fczlerce farkl\u0131 ikon k\u00fct\u00fcphanesinden binlerce ikonu tek bir \u00e7at\u0131 alt\u0131nda toplar. Bu geni\u015f yelpaze, hemen hemen her t\u00fcrl\u00fc proje veya tasar\u0131m ihtiyac\u0131na uygun bir ikon bulabilmenizi sa\u011flar. \u0130ster bir e-ticaret sitesi, ister bir kurumsal uygulama, ister bir ki\u015fisel blog geli\u015ftiriyor olun, React Icons’\u0131n sundu\u011fu \u00e7e\u015fitlilik sayesinde d\u0131\u015far\u0131dan ba\u015fka ikon kaynaklar\u0131na ba\u011f\u0131ml\u0131 kalma ihtiyac\u0131n\u0131z azal\u0131r. Ayr\u0131ca, ikonlar\u0131n CSS arac\u0131l\u0131\u011f\u0131yla kolayca stilize edilebilmesi (boyut, renk, g\u00f6lge vb.), uygulaman\u0131z\u0131n mevcut tasar\u0131m sistemiyle sorunsuz bir \u015fekilde entegre olmas\u0131n\u0131 sa\u011flar. CSS mod\u00fclleri, Styled Components, Emotion veya Tailwind CSS gibi pop\u00fcler stilizasyon yakla\u015f\u0131mlar\u0131yla tamamen uyumludur.<\/p>\n

Bak\u0131m Kolayl\u0131\u011f\u0131:<\/strong>
\nTek bir ikon \u00e7\u00f6z\u00fcm\u00fc kullanmak, projenin bak\u0131m\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r. Farkl\u0131 ikon k\u00fct\u00fcphanelerini ayr\u0131 ayr\u0131 y\u00f6netmek, ba\u011f\u0131ml\u0131l\u0131klar\u0131 g\u00fcncellemek ve uyumluluk sorunlar\u0131yla u\u011fra\u015fmak yerine, React Icons’\u0131 tek bir ba\u011f\u0131ml\u0131l\u0131k olarak y\u00f6netirsiniz. K\u00fct\u00fcphanenin d\u00fczenli g\u00fcncellemeleri, yeni ikon setlerinin veya mevcut ikon setlerindeki g\u00fcncellemelerin projenize kolayca entegre edilmesini sa\u011flar. Bu merkezi y\u00f6netim, uzun vadede projenin s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131r\u0131r ve geli\u015ftiricilerin ikonlarla ilgili sorun giderme yerine daha \u00f6nemli \u00f6zellikler geli\u015ftirmeye odaklanmas\u0131na olanak tan\u0131r.<\/p>\n

\u00d6zetle, React Icons, geli\u015ftiricilere ikon y\u00f6netimi konusunda basit, performansl\u0131, esnek ve bak\u0131m\u0131 kolay bir \u00e7\u00f6z\u00fcm sunarak React projelerinde vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015ftir.<\/p>\n

Kurulum ve Temel Kullan\u0131m: Ad\u0131m Ad\u0131m Rehber<\/h3>\n

React Icons’\u0131 projenize dahil etmek ve kullanmaya ba\u015flamak olduk\u00e7a basittir. \u0130\u015fte ad\u0131m ad\u0131m kurulum ve temel kullan\u0131m rehberi:<\/p>\n

1. Kurulum:<\/strong>
\nReact projenize React Icons’\u0131 eklemek i\u00e7in tercih etti\u011finiz paket y\u00f6neticisini kullanabilirsiniz. Komut sat\u0131r\u0131n\u0131z\u0131 a\u00e7\u0131n ve projenizin k\u00f6k dizininde a\u015fa\u011f\u0131daki komutlardan birini \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n

* npm ile:<\/strong>
\n npm install react-icons<\/code>
\n* yarn ile:<\/strong>
\n yarn add react-icons<\/code><\/p>\n

Bu komut, React Icons paketini projenizin node_modules<\/code> dizinine indirir ve package.json<\/code> dosyan\u0131za ba\u011f\u0131ml\u0131l\u0131k olarak ekler.<\/p>\n

2. \u0130konlar\u0131 Bulma:<\/strong>
\nReact Icons, bir\u00e7ok farkl\u0131 ikon k\u00fct\u00fcphanesini tek bir \u00e7at\u0131 alt\u0131nda toplad\u0131\u011f\u0131 i\u00e7in, arad\u0131\u011f\u0131n\u0131z ikonu bulmak i\u00e7in k\u00fct\u00fcphanenin resmi web sitesini kullanman\u0131z en verimli yoldur: [react-icons.github.io\/react-icons\/](https:\/\/react-icons.github.io\/react-icons\/).
\nBu sitede, t\u00fcm mevcut ikon setlerini g\u00f6rebilir, arama \u00e7ubu\u011funu kullanarak belirli ikonlar\u0131 bulabilir ve ikonlar\u0131n nas\u0131l import edilece\u011fini g\u00f6steren \u00f6rnek kod par\u00e7ac\u0131klar\u0131n\u0131 kopyalayabilirsiniz. Her ikonun \u00f6n\u00fcnde, hangi k\u00fct\u00fcphaneden geldi\u011fini belirten bir \u00f6nek bulunur (\u00f6rne\u011fin, Fa<\/code> for Font Awesome, Md<\/code> for Material Design, Ai<\/code> for Ant Design, Bs<\/code> for Bootstrap Icons vb.).<\/p>\n

3. \u0130mport Etme:<\/strong>
\nBir ikonu kullanmak i\u00e7in, onu ilgili ikon setinin alt dizininden import etmeniz gerekir. \u00d6rne\u011fin, Font Awesome’dan bir “beer” ikonu (FaBeer<\/code>) kullanmak istiyorsan\u0131z:<\/p>\n

import { FaBeer } from 'react-icons\/fa';<\/code><\/pre>\n
Material Design’dan bir “home” ikonu (MdHome<\/code>) kullanmak istiyorsan\u0131z:<\/p>\n
import { MdHome } from 'react-icons\/md';<\/code><\/pre>\n
Bootstrap Icons’dan bir “alarm” ikonu (BsAlarm<\/code>) kullanmak istiyorsan\u0131z:<\/p>\n
import { BsAlarm } from 'react-icons\/bs';<\/code><\/pre>\n
Bu \u015fekilde, sadece ihtiyac\u0131n\u0131z olan ikonlar\u0131 import ederek “tree-shaking” optimizasyonundan maksimum fayda sa\u011flars\u0131n\u0131z.<\/p>\n
4. Kullan\u0131m:<\/strong>
\n\u0130konu import ettikten sonra, onu bir React bile\u015feni gibi JSX i\u00e7inde kullanabilirsiniz:<\/p>\n
import React from 'react';\nimport { FaBeer } from 'react-icons\/fa';\n\nfunction MyComponent() {\n  return (\n    
\n      
Bir bira zaman\u0131! <\/p>\n    <\/div>\n  );\n}\n\nexport default MyComponent;<\/code><\/pre>\n
5. \u00d6zelle\u015ftirme:<\/strong>
\nReact Icons, ikonlar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc kolayca \u00f6zelle\u015ftirmenizi sa\u011flayan \u00e7e\u015fitli props’lar sunar:<\/p>\n
*   size<\/code>: \u0130konun boyutunu ayarlar (\u00f6rne\u011fin, \"1em\"<\/code>, \"24px\"<\/code>, 32<\/code>). Say\u0131sal de\u011ferler varsay\u0131lan olarak px<\/code> birimi olarak yorumlan\u0131r.
\n*   color<\/code>: \u0130konun rengini ayarlar (\u00f6rne\u011fin, \"red\"<\/code>, \"#007bff\"<\/code>, \"var(--primary-color)\"<\/code>).
\n*   className<\/code>: \u0130kona \u00f6zel bir CSS s\u0131n\u0131f\u0131 eklemenizi sa\u011flar, bu sayede CSS dosyalar\u0131n\u0131zda veya stil bile\u015fenlerinizde ikonu stilize edebilirsiniz.
\n*   style<\/code>: \u0130kona do\u011frudan inline CSS stilleri uygulaman\u0131z\u0131 sa\u011flar.<\/p>\n
\u0130\u015fte birka\u00e7 \u00f6zelle\u015ftirme \u00f6rne\u011fi:<\/p>\n
import React from 'react';\nimport { FaBeer, MdHome } from 'react-icons\/fa'; \/\/ MdHome Font Awesome'da yok, d\u00fczeltelim\nimport { MdHome } from 'react-icons\/md'; \/\/ Do\u011fru import\n\nfunction MyCustomIcons() {\n  return (\n    
\n      
K\u0131rm\u0131z\u0131 ve b\u00fcy\u00fck bir bira ikonu: <\/p>\n      
K\u00fc\u00e7\u00fck ve mavi bir ev ikonu: <\/p>\n      
CSS s\u0131n\u0131f\u0131 ile stilize edilmi\u015f bir ikon: <\/p>\n      
Inline stil ile: <\/p>\n    <\/div>\n  );\n}\n\nexport default MyCustomIcons;<\/code><\/pre>\n
my-custom-icon<\/code> s\u0131n\u0131f\u0131n\u0131 CSS dosyan\u0131zda \u015fu \u015fekilde tan\u0131mlayabilirsiniz:<\/p>\n
\/ App.css veya benzeri bir stil dosyas\u0131nda <\/em>\/\n.my-custom-icon {\n  animation: spin 2s linear infinite;\n  margin-left: 10px;\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}<\/code><\/pre>\n
6. Global Ayarlar (IconContext.Provider<\/code>):<\/strong>
\nE\u011fer uygulaman\u0131zdaki t\u00fcm ikonlara veya belirli bir b\u00f6l\u00fcmdeki ikonlara ayn\u0131 varsay\u0131lan stil ayarlar\u0131n\u0131 uygulamak isterseniz, react-icons\/lib<\/code>‘den IconContext<\/code>‘i import edip IconContext.Provider<\/code> bile\u015fenini kullanabilirsiniz. Bu, ikonlar\u0131n size<\/code>, color<\/code>, className<\/code> gibi \u00f6zelliklerini merkezi bir yerden y\u00f6netmenizi sa\u011flar.<\/p>\n
import React from 'react';\nimport { FaBeer } from 'react-icons\/fa';\nimport { MdHome } from 'react-icons\/md';\nimport { IconContext } from 'react-icons'; \/\/ IconContext'i import et\n\nfunction App() {\n  return (\n    \/\/ T\u00fcm ikonlara varsay\u0131lan ayarlar\u0131 uygula\n    \n      
\n        \n        
Global ayarlara sahip bir bira ikonu: <\/p>\n        
Global ayarlara sahip bir ev ikonu: <\/p>\n        {\/ Burada bireysel props'lar global ayarlar\u0131 ge\u00e7ersiz k\u0131lar <\/em>\/}\n        
\u00d6zel renkli bir bira ikonu: <\/p>\n      <\/div>\n    <\/IconContext.Provider>\n  );\n}\n\nexport default App;<\/code><\/pre>\n
Bu temel ad\u0131mlarla React Icons’\u0131 projelerinize kolayca entegre edebilir ve y\u00fczlerce ikonu etkili bir \u015fekilde kullanmaya ba\u015flayabilirsiniz.<\/p>\n
Geli\u015fmi\u015f Kullan\u0131m Senaryolar\u0131 ve \u0130pu\u00e7lar\u0131<\/h3>\n
React Icons’\u0131n temel kullan\u0131m\u0131n\u0131n \u00f6tesinde, uygulaman\u0131z\u0131n performans\u0131n\u0131, esnekli\u011fini ve eri\u015filebilirli\u011fini art\u0131rmak i\u00e7in kullanabilece\u011finiz baz\u0131 geli\u015fmi\u015f senaryolar ve ipu\u00e7lar\u0131 bulunmaktad\u0131r.<\/p>\n
1. Dinamik \u0130kon Y\u00fckleme ve Ko\u015fullu Render:<\/strong>
\nUygulaman\u0131z\u0131n durumuna veya kullan\u0131c\u0131 etkile\u015fimlerine ba\u011fl\u0131 olarak farkl\u0131 ikonlar\u0131 dinamik olarak g\u00f6stermeniz gerekebilir. Bu, \u00f6zellikle bir “status” g\u00f6stergesi, bir “alert” t\u00fcr\u00fc veya bir navigasyon men\u00fcs\u00fcndeki aktif \u00f6\u011feyi belirtmek gibi durumlarda kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
import React, { useState } from 'react';\nimport { FaCheckCircle, FaTimesCircle } from 'react-icons\/fa';\nimport { MdInfo, MdWarning } from 'react-icons\/md';\n\nfunction StatusIndicator({ status }) {\n  let IconComponent;\n  let iconColor;\n\n  switch (status) {\n    case 'success':\n      IconComponent = FaCheckCircle;\n      iconColor = 'green';\n      break;\n    case 'error':\n      IconComponent = FaTimesCircle;\n      iconColor = 'red';\n      break;\n    case 'info':\n      IconComponent = MdInfo;\n      iconColor = 'blue';\n      break;\n    case 'warning':\n      IconComponent = MdWarning;\n      iconColor = 'orange';\n      break;\n    default:\n      return null;\n  }\n\n  return (\n    \n  );\n}\n\nfunction App() {\n  const [currentStatus, setCurrentStatus] = useState('success');\n\n  return (\n    
\n      \n