JavaScript

kubai-icons تنشئ الأيقونات من JavaScript العادي وتوفر مكوّن الويب <kubai-icon>.

التثبيت

bash

npm install kubai-icons

إنشاء عنصر

createIcon تعيد عنصر <svg> يمكنك إضافته إلى الصفحة:

import { createIcon, Folder, MailPlus } from "kubai-icons";

document.querySelector("#toolbar").append(
  createIcon(Folder, { size: 24 }),
  createIcon(MailPlus, { color: "#EC4899", trigger: "parent" })
);

trigger: "parent" يعمل فقط إذا أضفت الأيقونة إلى الصفحة بشكل متزامن بعد إنشائها، كما في هذا المثال. لإضافة أيقونة لاحقا، راجع العرض على الخادم واربطها بنفسك.

استبدال العناصر النائبة

أضف عنصرا يحمل data-kubai أينما أردت أيقونة، ثم استدعِ replaceIcons لاستبدال كل عنصر بملف SVG الخاص به. اذكر كل أيقونة تستخدمها في الخيار icons. يفترض هذا المثال وجود أداة تجميع:

html

<i data-kubai="folder" data-size="32"></i>
<i data-kubai="calendar-check" data-color="#22C55E"></i>

<script type="module">
  import { replaceIcons, Folder, CalendarCheck } from "kubai-icons";
  replaceIcons({ icons: { Folder, CalendarCheck } });
</script>

استخدام مكوّن الويب

أضف وسم script واحدا لتحميل المكوّن من CDN. ينزّل ملف كل أيقونة عند أول استخدام لها.

html

<script type="module" src="https://cdn.jsdelivr.net/npm/kubai-icons@0/dist/cdn/element.js"></script>

<kubai-icon name="folder"></kubai-icon>
<kubai-icon name="bell-off" size="32" color="#F97316" variant="soft" label="Muted"></kubai-icon>

العرض على الخادم

toSvg تعيد الأيقونة كنص HTML بلا حركة:

import { toSvg, Folder } from "kubai-icons";

const html = toSvg(Folder, { size: 24, title: "Files" });

لإضافة الحركة في المتصفح، ابحث عن عنصر <svg> المعروض، ومرّره إلى animate، ثم اربط النتيجة بالعنصر الذي يجب أن يبدأ الحركة:

import { animate, bindTrigger, Folder } from "kubai-icons";

const svg = document.querySelector("#files svg");
bindTrigger(svg.parentElement, animate(svg, Folder), Folder);