Strapi Plugin: IconHub

Elinizdeki içerik orijinal olarak Türkçe yazılmamıştır. Bu metin otomatik çeviri ile Türkçeye aktarılmıştır.

Strapi IconHub kendi projelerim için geliştirdiğim özel bir eklenti olarak başladı — Strapi'de simgeleri yönetmek için hafif ama güçlü bir çözümdü. Zamanla, başkaları için de faydalı olabileceğini fark ettim, bu yüzden geliştirdim ve halka açık hale getirdim. Şu an itibarıyla, hem ham SVG'yi hem de devasa Iconify simge kütüphanesini kutudan çıktığı gibi destekleyen tek Strapi simge çözümlerinden biridir.

---

✨ Özellikler

• 🔍 Iconify aracılığıyla 200 binden fazla simge arasında arama yapın
• 🎨 Strapi arayüzü içinde görsel simge seçici
• 🧩 Hem simge adını hem de ham SVG kodunu saklar
• 🧱 Herhangi bir koleksiyon türünde veya tekli türde kullanın
• ⚙️ Dinamik, stilize ön yüz renderlama için ideal
• 🚀 Hafif ve performans dostu

---

📦 Kurulum

Eklentiyi tercih ettiğiniz paket yöneticisiyle kurun:

# npm
npm i @arshiash80/strapi-plugin-iconhub

# yarn
yarn add @arshiash80/strapi-plugin-iconhub

Ardından yönetici panelini yeniden oluşturun:

# npm
npm run build && npm run develop

# yarn
yarn build && yarn develop

---

✅ Kurulumu Doğrulama

Kurulduktan sonra, Ayarlar > Eklentiler bölümüne gidin ve "IconHub"ın listelendiğini onaylayın.

---

🛠️ Kullanım Kılavuzu

1. İçerik Tipi Oluşturucu'ya gidin.
2. Yeni bir özel alan ekleyin.
3. Özel sekmesine geçin ve IconHub'ı seçin.
4. Şemanızı güncellemek için Kaydet'e tıklayın.
5. Artık, girişleri oluştururken veya düzenlerken, Iconify tarafından desteklenen bir simge seçici göreceksiniz:

Strapi'de saklanan yapı şöyle görünür:

type IconField = {
  iconName: string;   // örn. "mdi:home"
  iconData: string;   // Ham SVG dizesi
  width?: number;     // Simgelerin isteğe bağlı genişliği (Iconify'dan)
  height?: number;    // Simgelerin isteğe bağlı yüksekliği (Iconify'dan)
}

---

🧪 Örnek Ön Yüz (Next.js)

İşte hem @iconify/react hem de ham SVG renderlamayı kullanan basit bir örnek.

import { Icon } from "@iconify/react"; // Iconify'ın React bileşenini içe aktarın

// API'den dönen her etiket öğesinin beklenen şeklini tanımlayın
type Tag = {
  name: string;
  icon: {
    iconName: string;   // Iconify simge adı (örn. "mdi:home")
    iconData: string;   // Özel renderlama için ham SVG dizesi
    width?: number;     // SVG'nin isteğe bağlı genişliği
    height?: number;    // SVG'nin isteğe bağlı yüksekliği
  };
};

export default async function Home() {
  // Strapi API'den etiket verilerini çekin
  const res = await fetch("http://localhost:1337/api/tags");
  const json = await res.json();
  const tags: Tag[] = json.data;

  return (
    <div className="w-full h-screen flex flex-col justify-center items-center gap-5">
      <h1 className="text-5xl font-semibold mb-10">Strapi IconHub Eklenti Demou</h1>

      {/* Bölüm 1: @iconify/react Icon kullanarak simgeleri renderlama */}
      <section className="text-center">
        <h2 className="text-2xl font-semibold mb-4">@iconify/react Icon Kullanımı</h2>
        <div className="flex flex-wrap gap-2 justify-center">
          {tags.map((tag, i) => (
            <div
              key={i}
              className="bg-gray-800 px-3 py-2 rounded flex items-center gap-2"
            >
              <Icon icon={tag.icon.iconName} /> {/* Iconify'ın bileşeniyle renderlar */}
              <span>{tag.name}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Bölüm 2: Ham SVG verilerini kullanarak simgeleri renderlama */}
      <section className="text-center mt-10">
        <h2 className="text-2xl font-semibold mb-4">Ham SVG Kullanımı</h2>
        <div className="flex flex-wrap gap-2 justify-center">
          {tags.map((tag, i) => (
            <div
              key={i}
              className="bg-gray-800 px-3 py-2 rounded flex items-center gap-2"
            >
              {/* Ham SVG dizesini dangerouslySetInnerHTML kullanarak renderlar */}
              <svg
                width={tag.icon.width || 16}
                height={tag.icon.height || 16}
                viewBox={`0 0 ${tag.icon.width} ${tag.icon.height}`}
                dangerouslySetInnerHTML={{ __html: tag.icon.iconData }}
              />
              <span>{tag.name}</span>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

---

🎨 Stil ve Özelleştirme

Ham SVG verileri saklandığı için, sınıflar veya satır içi nitelikler kullanarak özel stiller uygulayabilirsiniz.

⚠️ Not: Eklenti Iconify'dan SVGlery kullandığı için, onları dangerouslySetInnerHTML ile renderlamak güvenlidir. Yine de, bunu yalnızca güvenilir içerik kaynaklarıyla yapın.

// Iconify kullanılıyor
<Icon icon={icon.iconName} className="text-green-500 text-5xl" />
<Icon icon={icon.iconName} className="text-red-500 text-2xl" />

// Ham SVG kullanılıyor
<svgwidth={48}
  height={48}
  className="text-green-500"
  viewBox={`0 0 ${icon.width} ${icon.height}`}
  dangerouslySetInnerHTML={{ __html: icon.iconData }}
/>

<svgwidth={24}
  height={24}
  className="text-red-500"
  viewBox={`0 0 ${icon.width} ${icon.height}`}
  dangerouslySetInnerHTML={{ __html: icon.iconData }}
/>

---

🔐 Uyumluluk

• ✅ Strapi v4 ve v5
• ✅ TypeScript desteği
• ✅ Tüm modern ön yüz framework'leriyle uyumlu (Next.js, Vue vb.)