التثبيت

FZ Icons مكتبة أيقونات SVG بطابع سعودي وعربي، على شبكة 24 بكسل، وتاخذ لونها من لون النص تلقائيًا. تقدر تتصفح الأيقونات في صفحة المكتبة. الإصدار الحالي 0.1.0 وفيه 20 أيقونة.

حزمة npm باسم @fzhub/icons قريبًا. الطريقة الشغالة حاليًا هي الروابط المستضافة في هذي الصفحة.

الطريقة الأولى: سكربت

أضف السكربت في صفحتك، وبعدها استخدم الوسم fz-icon في أي مكان.

<script src="https://fzhub.tech/libs/fz-icons/0.1.0/fz-icons.js"></script>

<fz-icon name="dallah"></fz-icon>
<fz-icon name="palm" size="32"></fz-icon>

الخاصية	الوصف	الافتراضي
`name`	اسم الأيقونة	بدون
`size`	الحجم بالبكسل أو أي قيمة CSS	`1em`
`stroke`	سماكة الخط	`2`
`label`	نص لقارئ الشاشة	الأيقونة مخفية عن قارئ الشاشة

السكربت يوفر أيضًا window.FZIcons، وتقدر تستبدل أي عنصر فيه data-fz:

<i data-fz="souq" data-size="20"></i>

<script>
  FZIcons.replace();
</script>

الطريقة الثانية: ES Module

يشتغل مباشرة في المتصفح بدون أدوات بناء، ويرجع الأيقونة كنص SVG.

import { toSvg } from 'https://fzhub.tech/libs/fz-icons/0.1.0/index.js';

el.innerHTML = toSvg('souq', { size: 20 });

خيار `toSvg`	الوصف	الافتراضي
`size`	الحجم	`24`
`strokeWidth`	سماكة الخط	`2`
`color`	اللون	`currentColor`
`class`	كلاس CSS	بدون
`title`	عنوان لقارئ الشاشة	بدون

الدالة ترجع نص فارغ إذا كان اسم الأيقونة غير موجود.

الطريقة الثالثة: Sprite

ملف SVG واحد فيه كل الأيقونات. حمّل ملف Sprite وحطه في موقعك، واستخدم الاسم مع البادئة fz-.

<svg width="24" height="24">
  <use href="/fz-icons.svg#fz-finjan"/>
</svg>

لازم يكون الملف على نفس دومين موقعك، لأن المتصفحات ما تسمح بـ <use> من دومين ثاني.

اللون

الأيقونات تاخذ لون النص، فتغيّره بـ CSS:

.brand-icon {
  color: #a3262a;
}

أسماء الأيقونات

dallah  finjan  palm  dates  tent  mabkhara  fanous  crescent
najdi-house  dunes  mashrabiya  mosque  qibla  hijri-calendar
national-id  arabic-letter  text-rtl  souq  dhow  sadu

لشروط الاستخدام، شوف التراخيص.