Photo by Harpal Singh on Unsplash

Series for React Architecture

React Örnek Proje Mimarisi — 4 (Icon Management)

Bu yazıda Icon yapıların FontIcon oluşturmanın ve bunları proje içerisinde nasıl yönetmek gerektiği konusunda düşüncelerimi paylaşacağım.

Öncelikle 3 konu projenin başından itibaren iyi belirleyip iyi planlamamız gereken konular.

• Fontlar (Fontları React Projesine Nasıl Dahil Ederiz ?)
• İkonlar (Iconları React Projesine Nasıl Dahil Ederiz ?)
• Renkler (Renk Modelleri)

İkonlar (icon) uygulama geliştirmenin en başından iyi bir şekilde planlamak çok önemli aksi taktirde projenin içerisinde standart olmayan bir görüntü, aynı amaçta kullanılan farklı iconlar, boyutları , renkleri vb arasında uyumsuzluklar oluşur.

TEKNİK OLARAK

Teknik olarak önerim FontIcon’lar ile çalışmanız. Burada Font Awesome benzeri font icon şeklinde birbiri arkasına eklenmiş iconlar kullanmak, hem icon dosyasının tek seferde indirilmesi hemde svg tek tek import etmeden className üzerinden iconları kullanabilimemize olanak sağlar.

<i className='up'/> 

Tabi her zaman font awesome kütüphanesinin içerisinde icon style veya icon türleri sizin ihtiyacınızı karşılamayacaktır. Bu durumda kendi icon-font yapılarınız oluşturacağınız 3rd Party Araçlardan faydalanabilirsiniz. icomoon.io fontello, fantasicon vb…

İKONLARIN YÖNETİM

Tamam icon-font yapısını oluşturduk diyelim. Bunları proje içerisinde kullanırken direk bu font-iconlar üzerinden çalışmak ne kadar doğru ? Aşağıya doğru düzensiz bir şekilde uzayan class isimleri

.icon-home:before {
    content: "\e900";
}
.icon-home2:before {
    content: "\e901";
}
.icon-home3:before {
    content: "\e902";
}
.icon-office:before {
    content: "\e903";
}
.icon-newspaper:before {
    content: "\e904";
}
.icon-pencil:before {
    content: "\e905";
}
.icon-pencil2:before {
    content: "\e906";
}
.icon-quill:before {
    content: "\e907";
}
.icon-pen:before {
    content: "\e908";
}
.icon-blog:before {
    content: "\e909";
}

....

Aslında bizim UI uygulamalarımızda 2 tür icon bulunur.

• UI_ICONS: Ekranın tasarımı ve mekanikliğini sağlayan ikonlar. Örneğin Sayfa Iconları, Tab Iconları, Chevron (Sag, Sol, Üst, Alt), Alarm iconları gibi..
• DOMAIN_ICONS: Uygulamanızın uzman olduğu içerik alanı doğrultusunda Örneğin Hastane Doküman Sistemi yapıyorsanız , Doküman Türlerine ait iconlar, Dokümanların statuslarine ait iconlar bu içerik alanına göre özelleşmesi gereken iconlardır.

Bu iconları uygulama içerisinde kullanırken arada bir KATMAN oluşturmak çok daha mantıklı olacaktır.

• Bu katman bizim hangi tür Icon kullandığımızı anlatacaktır.
• Diğer bir konuda Iconlar kendi içerisinde bir grup içerisinde bir hiyerarşi içerisinde yer alıyor olabilir. Oluşturacağımız bu JS Katmanı içerisinde bu hireyarşik yapıyı tutabilirsiniz.
• Ayrıca iconlar aynı yapıdayken Domain anlamında Renk ve Boyut değişiklikleri ile başka anlamlarda da kullanılıyor olabilir.

Tüm bu yukarıdaki ihtiyaçları karşılamak için örnegin proje ismimiz ABC olsun ABCIcons.js içerisinde

export const UI_ICON = {
  CHEVRON: {
    DOWN: 'icon-chevron-down',
    UP: 'icon-chevron-up',
    LEFT: 'icon-chevron-left',
    RIGHT: 'icon-chevron-right',
  },
  ALERT: {
    INFO: 'icon-circle-info',
    WARNING: 'icon-warning',
    ERROR: 'icon-error'
  },

Aynı şekilde Domain içinde benzer bir object oluşturabiliriz.

   DOC_STATUS: {
      INITIAL: 'icon-initial',
      READY_FOR_REVIEW: 'icon-ready-for-review',
      REJECTED: 'icon-rejected',
      ACCEDTED: 'icon-accepted',
      SENDED: 'icon-sended',
    },

Bu hiyerarşinin hangi seviyelerde olacağı, veya tutulan prop sadece class ismi mi olacak ayrıca boyut, renk vb.. ekstra bilgileri de içerecek mi konusu sizin uygulamanızın karar vereceği bir konu olmalıdır.

DOC_STATUS: {
      SENDED: {className:'icon-sended', color:'green', size:15}
    },

Peki şimdi bu iconları kullandığımız yerleri düşünelim. Nasıl değişiklikler olacak ? Aşağıdaki örneklerde görebileceğiniz gibi hiyerarşik olarak . gittiğimizde kod editörü bizim için otomatik tamamlayarak hızlıca icon ismini yazabilmemizi sağlatacaktır.

//UI_ICON sample
<i className='icon-chevron-up'/> -> <i className='UI_ICON.CHEVRON.UP'/>

//DOMAIN_ICON sample
<i className='icon-rejected'/> -> <i className='UI_ICON.DOC_REJECTED'/>
<i className='icon-rejected'/> -> <i className='UI_ICON.TASK_REJECTED'/>

Ayrıca DOMAIN_ICON örneklerinde olduğu gibi icon-rejected kullandığımız yere çok özdeşleşmeyen soyut bir isim iken ara katmanda kullandığımız isimler arka planda bulunan icon detaylarından bizi kurtarmış oluyor. Örneğin UI_ICON.DOC_REJECTED şeklinde..

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki(react-mimarisi) diğer yazılara erişmek için bu linke tıklayabilirsiniz.

Bu yazının devamı veya yazı grubundaki(react-styling) diğer yazılara erişmek için bu linke tıklayabilirsiniz.