v1.0.0 · Astro · React · Sprite · Core

Frosicon

kagitmiadam'ın kişisel ikon kütüphanesi.

155 ikon · 4 grup · tek paket, dört hedef

İkonlara bak Playground Kurulum →

Kullanım

Tek paket, dört hedef. İhtiyacına göre seç.

Astro projeleri için varsayılan 
---
import { Facebook1 } from "@kagitmiadam/frosicon"
---
<Facebook1 size={24} color="#FFFFFF" class="hidden lg:block" />

Playground

Boyut, renk ve class değerlerini canlı dene.

Üretilen kod Astro — Kullanım sekmesinden değiştir

İkonlar

Tıkla — Astro formatında kopyalanır (yukarıdaki Kullanım sekmesinden değişir)

155 ikon
Kopyalandı

Dokümantasyon

Detaylı kullanım rehberi.

Frosicon

kagitmiadam'ın kişisel ikon kütüphanesi. Astro, React ve Vanilla HTML için tek paket. Tip güvenli, tree-shake'li, sade.

npm i @kagitmiadam/frosicon

✨ Neler Var

  • 🎯 Astro-first — .astro component olarak doğrudan kullanım
  • ⚛️ React — SVGProps ile tam TypeScript desteği
  • 🧩 Sprite — <symbol> + <use> ile DOM tasarrufu
  • 🪶 Core (vanilla) — string olarak SVG, framework yok
  • 🌗 currentColor desteği — CSS ile renklendir
  • 📦 Tree-shake'li — sadece kullandığın ikon bundle'a girer
  • 🎨 Boyut & renk prop'ları — her component'te size ve color

📐 Hedef Matrisi

Aynı ikon için dört farklı kullanım yolu — projene uygun olanı seç, hepsi aynı paket içinde:

Hedef Kullanım Şekli Avantaj
Astro import { X } from "@kagitmiadam/frosicon" Astro projeleri için varsayılan
React import { X } from "@kagitmiadam/frosicon/react" React/Next/Vite
Sprite import { Icon } from "@kagitmiadam/frosicon/sprite" Çok tekrar eden ikonlar için
Core import { getSvg } from "@kagitmiadam/frosicon/core" Her yerde, framework'süz

🚀 Kullanım

1. Astro (varsayılan import)

---
import { Facebook1, Calendar1 } from "@kagitmiadam/frosicon"
---

<Facebook1 size={24} color="#FFFFFF" class="hidden lg:block" />
<Calendar1 size={32} class="text-white" aria-label="Takvim" />

Props:

Prop Tip Varsayılan Açıklama
size number | string 24 width & height
color string 'currentColor' SVG fill
class string — CSS class
...rest HTMLAttributes<'svg'> — aria-*, data-*, event handler'lar

Alt klasördeki ikonlara da kısayoldan erişebilirsin:

import { Facebook1 } from "@kagitmiadam/frosicon/social-media"

2. React

import { Facebook1, Calendar1 } from "@kagitmiadam/frosicon/react"

export function Header() {
  return (
    <>
      <Facebook1 size={24} color="#fff" className="hidden lg:block" />
      <Calendar1 size={32} className="text-white" aria-label="Takvim" />
    </>
  )
}

⚠️ React'te class değil className kullanılır (JSX kuralı).

Props: SVGProps<SVGSVGElement> + size, color.

Alt grup:

import { Facebook1 } from "@kagitmiadam/frosicon/react/social-media"

3. Sprite — DOM tasarrufu için

Aynı ikonu çok kez kullandığın sayfalar için (örn. uzun listeler). Sprite tüm ikonları bir kez DOM'a gömer; kullandığın yerler sadece referans tutar.

---
// src/layouts/Layout.astro — bir kez
import { IconSprite } from "@kagitmiadam/frosicon/sprite"
---
<html>
  <body>
    <IconSprite />
    <slot />
  </body>
</html>

---
// herhangi bir sayfa
import { Icon } from "@kagitmiadam/frosicon/sprite"
---

<Icon name="Facebook1" size={24} color="#fff" class="hidden lg:block" />
<Icon name="Calendar1" size={32} class="text-white" />

Props:

Prop Tip Açıklama
name IconName TS union — autocomplete'li
size number | string Varsayılan 24
color string Varsayılan 'currentColor'
class string CSS class

4. Core — Vanilla HTML / SSR / herhangi bir framework

import { getSvg, getIconNames } from "@kagitmiadam/frosicon/core"

const svgString = getSvg("social-media/facebook 1", {
  size: 24,
  color: "#1877F2",
  className: "icon icon-facebook",
})

document.querySelector("#slot")!.innerHTML = svgString

console.log(getIconNames()) // mevcut tüm ikonların adları

🎨 Renklendirme — currentColor

Tüm component'ler varsayılan olarak fill="currentColor" kullanır. Yani parent CSS rengi ne ise ikon onu alır:

<div style="color: tomato">
  <Facebook1 size={48} />  {/* Tomato olur */}
</div>

<div class="text-blue-500">
  <Calendar1 size={32} />  {/* Tailwind blue-500 olur */}
</div>

color prop'unu açıkça verirsen onu kullanır:

<Facebook1 color="#1877F2" />

🎯 Hangi Hedefi Ne Zaman?

Senaryo Öneri
Astro projesi, az çeşit/az tekrar ikon Named import (import { X } from "@kagitmiadam/frosicon")
Astro projesi, aynı ikon defalarca tekrarlanıyor (liste, grid) Sprite (<Icon name="X" />)
React projesi /react import
Server'da SVG string'i lazım Core (getSvg(...))
Email template, framework dışı Core

Hepsini aynı projede karıştırabilirsin — çakışma yok.

Inline vs Sprite — küçük performans rehberi

50 yerde aynı Facebook ikonunu kullandığını düşün:

Inline (named import) Sprite
Path data DOM'da 50 kez 1 kez (symbol içinde)
<svg> node 50 50 + 1 sprite
Tree-shake ✅ Sadece kullandığın ikon ❌ Tüm ikonlar bir arada

Pratik: 3-5 ikon farklı yerlerde → inline; 20+ ikon, çoğu birden fazla yerde → sprite.

🧪 TypeScript

Tüm hedeflerde tam tip desteği var:

// React
import type { ComponentProps } from "react"
import { Facebook1 } from "@kagitmiadam/frosicon/react"
type Props = ComponentProps<typeof Facebook1>

// Sprite — IconName union
import type { IconName } from "@kagitmiadam/frosicon/sprite"
const myIcon: IconName = "Facebook1" // ✓ autocomplete'li

📜 Lisans

MIT

Çay demle, kod yaz. ☕