trker-icon
Kayıt Ol
Entegrasyon Rehberi

Nasıl Kullanılır trker-icon

Profesyonel ikonları iş akışınıza dahil edin. Projenize uyan yöntemi seçin — hepsini kullanmak zorunda değilsiniz.

Çıktı Formatları

Projenize uygun dağıtım formatını seçin. Her birinin farklı avantajları var — ihtiyaçlarınıza göre tercih edebilirsiniz.

Hangi formatı kullanmalıyım?

🗂️ SVG Sprite — Çoğu web uygulaması için ideal. Tek dosya, tarayıcı cache'ler, tam CSS kontrolü.

📄 Inline SVG — Az sayıda ikon veya path bazlı CSS kontrolü gerektiğinde.

🔤 Icon Font — Zaten icon font kullanıyorsan veya sıfır kurulumla CDN istiyorsan.

🖼️ PNG — Yalnızca SVG desteklenmeyen ortamlar için (email, native app).

Özellik 🗂️ SVG Sprite 📄 Inline SVG 🔤 Icon Font 🖼️ PNG
Kurulum
Entegrasyon sprite.svg'yi indir + <use href> ile referans ver SVG markup'ı direkt HTML'e yapıştır CSS'i dahil et (CDN veya kendi sunucun) <img> tag'i ekle, CSS gerekmez
Zorluk ●●● Kolay ●●● Kolay ●●● Kolay ●●● Kolay
CDN desteği gerekmiyor gerekmiyor ✓ gerekmiyor
Performans
Tek HTTP isteği ✓ ~ asset isteği yok ✓ ✗
Tarayıcı cache'leyebilir ✓ ✗ ✓ ~ dosya başına — her ikon ayrı cache'lenir
Dosya boyutu ✓ pack ile küçük tutulabilir ~ ikon sayısıyla büyür ✓ pack ile küçük tutulabilir ~ ikon sayısı × boyut
Gzip / Brotli ✓ gzip ~70% ✓ sadece sayfa bazlı ✓ gzip ~70% ~ zaten binary sıkıştırılmış
Görsel
Keskin render (her boyut) ✓ ✓ ~ küçük boyutlarda hafif bulanık ✗ büyütülünce pikselleşir
CSS ile renk ✓ ✓ path bazlı renk kontrolü ✓ ✗
CSS animasyon / hover ✓ ✓ ~ sadece element bazlı ✗
Çok renkli ikon desteği ✓ renkler SVG'ye hardcode edilir ✓ path bazlı, tam kontrol ✗ tek renk, font desteklemez ✓ export sırasında sabit
Kısıtlamalar
Tüm ikonlar mevcut ✓ ✓ ~ fill-based only ✓
Temiz HTML markup ✓ ✗ ✓ ✓
✓ Evet ~ Kısmi / duruma göre ✗ Hayır
174
SVG
bireysel dosya
174
Icon Font
fill-based, font uyumlu
174
PNG
her boyut, 16–512px
1

Format seçin

SVG Sprite

Önerilen Kurulum yok

Sadece ihtiyacın olan ikonlarla özel bir sprite oluştur — sayfa bazlı bile olabilir. Dosyayı projeye ekle, <use href> ile referans ver. Tek HTTP isteği, tarayıcı cache'ler, tam CSS renk kontrolü.

Artılar

✓ Sayfadaki tüm ikonlar için tek HTTP isteği
✓ Tarayıcı cache'ler — sayfalar arası yeniden kullanılır
✓ currentColor ile CSS renk ve animasyon
✓ Temiz HTML — şablonlarda SVG markup yok

Eksiler

✗ Planlama gerektirir — sadece kullandığın ikonları dahil et
✗ Şişirilmiş sprite (kullanılmayan ikonlar) bant genişliği harcar
<!-- sprite.svg dosyasını sayfanın başına göm --> <svg xmlns="http://www.w3.org/2000/svg" style="display:none"> <symbol id="trker-home" viewBox="0 0 640 640"> <path fill="currentColor" d="M..."/> </symbol> </svg> <!-- Kullan --> <svg class="w-6 h-6 text-blue-500"> <use href="#trker-home"/> </svg> <!-- Veya external dosya --> <svg class="w-6 h-6"> <use href="/icons/sprite.svg#trker-home"/> </svg>
⚠ Tüm ikonları içeren sprite'ı kullanma. Pack Builder ile sadece o sayfada kullandığın ikonları içeren bir sprite oluştur. Tüm ikonları içeren dev bir sprite kullanırsan tarayıcı hepsini indirir — hiç kullanmadıkların dahil. Özel sprite oluştur →

Inline SVG — Önerilen Yöntem

SVG kodunu doğrudan HTML'e yapıştır. currentColor sayesinde CSS rengi otomatik miras alır. Ekstra HTTP isteği yok, tam CSS kontrolü.

Neden SVG? — Font render'ı tarayıcıdan tarayıcıya değişebilir; SVG her zaman piksel-perfect görünür. Renk, boyut, hover efekti tamamen CSS ile kontrol edilir.
<!-- Icon browser'dan kopyala, yapıştır --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"> <path fill="currentColor" d="M..."/> </svg> <!-- CSS ile renk --> <svg class="w-6 h-6 text-blue-500" viewBox="0 0 640 640"> <path fill="currentColor" d="M..."/> </svg>

Pack Builder'dan indirdiğin ZIP içinde bireysel .svg dosyaları bulunur. Laravel'de <x-icon name="home" /> gibi Blade component'e sarabilirsin.

Icon Font — TTF · WOFF · WOFF2 + CSS

Tek bir CSS dosyası yükle, <i> tag'i ile kullan. Font uyumlu tüm ikonlar dahil edilir. Mevcut font-based sistemlerle kolayca entegre olur.

🔤
TTF
Desktop / legacy
🌐
WOFF
Web standard
⚡
WOFF2
%30 daha küçük
<!-- 1. CSS'i yükle (CDN veya kendi sunucun) --> <link rel="stylesheet" href="trker-icon.css"> <!-- 2. Kullan --> <i class="trker trker-home"></i> <i class="trker trker-settings trker-2x"></i>
⚠ Sadece fill-based (stroke içermeyen) ikonlar font'a dahil edilir. Duotone ve animated ikonlar font formatını desteklemez.

SVG Sprite — Tüm ikonlar tek dosyada

Tüm ikonlar tek bir sprite.svg dosyasında <symbol> olarak tanımlanır. <use> ile referans verilir — tek HTTP isteği, tam CSS kontrolü.

1 Sprite dosyasını sayfaya göm (veya external olarak referans ver)
<svg xmlns="http://www.w3.org/2000/svg" style="display:none"> <symbol id="trker-home" viewBox="0 0 640 640"> <path fill="currentColor" d="M..."/> </symbol> <!-- ...diğer ikonlar --> </svg>
2 İkonu kullan
<!-- Inline (aynı sayfa) --> <svg class="w-6 h-6 text-primary"> <use href="#trker-home"/> </svg> <!-- External dosya --> <svg class="w-6 h-6 text-primary"> <use href="/icons/sprite.svg#trker-home"/> </svg>
💡 Tüm ikonları tek bir sprite'a koyabileceğiniz gibi, her sayfa için ayrı sprite oluşturabilirsiniz — böylece tarayıcı sadece o sayfada kullanılan ikonları indirir.

PNG — Email, native app, legacy destek

SVG desteklemeyen ortamlar için. Icon browser'dan istediğin boyutta (16–512px) PNG olarak indir. Renk değiştirilemez — indirmeden önce rengi ayarla.

16px
Favicon / UI
32px
Favicon / UI
64px
Toolbar / list
128px
Card / button
256px
Print / export
512px
Print / export

Icon browser'da herhangi bir ikona tıkla → sağ panelde PNG butonuna bas → boyut seç → indir. ZIP içindeki SVG dosyalarını da Inkscape, Figma veya ImageMagick ile toplu PNG'ye dönüştürebilirsin.

# ImageMagick ile toplu dönüştürme
convert -background none icon.svg -resize 64x64 icon-64.png
2

Kurulum

Her yöntem bağımsız bir seçenektir. Projenize uygun olanı seçin.

Build adımı yok. HTML'inize tek satır ekleyin, hazırsınız.

1 <head> etiketine ekleyin

Mevcut sağlayıcılar:

jsDelivr
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trker-icon@latest/dist/trker-icon.css">
cdnjs
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trker-icon/latest/trker-icon.css">
unpkg
<link rel="stylesheet" href="https://unpkg.com/trker-icon@latest/dist/trker-icon.css">
2 İkonları hemen kullanmaya başlayın
<i class="trker trker-home"></i>
★

Premium CDN mevcut

Premium ikon setine CDN üzerinden erişmek için yükseltin.

Premium Al

Build pipeline'ı olan projeler için idealdir (Webpack, Vite vb.).

1 Paketi yükleyin
npm install trker-icon --save
2 CSS'i giriş dosyanıza import edin
import 'trker-icon/dist/trker-icon.css';
3 HTML'de ikonları kullanın
<i class="trker trker-home"></i>

NPM ile aynı, Yarn paket yöneticisi kullanır.

1 Paketi ekleyin
yarn add trker-icon
2 CSS'i giriş dosyanıza import edin
import 'trker-icon/dist/trker-icon.css';
3 HTML'de ikonları kullanın
<i class="trker trker-home"></i>

Paketi indirin ve dosyaları kendiniz barındırın — internet bağımlılığı yok.

1 Zip dosyasını indirin
★ Premium Al
2 Projenize çıkartın ve kopyalayın

dist/ klasörünü projenizin assets dizinine kopyalayın.

3 HTML'de CSS dosyasını bağlayın
<link rel="stylesheet" href="/assets/trker-icon/dist/trker-icon.css">
3

Temel Kullanım

Vanilla HTML

<i class="trker trker-home"></i>

Laravel Blade Bileşenleri

Blade şablonlarınızda ikonları dinamik olarak kullanmak:

// Dynamic Icon
<i class="trker trker-{{ $pageIcon }}"></i>

// Component based
<x-trker-icon name="settings" class="text-primary" />
4

Stil ve Yardımcı Sınıflar

Boyutlandırma

Basit sınıf ekleriyle ikonları ölçeklendirin. Tüm boyutlar mevcut font-size'a göredir.

★
.trker-xs
★
.trker-sm
★
.trker-lg
★
.trker-2x
★
.trker-3x
★
.trker-4x
★
.trker-5x
<i class="trker trker-home trker-2x"></i>

Sabit Genişlik

Tüm ikonları aynı genişliğe zorlar — hizalı listeler ve navigasyon menüleri için idealdir.

⚙ settings
★ star
⬡ hexagon
<i class="trker trker-settings trker-fw"></i>
<i class="trker trker-star trker-fw"></i>

Döndür & Çevir

İkonları 90° adımlarla döndürün veya yatay/dikey olarak aynalayın.

.trker-rotate-90
.trker-rotate-180
.trker-rotate-270
.trker-flip-h
.trker-flip-v
<i class="trker trker-arrow-up trker-rotate-90"></i>
<i class="trker trker-arrow-right trker-flip-h"></i>

Kenarlık

İkonun etrafına çerçeve ekleyin. Yuvarlak, dairesel veya kare seçin.

★
.trker-border
★
.trker-border-circle
★
.trker-border-square
<i class="trker trker-star trker-border-circle"></i>

Pull (Float)

Bir ikonu sola veya sağa kaydırın, metin etrafında sarsın.

★ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<i class="trker trker-quote trker-pull-left trker-3x"></i>
Your text wraps around the icon...

Yığın

Bileşik ikonlar oluşturmak için iki ikonu üst üste katmanlayın.

○ ★
<span class="trker-stack trker-2x">
  <i class="trker trker-circle trker-stack-2x"></i>
  <i class="trker trker-star trker-stack-1x"></i>
</span>

Animasyonlar

Altı yerleşik animasyon sınıfı — ekstra CSS gerekmez.

.trker-spin
.trker-pulse
.trker-beat
.trker-bounce
.trker-shake
.trker-fade
<i class="trker trker-spinner trker-spin"></i>
<i class="trker trker-heart trker-beat"></i>
<i class="trker trker-bell trker-shake"></i>
5

Renkler & Framework'ler

İkonlar mevcut yazı rengini miras alır — herhangi bir CSS framework'ü veya saf CSS ile stillendirebilirsiniz.

★ #ef4444
★ #f97316
★ #fbbf24
★ #10b981
★ #3b82f6
★ #8b5cf6
★ #ec4899
★ #64748b

Use Tailwind's text-* utilities directly on the icon element.

★ text-red-500
★ text-blue-500
★ text-emerald-500
★ text-primary shadow-neon
<!-- Tailwind color utilities -->
<i class="trker trker-star text-red-500"></i>
<i class="trker trker-star text-blue-500"></i>
<i class="trker trker-star text-emerald-500"></i>

<!-- Hover state -->
<i class="trker trker-heart text-slate-400 hover:text-pink-500"></i>

<!-- Arbitrary value -->
<i class="trker trker-star text-[#ff6b6b]"></i>

Bootstrap's text-* contextual classes work the same way.

★ text-danger
★ text-primary
★ text-success
★ text-warning
<!-- Bootstrap contextual colors -->
<i class="trker trker-x-circle text-danger"></i>
<i class="trker trker-info text-primary"></i>
<i class="trker trker-check text-success"></i>
<i class="trker trker-alert text-warning"></i>

<!-- Inside a button -->
<button class="btn btn-primary">
  <i class="trker trker-save me-2"></i> Save
</button>

Bulma uses has-text-* helpers for color.

★ has-text-danger
★ has-text-primary
★ has-text-success
★ has-text-warning
<!-- Bulma has-text-* helpers -->
<i class="trker trker-heart has-text-danger"></i>
<i class="trker trker-star has-text-primary"></i>

<!-- Inside a Bulma button -->
<button class="button is-primary">
  <span class="icon">
    <i class="trker trker-check"></i>
  </span>
  <span>Confirm</span>
</button>

No framework? Just use color in your CSS — icons inherit it automatically.

★ color: #e74c3c
★ color: #3498db
★ opacity: 0.4
/* CSS */
.icon-danger {
  color: #e74c3c;
}
.icon-muted {
  color: currentColor;
  opacity: 0.4;
}

<!-- HTML -->
<i class="trker trker-trash icon-danger"></i>
<i class="trker trker-info icon-muted"></i>
6

Erişilebilirlik

İkonlar görsel öğelerdir — anlam taşımadıkça ekran okuyucuların bunları duyurmasına gerek yoktur. Arayüzünüzü erişilebilir tutmak için bu kalıpları uygulayın.

Dekoratif ikonlar aria-hidden

İkon yalnızca görseldir. Yardımcı teknolojilerden gizleyin.

<button class="btn">
  <i class="trker trker-save"
     aria-hidden="true"></i>
  Save
</button>
Anlamlı ikonlar (etiket yok) role + aria-label

İkon tek başına bilgi taşıyor. Metin alternatifi sağlayın.

<i class="trker trker-warning"
  role="img"
  aria-label="Warning"></i>
Yalnızca ikon içeren butonlar aria-label on button

Butonda görünür metin yok. Ekran okuyucuların eylemi duyurabilmesi için aria-label kullanın.

<button aria-label="Close dialog">
  <i class="trker trker-x"
     aria-hidden="true"></i>
</button>
Metin yanında ikon aria-hidden + visible text

Metin zaten eylemi açıklıyor. Tekrarı önlemek için ikonu gizleyin.

<a href="/download">
  <i class="trker trker-download"
     aria-hidden="true"></i>
  Download
</a>

Kısa kural: ikonu kaldırmak anlamı değiştiriyorsa metin alternatifi ekleyin. Değiştirmiyorsa aria-hidden="true" kullanın.

CSS'inizi sade tutun

Yalnızca gerçekten kullandığınız ikonları dahil edin. İkon tarayıcısından özel bir paket oluşturun — hangi ikonların ve hangi CSS modüllerinin dahil olacağını siz seçin. Daha küçük dosya, daha hızlı yükleme.

Paket Oluştur

Başlamaya hazırsınız!

Kapsamlı kütüphanemizi keşfedin ve sonraki projeniz için mükemmel ikonları bulun.

İkonlara Göz At Dokümantasyonu Oku