Featured Icon
أيقونة داخل حاوية مظلَّلة تتصدر البطاقات والحالات الفارغة وصناديق الحوار. خفيفة وصلبة وبحد فقط، وستة ألوان.
الإصدار 0.2.0 ·
التثبيت
bunx --bun shadcn@latest add @dga/featured-iconالاستخدام
import { CheckmarkCircle02Icon } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { FeaturedIcon } from "@/components/ui/featured-icon";
<FeaturedIcon variant="success">
<HugeiconsIcon icon={CheckmarkCircle02Icon} />
</FeaturedIcon>تلفت Featured Icon الانتباه إلى بطاقة أو حالة فارغة أو صندوق حوار، وتلمّح إلى معناه باللون.
البنية
- Root: المربع أو الدائرة المظلَّلة.
- Icon: أي أيقونة من Hugeicons، بحجم يتناسب مع الحاوية (من 16 إلى 28px).
أمثلة
المظهر واللون
light تظليل خفيف، وhard تعبئة مصمتة، وoutlined حلقة، بالألوان brand وneutral وsuccess وerror وwarning وinfo. الأحجام من sm 32px إلى xl 56px؛ ويجعلها circle مستديرة.
اتجاه RTL
ضعها في بداية البطاقة؛ وتحتاج الأيقونات الاتجاهية إلى rtl:-scale-x-100.
إمكانية الوصول
- زخرفية افتراضيًا (
aria-hidden)، لأن النص بجوارها يحمل المعنى. - إذا كانت الأيقونة وحدها تحمل المعنى، مرّر
role="img"وaria-label. - تُفحص الأيقونات بنسبة 3:1 مقابل تعبئتها وسطح الصفحة.
مرجع API
FeaturedIcon
أيقونة داخل حاوية مظلّلة، تتصدّر البطاقات والحالات الفارغة والنوافذ الحوارية. تزيينية افتراضيًا؛ مرّر role="img" وaria-label إن كانت الأيقونة تحمل معنى.
| الخاصية | النوع | القيمة الافتراضية |
|---|---|---|
"brand" | "neutral" | "success" | "error" | "warning" | "info"عائلة اللون. | "brand" | |
| ||
"light" | "outlined" | "hard"`light` حاوية مظلّلة، و`hard` حاوية مصمتة، و`outlined` حلقة. | "light" | |
| ||
"sm" | "md" | "lg" | "xl"حجم الحاوية: من `sm` 32px إلى `xl` 56px. | "xl" | |
| ||
booleanحاوية دائرية بدل المربعة. | false | |
| ||
يقبل أيضًا خصائص العنصر الذي يُصيّره.
الاختلافات عن DGA
| التغيير | السبب |
|---|---|
--featured-icon-brand-background (new) | Featured icon brand hard fill (white icon): primary-sa-flag-600. |
--featured-icon-brand-background-light (new) | Featured icon brand light fill: primary-sa-flag-50, primary-sa-flag-950 in dark mode. |
--featured-icon-brand-icon (new) | Featured icon brand icon on the light fill and outlined: primary-sa-flag-600, primary-sa-flag-300 in dark mode. |
--featured-icon-brand-border (new) | Featured icon brand outlined border: primary-sa-flag-200, primary-sa-flag-800 in dark mode. |
عرض جميع الاختلافات (26) لهذا المكوّن أسباب الاختلافات مكتوبة بالإنجليزية.
التباين
108 زوجًا لونيًا فُحص · جميعها تجتاز WCAG 2.1 AAعرض 18 حالةإخفاء
| النمط / الحالة | الفاتح | الداكن |
|---|---|---|
| brand / hard | 4.74:1 3:1 | 8.82:1 3:1 |
| brand / light | 4.53:1 3:1 | 7.57:1 3:1 |
| brand / outlined | 4.54:1 3:1 | 10.38:1 3:1 |
| neutral / hard | 4.77:1 3:1 | 4.59:1 3:1 |
| neutral / light | 4.34:1 3:1 | 7.51:1 3:1 |
| neutral / outlined | 4.57:1 3:1 | 9.38:1 3:1 |
| success / hard | 5.69:1 3:1 | 8.72:1 3:1 |
| success / light | 5.39:1 3:1 | 7.88:1 3:1 |
| success / outlined | 5.44:1 3:1 | 10.80:1 3:1 |
| error / hard | 4.83:1 3:1 | 9.68:1 3:1 |
| error / light | 4.44:1 3:1 | 7.04:1 3:1 |
| error / outlined | 4.62:1 3:1 | 9.01:1 3:1 |
| warning / hard | 5.42:1 3:1 | 9.32:1 3:1 |
| warning / light | 5.20:1 3:1 | 8.57:1 3:1 |
| warning / outlined | 5.19:1 3:1 | 11.30:1 3:1 |
| info / hard | 4.56:1 3:1 | 9.24:1 3:1 |
| info / light | 4.25:1 3:1 | 7.49:1 3:1 |
| info / outlined | 4.37:1 3:1 | 9.88:1 3:1 |
يحتاج النص إلى تباين 4.5:1، والأيقونات وحلقات التركيز إلى 3:1. الحالات المعطّلة مستثناة. تقرير التباين الكامل