الأيقونات

تستخدم DGA مجموعة Hugeicons. يثبّت dga-style الحزمة @hugeicons/react والمجموعة المجانية بنمط الخطوط المستديرة @hugeicons/core-free-icons.

الاستخدامCopy Anchor Link

import { HugeiconsIcon } from "@hugeicons/react";
import { ArrowRight01Icon } from "@hugeicons/core-free-icons";

<HugeiconsIcon icon={ArrowRight01Icon} size={20} className="rtl:-scale-x-100" aria-hidden />

• الأحجام. استخدم 16 أو 20 أو 24px داخل عناصر التحكم، بما يطابق أحجام أزرار DGA الصغير sm والمتوسط md والكبير lg.
• اللون. ترث الأيقونات currentColor. استخدم رموز الأيقونات (text-icon-default وtext-icon-primary وtext-icon-success …)، وهي تحقق 3:1 على كل سطح.
• التسميات. الأيقونات التزيينية تأخذ aria-hidden. وأزرار الأيقونة وحدها تحتاج إلى aria-label.

الانعكاس في RTLCopy Anchor Link

اعكس الأيقونات التي تدل على اتجاه أو حركة: الأسهم والأقواس الزاوية و«التالي» و«السابق» وفواصل مسار التنقل. أضف rtl:-scale-x-100. ولا تعكس الشعارات ولا علامات الصح ولا أزرار الوسائط (زر التشغيل هو نفسه في العربية) ولا الساعات ولا الأرقام.

التصفّحCopy Anchor Link