Anatolia Icons: Türkiye Odaklı Açık Kaynak SVG ve İkon Kütüphanesi

anatolia-icons

Yazılım geliştirme süreçlerinde arayüz bileşenleri genellikle global kütüphaneleri çağırıp geçmekten ibaret görülür. Lucide, FontAwesome veya Heroicons paketini kurarız büyüteç, kullanıcı simgesi, çöp kutusu derken standart akışları dakikalar içinde tamamlarız.

Ancak yerel pazara yönelik bir e-ticaret sitesi, bir ödeme adımı, belediye portalı veya kamu entegrasyonu hazırlarken bu hazır dünya aniden duvara toslar. Çünkü hiçbir global sette e-Devlet, Troy, Papara, Trendyol, BKM Express veya yerel kamu kurumlarının standartlaştırılmış vektörleri yer almaz.

Dünyada her coğrafyanın kendi yerel dijital ekosistemini derleyen bağımsız projeleri varken, Türkiye’de bu alanda derli toplu, standart bir kütüphanenin eksikliği hep var. Her geliştirici aynı logoları Google Görseller’den tek tek arıyor, kalitesiz PNG’lerle boğuşuyor ya da tasarım çöplüğüne dönmüş SVG’leri projeye yapıştırmak zorunda kalıyordu.

Bu yerel boşluğu doldurmak ve ekosisteme ortak bir standart kazandırmak amacıyla açık kaynak Anatolia Icons projesini yayına aldım.

“Şunun Düzgün Bir Vektörü Yok mu?”

Bir ödeme veya doğrulama arayüzü kodladığınızı düşünün. Kullanıcıya Troy, Garanti BBVA, Akbank, Papara ve Hepsipay logolarını sunacaksınız.

Tipik bir geliştiricinin izlediği rota genellikle şöyledir:

• İlgili markanın basın kitini (press kit) ara.

• Bulamazsan Google’da “X logo svg” diye aratıp üçüncü parti sitelerden rastgele bir dosya indir.

• İndirilen SVG’yi projeye at: İçinde 800 satırlık gereksiz , Adobe Illustrator kalıntıları, hardcoded stiller ve 150 KB'lık çöp veri olsun.

• Dark mode desteği eklemeye çalış: currentColor tanımlanmadığı için CSS ile renkleri yöneteme.

• Bir logonun boyutu 24x24 viewBox’a sahipken diğeri 512x512 gelsin; grid sistemi paramparça olsun. Sonuç? Projenin asset klasöründe onlarca farklı kaynaktan toplanmış, optimize edilmemiş, dark mode uyumsuz ve bundle boyutunu şişiren devasa bir vektör çöplüğü.

Yerel Bir İhtiyacın Açık Kaynak Çözümü

Anatolia Icons, Türkiye merkezli kamu kurumları, finans kuruluşları, fintech girişimleri, yerli markalar ve açık kaynak topluluklarının logolarını tek bir çatı altında toplayan optimize bir SVG ve bileşen kütüphanesidir.

Buradaki teknik kurgu son derece sade ve herkesin anlayabileceği bir yapıda:

• Sıkı ViewBox ve Grid Standardı: Her bir ikon standart 0 0 24 24 kanvası veya sabit en-boy oranları üzerinde normalize edilir; sayfanızdaki diğer bileşenlerle kusursuz hizalanır.

• SVGO ile Temiz Vektörler: Çizim programlarından taşınan gereksiz XML etiketleri, gizli katmanlar ve gereksiz ondalık hassasiyetleri ayıklanır. 80 KB’lık bir logo, görsel bütünlüğü bozulmadan 1–2 KB seviyesine indirilir.

• Modern CSS ve Dark Mode Desteği: Tek renkli kamu ve sistem simgelerinde hardcoded hex kodları yerine currentColor yapısı benimsenir; Tailwind veya saf CSS sınıflarıyla kolayca renklendirilebilir.

• Tree-Shaking: ESM mimarisi sayesinde projede yüzlerce logo olsa bile yalnızca import ettiğiniz simgeler bundle’a dahil olur.

npm install anatolia-icons # veya pnpm add anatolia-icons

Kullanımı da bir o kadar doğrudan:

import { IconEdevlet, IconTroy, IconPapara } from 'anatolia-icons/react';

export const PaymentMethods = () => { return ( ); };

Bu Kütüphaneye Katkı Vermek Neden Önemli? (Özellikle Öğrenciler İçin)

Açık kaynak dünyası dışarıdan bakıldığında karmaşık algoritmalardan ibaret gibi görünebilir. Birçok üniversite öğrencisi veya sektöre yeni adım atan genç geliştirici, “Ben henüz Linux çekirdeğine ya da devasa bir framework’e PR atamam” çekincesiyle açık kaynak katkısı yapmaktan uzak duruyor.

Oysa açık kaynak kültürü küçük adımlarla başlar ve Anatolia Icons tam olarak herkesin kolayca katkı sunabileceği bir proje.

Üniversite öğrencileri ve kariyerinin başındaki geliştiriciler için bu repoya katkı vermek somut avantajlar sağlar:

• Git ve GitHub Pratiği: Gerçek bir projede Fork, Branch, Pull Request (PR) açma ve code review süreçlerini güvenli bir alanda deneyimlersiniz.

• CV ve Portföy İçin Somut Referans: “Anatolia Icons açık kaynak kütüphanesinde kamu ve fintech kategorilerindeki 10 farklı logonun standardizasyonunu ve CI/CD pipeline optimizasyonunu yaptım” ifadesi, mülakatlarda somut bir mühendislik çıktısıdır.

• Optimizasyon Kültürü Edinmek: Bir SVG dosyasının iç yapısını, DOM’a olan maliyetini, bundle mantığını ve build süreçlerini (Rollup, Vite, SVGO) yakından öğrenirsiniz.

• Ekosisteme Katkı Hissi: Yarın bir gün binlerce geliştiricinin projelerinde kullandığı bir pakette sizin de commit’inizin ve imzanızın olması sektörel motivasyonu ciddi şekilde artırır. Katkıda bulunmak için karmaşık mühendislik süreçlerine gerek yok:

• Eksik bir yerli markanın veya kamu kurumunun resmi vektörünü bulun,

• Standart kurallara göre optimize edin,

• İlgili klasöre ekleyip bir PR açın.

Birlikte Büyütelim

Bu kütüphane tek bir kişinin boş zamanlarında tüm Türkiye’deki kurumları çizip takip edebileceği bir iş değil; yerel geliştirici topluluğunun ortak dijital arşividir.

Bir kurumun logosu mu değişti? Yerel bir kargo firmasının vektörüne mi ihtiyacınız var? Ya da okulunuzun, teknokentinizin logosunu eklemek mi istiyorsunuz?

Repoyu incelemek, projelerinizde kullanmak veya ilk açık kaynak PR’ınızı göndermek isterseniz bekliyorum:

🔗 GitHub: github.com/fikretsefa/anatolia-icons

Açık kaynak paylaştıkça ve birlikte ürettikçe değer kazanır. Repoyu yıldızlayarak (star) destekleyebilir, çevrenizdeki genç geliştirici arkadaşlarınızla paylaşarak onların da ilk katkılarını vermelerine vesile olabilirsiniz.

Daha Fazlası

Ben Fikret Sefa Çakır, 2017 yılından bu yana yazılım geliştirme süreçlerinin tüm aşamalarında — analiz, tasarım, geliştirme, test ve canlıya alma — aktif olarak görev alıyorum.

Kurumsal .NET projeleri, mikroservis mimarileri, güvenli yazılım geliştirme, API tasarımı ve modern frontend teknolojileri üzerine çalışıyor; edindiğim deneyimleri teknik makaleler ve açık kaynak projeleriyle paylaşmaya devam ediyorum.

Daha fazla bilgi almak, danışmak ya da birlikte çalışmak için benimle iletişime geçebilirsiniz.

Daha fazla teknik içerik için:

• GitHub: github.com/fikretsefa

• LinkedIn: linkedin.com/in/fikretsefa/