الأيقونات المتحركة، Pro

FZ Icons Pro مكتبة مدفوعة فيها 113 أيقونة متحركة بثلاثة أنماط: خطي، وثنائي اللون، ومصمت. وهي منفصلة عن المكتبة المجانية، وتستلمها كحزمة ملفات تضيفها لمشروعك.

الحصول على الحزمة

1. اشترِ المكتبة، ويوصلك مفتاح ترخيص ورابط تحميل موقّع.
2. حمّل الحزمة قبل انتهاء الرابط.
3. إذا انتهى الرابط، اطلب رابط جديد من حسابي. الخطوات في تحميل الترخيص مرة ثانية.

محتوى الحزمة

الاستخدام بالسكربت

انسخ fz-pro.js لموقعك، ثم:

<script src="/fz-pro.js"></script>

<fz-pro name="payment-success" variant="duotone" play="once"></fz-pro>
<fz-pro name="cart-add" play="hover" size="28"></fz-pro>
<fz-pro name="dallah" variant="filled" play="loop" label="ضيافة"></fz-pro>

• hover: تتحرك لما يمر الماوس على الأيقونة أو على العنصر الأب مباشرة، فإذا حطيتها داخل زر تتحرك مع الزر.
• once: تتحرك مرة وحدة كل ما تظهر في الشاشة.

الاستخدام بـ JavaScript

import { toSvg, inject, play } from './fz-pro.esm.js';

inject();
btn.innerHTML = toSvg('cart-add', { variant: 'duotone', play: 'hover', size: 20 }) + ' أضف للسلة';

btn.addEventListener('click', () => play(btn));

الدالة inject تضيف الستايل مرة وحدة، وplay تشغّل الحركة من الكود.

ملفات SVG

كل ملف في مجلد svg/ منفصل ومتحرك لحاله:

<img src="svg/duotone/truck.svg" alt="">

التخصيص

كل الألوان متغيرات CSS، تقدر تحطها على :root أو على أي عنصر:

:root {
  --fz-accent: #e0a23a;
  --fz-g1: #12b886;
  --fz-g2: #0b6e5f;
  --fz-on: #fff;
  --fz-bg: #fff;
  --fz-dur: 1.6s;
  --fz-stroke: 1.75;
}

لنطاق استخدام المكتبة، شوف التراخيص.