Günümüz web uygulamalarında ve mobil uygulamalarda sıkça ikonları kullanıyoruz. Birer simge olarak kullandığımız ikonlar bazen bir uygulamayı ifade eder, bazen bir duyguyu. Bazen bir menüyü daha anlaşılır kılmak için kullanırız.
Günümüzde çok sayıda ikon kütüphanesi (icons library) bulunmaktadır. Bu ikonları bazen resim olarak ve bazen font gibi uygulamalarımızda kullanabiliyoruz. Bir çok fikri, duyguyu, uygulamayı veya bir etkinliğin sembolü olarak ikonları kullanıyoruz.
Bu Yazıda Aşağıdaki Konuları Öğreneceğiz
- React Icons nedir?
- Hangi ikon kütüphanelerini kullanır.
- React Icons kütüphanesi nasıl kurulur?
- React Icons uygulamaya nasıl yüklenir?
- İkon renk ve boyutu nasıl değiştirilir?
- Aynı anda birden fazla ikon seti nasıl kullanılır?
- Kullanılabilecek ikon setlerinin import kodları.
React Icons Nedir?
Günümüzde çok popüler olan bir çok ikon kütüphanesini (icons library) React uygulamalarında kolayca kullanmak için geliştirilmiş bir kütüphanedir. İkonları çok kolay bir şekilde uygulamamıza yerleştirmemizi ve onların stillerini değiştirerek istediğimiz gibi görünmesini sağlayan güzel bir kütüphanedir. Font Awesame, Meterial UI Icons, Ant Desing Icons gibi çok sayıdaki ikon kütüphanesini destekler.
React Icons kütüphanesini kullandığımızda desteklediği ikon kütüphanelerinden dilediğimizi uygulamamıza kolaylıkla ekleyebiliriz.
import {AiFillHeart} from ‘react-icons/bs’;
...
<AiFillHeart />
...Kullanmak istediğin ikonu import et ve kolayca bir React bileşeni olarak uygulamana ekle.
Font Awesome Kütüphanesini React Icons İle Nasıl Kullanırız?
Font Awesome çok popüler bir ikon kütüphanesidir. Günümüzde çok kullanılır. React uygulamalarında kullanmak için kolay bir yol React Icons kütüphanesidir. Şimdi adım adım bu kütüphane ile birlikte Font Awesome ikon setini kullanmayı görelim.
React Uygulama Çatısını Oluşturalım
Eğer kendiniz bir react uygulaması geliştiriyorsanız bu adımı atlayarak kendi uygulamanız üzerinde React Icons kütüphanesini kullanmaya başlayabilirsiniz. Bu işlemleri yapabilmeniz için sisteminizde Node.js ve create-react-app kurulu olmalıdır.
- Öncelikle çalışma alanımızda boş bir klasör oluşturalım. Biz react-icons-app olarak isimlendirdik.
- Terminali açalım ve terminal içerisinden bu klasöre girelim
cd react-icons-app - Şimdi react uygulama çatımızı oluşturalım. Bunun için create-react-app kütüphanesinden faydalanacağız. Uygulama klasörü içerisinde olduğumuz için uygulama ismi yerine bir adet nokta (.) kullanıyoruz.
npx create-react-app . - Uygulama çatısı kurulduğunda terminal üzerinden ugulamayı başlatalım.
npm start
Artık React Icons kütüphanesini kullanmaya hazırız.
React Icons Kütüphanesini Nasıl Kullanırız?
Daha önce basit bir giriş yapmıştık. Aslında zaten kullanımı oldukça basit. Öncelikle React Icons web sitesine gitmemiz gerekiyor.
React Icons Kütüphanesini Nasıl Yükleriz?
React Icons kütüphanesini uygulamamıza eklememiz için öncelikle install etmemiz gerekmektedir. Bunu uygulama klasörünün içine girdikten sonra komut satırından yapabiliriz.
npm install react-iconsBu kodu çalıştırdıktan sonra gerekli bileşenler ile birlikte React Icons kütüphanesini ugulamanıza ekleyecektir
React Icons İle Uygulamamıza İkon Nasıl Ekleriz?
Gerekli kurulum yapıldıktan sonra artık uygulamamıza istediğimiz ikonları eklemeye başlayabiliriz.
- Sonra React Icons websitesine gidelim.
- Sayfayı gezerek veya arama yaparak istediğimiz iconu buluyoruz. Çok sayıda kütüphane içerdiği için sol menüden istediğiniz kütüphaneyi seçerek seçim daraltabilirsiniz. Biz font awesome kullanacağımız için oraya tıklıyoruz.
- İstediğimiz ikona tıklıyarak kopyalıyoruz., biz FaRegHeart ikonunu seçtik.
- Kopyaladığımız kodu App.js içerisinde kullanacağımız yere yapıştırıyoruz.
- App.js’nin baş tarafında gerekli import işlemini yapıyoruz.
import {FaRegHeart} from ‘react-icons/bs’; - Uygulamamız içerine bu ikonu ekliyoruz.
<FaRegHeart />
Bu kadar basit. Şimdi uygulama dosyamız şu şekilde görünecektir.
import React from 'react';
import {FaRegHeart} from 'react-icons/fa';
function App() {
return (
<div>
<FaRegHeart />
</div>
)
}
export default App;Eğer birden fazla ikon kullanacaksanız önce hepsini import etmek zorundasınız.
import {FaRegHeart, FaSmile} from 'react-icons/fa';
...
<FaRegHeart />
<FaSmile />
...
Font Awesome kütüphanesi gibi diğer kütüphaneleri de kullanabilirsiniz. Önemli olan kullanacağınız kütüphaneden import etmeyi unutmamak. Mesela Material Design icons setini kullanacaksanız şu şekilde import işlemi yapmanız gerekir.
import {MdAnalytics} from ‘react-icons/md’;
...
<MdAnalytics />
...Not: Icon kodunun başındaki ilk 2 harf ikonun bağlı olduğu ikon setinin baş harflerinden oluştur. Mesela: MdAnalytics ikonunu kullandığınızda baştaki Md harfleri bu Meterial Desing ikon setine ait olduğunu gösterir. İmport ederken de bu iki harfı / işaretinden sonra kullanmamız gerekir.
import {MdAnalytics} from ‘react-icons/md;Aynı Anda Birden Fazla İkon Setini Kullanma
Aynı anda iki veya daha fazla ikon setinden ikon kullanabilirsiniz. Burada dikkat edilmesi gereken durum doğru şekilde import işleminin yapılmasıdır. Her ikon kendi kütüphanesinden import edilmelidir. Mesel hem Font Awesome ve hemde Bootstrap Icons kullanmak istersek.
- Önce kullanacağımız ikonları seçiyoruz.
- Seçtiğimiz ikonları kendi kütüphanelerini belirterek import ediyoruz.
- Sonrasında uygulamamıza ekliyoruz.
import {BsFillAlarmFill} from ‘react-icons/bs’;
import {FaHome} from ‘react-icons/fa’;
...
<BsFillAlarmFill />
<FaHome />
...İkon Sitilleri Nasıl Değiştirilir?
İkonumuzun rengi boyutu gibi özelliklerini kolaylıkla değiştirebiliriz. Bunu yapmanın birkaç yolu bulunoyor.
Html Etiketleri İle İcon Renk ve Boyutunu Değiştirmek
H1-H6 etiketleri içerisinde ikon kullandığımız zaman (farklı bir etiket de olabilir) başlık etiketinin font boyutu ve renk ayarlarını ikona uygulamış oluruz.
<h1><FaHome /></h1>Şeklinde örnek kullanımı görebilirsiniz.
İnline Stil Kullanmak
Yine istediğimiz ikonun bileşeni içerisinde inline sitil kullanabiliriz.
<FaHome style={{color: ‘red’, fontSize: ‘55px’ }} />Bu şekilde ikonumuzun görünüşüne müdahale edebiliriz.
CSS Sitil Sınıfı İle İkon Görünümünü Değiştirme
Hazırladığınız bir sitil sınıfını className kullanarak ikona verebiliriz. Önce sitil dosyamızı import etmemiz gerekir.
import ‘./style.css’,
...
<FaHome className=’css-sinif-adi’ />
...React Icons İle Kullanılan İkon Kütüphane İmport Kodları
Çok sayıda ikon setini React Icons ile kullanabiliriz. Bunları import kodları aşağıdaki gibidir. Kullanmak istediğiniz ikon setini seçtikten sonra, istediğiniz ikona tıklayın ve kopyalanan ikon kodunu IkonAdi yazan yere yapıştırın. Doğru ikon setini seçmeyi unutmayın. Aksi halde ikon görüntülenmeyecektir.
import { IkonAdi } from "react-icons/ai"; //Ant Design Icons
import { IkonAdi } from "react-icons/bs"; //Bootstrap Icons
import { IkonAdi } from "react-icons/bi"; //Boxicons
import { IkonAdi } from "react-icons/cg"; //css.gg
import { IkonAdi } from "react-icons/di"; //Devicon Icons
import { IkonAdi } from "react-icons/fi"; //Feather
import { IkonAdi } from "react-icons/fc"; //Flat Color Icons
import { IkonAdi } from "react-icons/fa"; //Font Awesome Icons
import { IkonAdi } from "react-icons/gi"; //Game Icons
import { IkonAdi } from "react-icons/go"; //Github Octicons Icons
import { IkonAdi } from "react-icons/gr"; //Grommet-Icons
import { IkonAdi } from "react-icons/hi"; //HeroIcons
import { IkonAdi } from "react-icons/im"; //IcoMoon Free
import { IkonAdi } from "react-icons/io"; //Ionicon4
import { IkonAdi } from "react-icons/io5"; //Ionicon5
import { IkonAdi } from "react-icons/md"; //Material Design Icons
import { IkonAdi } from "react-icons/ri"; //Remix Icons
import { IkonAdi } from "react-icons/si"; //Simple Icons
import { IkonAdi } from "react-icons/ti"; //Typicons
import { IkonAdi } from "react-icons/vsc"; //VS Code Icons
import { IkonAdi } from "react-icons/wi"; //Weather IconsReact Icons ile kullanılan ikon kütüphaneleri genellikle ücretsiz olsa da, kullanım hakkı açısından farklı lisansları vardır. Uygulamanıza eklediğiniz kütüphanenin lisansına dikkat etmeniz önemlidir.
Bir Hatırlatma
Son Sözler
React ile uygulama geliştirirken ikon kullanmak istediğinizde React Icons iyi bir seçenek. Çok sayıda ikon setinden istediğinizi seçebilirsiniz ve kolayca uygulamanıza ekleyebilirsiniz.
Sizde ikonlar hakkındaki yorumlarınızı ve sorularınızı yorumlara ekleyerek bizim ile paylaşabilirsiniz.