Photo by Gensa Hub on Unsplash

REACT UI STYLING

Iconları React Projesine Nasıl Dahil Ederiz ?

Geçen yazıda Tipografi ve Font konusuna değinmiştik. Bu yazıda da fontlar gibi sıkça kullandığımız Iconları React projesine nasıl dahil edeceğimize bakacağız.

Genelde iconlar için SVG ve PNG formatları kullanılır. Ama Web Uygulamaları geliştirmede SVG bu yarışı kazanmış gibi gözüküyor, bunda tasarım dili ve yapıların daha sadeleşmesi ve colorların daha dinamik olarak bu tasarım yapıları içerisinde değiştirilebilir olması. Bizi Vector Graphics olarak hazılanmış SVG kullanmaya itmiştir. Bir diğer neden de hazır icon kütüphanelerinin oluyor olması.

Aşağıdaki resimde ile Google Fonts, FontAwesome, ReactIcon, SVG ile Icon kullanma

Sample Code Result

Font Awesome

Font Awesome linkine gidin. Aşağıdaki fontlarından ihtiyaç duyduklarınızı indirin.

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-regular-svg-icons

Daha sonra basit bir şekilde istediğiniz iconları kullanabilirsiniz.

Font Awesome kullanımı..

Bunun gibi bir çok icon türünü yapısında barındıran React Icons oldukça kullanışlı. Şimdi nasıl kullanıldıklarına bakalım.

React Icons

React Icons adresinden ilgili kütüphaneyi indirin

npm install react-icons --save

react-icon kullanımı

Peki sabit Font icon setleri kullanmak yerine SVG direk kullanmak istersek

SVG Import Ederek Direk Icon Olarak Kullanma

Burda herhangi bir SVG internet indirip JS dosyasının içerisine gömerek veya dışardan SVG import ederek bunları component olarak kullanabiliriz.

SVG static veya import ederek kullanma…

SVG iconlarından Font Seti Oluşturma

Font Icon Generator Araçları SVG iconlarızı bir font seti halinde oluşturup kullanabilmenizi sağlar. Bunun 2 avantajından bahsedersek;

• iconlara tek tek network yükleme derdinden sizi kurtarması
• iconlara erişim için tek tek kod içerisinde SVG import ekleme zorunluluğundan kurtarmasıdır

Fontastic Font Icon Seti Oluşturalım. (Not: Burada Fontastic benzeri çok başarılı başka araçlarda var. icomoon.io fontello, fantasicon)

Set içerisine istediğiniz SVG iconları ekleyin..

Daha sonra oluşturacağınız font grubunda kullanacağınız iconları seçin ve Customize düğmesine basın

Bir sonraki ekranda Font’lar için indekslemeleri ve ClassMapping göreceksiniz.

Fontastic — Customize

Sonraki adımda paralı üye değilseniz oluşturduğunuz Fontları Local projenize ekleyip kullanmak için Publish adımı için local ortamınıza Download Edin.

Fontastic Download

Kendi Iconlarımızı Kullanan Kod

Ekstra Not: Gelen bir yorum üzerine SVG’yi React Component dönüştüren bir kütüphane olduğunu anladım. Onun linkini buraya not olarak ekliyeyim. SVGR . Gördüğüm kadarı ile SVG’nizi alıp bir bileşen kodu veriyor size. Bu bileşen kodunu Icon, ReactNative, Typescript, Ref, Memo, Title prop özellikleri olacak şekilde üretebiliyor.

Örnek Kod

• Font and Icons

Referanslar

• FontAwesome
• React Icons
• Fontastic

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için **bu linke **tıklayabilirsiniz.