رفتن به محتوا
هگزترا v0.12 منتشر شد! 🎉 تازه‌ها را ببینید

آیکون

برای استفاده از این شورت‌کد به صورت درون‌خطی، باید قابلیت شورت‌کدهای درون‌خطی در تنظیمات فعال شود:

hugo.yaml
enableInlineShortcodes: true

لیست آیکون‌های موجود را می‌توانید در data/icons.yaml مشاهده کنید.

مثال

نحوه استفاده

{{< icon "github" >}}

آیکون‌های Heroicons نسخه 1 به صورت پیش‌فرض در دسترس هستند.

چگونه آیکون‌های خود را اضافه کنید

فایل data/icons.yaml را ایجاد کنید، سپس آیکون‌های SVG خود را با فرمت زیر اضافه کنید:

data/icons.yaml
your-icon: <svg>محتوای SVG آیکون شما</svg>

سپس می‌توانید از آن در شورت‌کد به این صورت استفاده کنید:

{{< icon "your-icon" >}}

{{< card icon="your-icon" >}}

نکته: Iconify Design منبع خوبی برای یافتن آیکون‌های SVG برای سایت شماست.

بسته‌های آیکون راه دور

آیکون‌های راه دور را می‌توان با استفاده از پیشوند ارائه‌دهنده و به صورت موردنیاز بارگذاری کرد. Hextra از این ارائه‌دهنده‌ها پشتیبانی می‌کند:

ارائه‌دهندهمثالآیکون
Lucide{{< icon "lucide:house" >}}
Tabler Icons{{< icon "tabler:user" >}}
Simple Icons{{< icon "simple:hugo" >}}Hugo

آیکون‌های راه دور در زمان ساخت دریافت می‌شوند. ارائه‌دهنده‌های پیش‌فرض به نسخه اصلی بسته‌ها محدود شده‌اند و از این URLهای CDN بارگذاری می‌شوند:

lucide: "https://unpkg.com/lucide-static@1/icons/%s.svg"
tabler: "https://unpkg.com/@tabler/icons@3/icons/outline/%s.svg"
simple: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/%s.svg"

نام آیکون‌های راه دور در هر جایی از Hextra که نام آیکون می‌پذیرد قابل استفاده است، از جمله کارت‌ها، تب‌ها، نشان‌ها، کال‌اوت‌ها و آیتم‌های منوی نوار ناوبری.

خيارات

المعلمةوصف
nameاسم الأيقونة
attributesسمات الأيقونة.
آخرین به‌روزرسانی در