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
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-iconsDaha sonra basit bir şekilde istediğiniz iconları kullanabilirsiniz.
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
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 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.
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.
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
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
