REACT SAMPLES
React Icon Samples
Bu bölümde React projelerinde Icon ile nasıl çalıştığımı, bunlar üzerinde yaptığım örnek ve denemelerden bahsedeceğim.
Icon’lar anlatmak istediğimiz hikayeleri daha sade, daha basit bir şekilde anlatmamızı sağlayan küçük resimlerdir.
Her düğmeyi, hep açıklamayı metin ile uzun uzun yapmak bazen karmaşaya ve ekranın yoğun gözükmesine neden olur. Bu anlatımları iconlar ile veriyor olmak hem işleri hemde kullanabilirliği arttırır.
Bu bölümde Icon’lar ile ilgili yaptığım denemelerden ve örneklerden bahsedeceğim.
Örneklere başlamadan önce bu konuda yazmış olduğum blog yazılarından bazılarını burada paylaşmak istiyorum.
1. Icon With Badge
Özellikle alarm/bildirim sayılarını göstermek için icon ve bunun üzerinde bir sayı gösteririz. Aşağıdaki örnekte bir icon ve bunun sol üst köşesinde badge sayısını eklediğim bir örnek gerçekleştirdim.
Icon with Badge 2 kısımdan oluşuyor. Bir iconun kendisi , bir diğeride badge dediğimiz kırmızı çember içerisindeki yazı kısmı
Şimdi gelin bu bileşeni nasıl geliştirdiğimizi bir inceleyelim. Burada icon için AntdIcons kullanıyoruz. AntDIcons üzerinde Badge Container ekliyoruz.
import {useEffect, useState} from 'react';
import {AntdIcons} from '@od/knowledges/icon/components/AntdIcons/AntdIcons';
import './IconWithAlarmCount.scss';
const IconWithAlarmCount = (props) => {
const [alarmCount, setAlarmCount] = useState(props.alarmCount);
useEffect(() => {
if (props.alarmCount > -1 && props.alarmCount !== alarmCount) {
setAlarmCount(props.alarmCount);
}
}, [props.alarmCount, alarmCount]);
return (
<div className="icon-with-badge-container">
<AntdIcons.DeleteOutlined style={{fontSize: '20px'}} />
<div className="badge-container">{alarmCount > 0 && <div className="badge-text">{alarmCount}</div>}</div>
</div>
);
};
export default IconWithAlarmCount;Şimdi gelin Styling nasıl Scss içerisinde gerçekleştirdiğimize bir bakalım.
.icon-with-badge-container {
position: relative;
padding: 5px;
.badge-container {
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 16px;
max-width: 16px;
min-width: 16px;
.badge-text {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 9px;
line-height: 12px;
border-radius: 7px;
height: 14px;
min-width: 14px;
max-width: 14px;
background-color: #ff3924;
color: white;
}
}
}Not: Badge şeklinde hazır iconlar halinde UI Bileşen kütüphanelerinde de bulunmaktadır.
- Antd Badge https://ant.design/components/badge
- Antd Float Button https://ant.design/components/float-button
- NextUI Badge https://nextui.org/docs/components/badge
2. Different Icon Set
Bu örnekte farklı icon gruplarından faydalanarak bir icon set oluşturmak isteyelim. Icon ve benzeri bir kütüphane kullanırken, bu icon setlerinin tüm icon türlerini desteklemediği durumlar olabilir ve uygulamanız için diğer icon kümelerinden alternatif iconlar seçmeniz gerekir.
Bu durumda aşağıdaki gibi native bir yönden faydalanabilirsiniz.
Veya farklı iconları icomoon tarzı bir uygulamada bir icon set haline getirip bunu kendi projeniz için özelleştirebilirsiniz. Aşağıdaki örnek icomoon kullanarak gerçekleştirilmiştir.
3. AWS Icons
AWS Iconlarını kullanarak farkı opsiyonlar ile AWS Iconlarını kullanabilecek altyapı geliştirdim.
4. AWS Icon Grouping Resources
Bu örnek bir AWS Mimari Hizmet Kaynakları Icon Görüntüleme uygulamasıdır. Iconlar Topoloji ve Mimari Tasarımı için ve Listelerde kullanılır.
5. AWS Icon & Info
Bu örnek bir AWS Icon ve Bilgilendirme uygulamasıdır. Iconlar Topoloji ve Mimari Tasarım ve Listelerde kullanılır.
6. AWS Icon Categories
Bu örnek bir AWS Hizmetleri uygulamasıdır. Iconlar hizmet kategorilerine göre gruplandırılmıştır
7. Antd Icons
Aşağıda Antd Icons ile ilgili örneği görebilirsiniz. Öncelikle iconları istediğim rotation verebiliyorum. Hatta iconların sürekli dönmesini direk API üzerinden sağlayabiliyorum.
- <Icon/>
- <Icon rotate={50}/>
- <Icon spin/>
Veye iconları farklı fontSize ve color ve tonlarda çizilmesinide gerçekleştirebiliyoruz.
8. Phosphor Icons
Antd Icons ile birçok icon yeteneğine sahip olsakta, icon çeşitliliği açısından phosphor icons oldukça zengin bir icon grubuna sahip
Phosphor Icons da benzer şekilde farklı font weight iconlar oluşturabiliyoruz.
- Thin
- Light
- Regular
- Bold
- Fill
- Duetone
Renklerini ve boyutlarını ayarlayabiliyoruz.
9. Fav Icons
Web sayfalarının Domain isimlerinden iconlarını bulmasını sağlayacak bir API
https://www.google.com/s2/favicons?domain=${domain}&sz=32
Bu API de söyle bir durum var sadece bu domain için FavIcon yoksa boş bir resim dönüyor
Ve bu yukarıdaki 404 hatalarını <img onerror> yakalama şansınız yok. Bu durumda bu iconun fav iconu olup olmadığını anlayıp kendi iconunuzu koyamazsınız.
Bunun bir alternatif yöntemi Fetch işlemi ile önceki iconu çekmeye çalışıp sonrasında validation işlemlerini gerçekleştirmek.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
