React Bootstrap Icons Kullanımı

Günümüzde çok sayıda ikon kütüphanesi bulunmakta. Bunlardan popüler olan bir tanesi de Bootstrap Iconsdur. Ücretsiz olan bu ikonları web sayfalarımızda ve uygulamalarımızda rahatlıkla kullanabiliriz. Bootstrap Icons kullanırken hem svg olarak ve hemde bir span içerisinde sayfamıza dahil edebiliriz.

Normal hali ile hem web safyalarımızda ve hemde React uygulamalarımızda Bootstrap Icons kullanabiliriz. Fakat eğer React JS ile kullanmak istiyorsak güzel bir seçenekde React Bootstrap Icons modülüdür. İkonları uygulamamıza bir komponent şeklinde eklememize izin verir. Bu da daha güzel bir kod yazmak anlamına gelecektir. Bu modülü kullanmadan önce uygulamamıza eklememiz gerekmektedir.

React Bootstrap Icons Kurulumu

Bu modülü kurmak için sistemde npm veya yarn paket yöneticisi bulunmalıdır. Eğer npm modülü kullanılıyor ise terminali açarak uygulamanın bulunduğu dizine gelip aşağıdaki komutu çalıştırmak yeterli olacaktır.

npm install react-bootstrap-icons --save

Eğer yarn paket yöneticisi kullanılıyor ise

yarn add react-bootstrap-icons

şeklinde projeye eklenebilir. Projeye gerekli kütüphaneyi kurduktan sonra artık rahatlıkla bu ikon kütüphanesini kullanılabilir.

React Projejine Ikon Ekleme

Gerekli modülü kurduktan sonra uygulamamız içerisinde ikonları kullanmaya başlayabiliriz. Bunun için istediğimiz ikonu bulmamız ve sonrasında projeye dahil etmemiz gerekiyor. Eğer aradığınız ikon adlarını biliyorsanız onları kullanabilirsiniz. Fakat bilmiyorsanız gerekli ikon isimlerini bulmak için Bootstrap Icons sayfasında istediğiniz ikonları ve adlarını bulabilirsiniz.

Mesela Airplane ikonunu projemizde kullanmak istersek öncelikle bu ikonu import etmemiz gerekiyor. Sonrasında istediğimiz yerde bir metin gibi kullanabiliriz.

import { Airplane } from 'react-bootstrap-icons';


function Content() {

   return (
       <div>Sanki bir <Airplane /> gördüm.</div>
   );

export default Content;

Görüldüğü gibi kolayca istediğiniz ikonu kullanabilirsiniz. Burada dikkat edilmesi gereken önemli bir husus şudur, Bootstrap Icons isimleri pencil-squaire şeklinde yazılır. Fakat bu React Bootstrap Icons ile kullanıldığında camel case yazım şeklinde yazılmalıdır bunun anlamı PencilSquaire şeklinde kullanılmalıdır.

Sonuç

Çok sayıda bulunan ücretli ve ücretsiz ikon depolarından olan Bootstrap Icons ücretsiz bir üründür. Kullanırken bir react komponenti şeklinde projeye eklenir. Kullanımı kolaydır. Sizin de kullandığınız bu tür araçlar var mı?