JavaScript

kubai-icons, düz JavaScript ile simge oluşturur ve <kubai-icon> web bileşenini sağlar.

Kurulum

bash

npm install kubai-icons

Öğe oluşturma

createIcon, sayfaya ekleyebileceğiniz bir <svg> öğesi döndürür:

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

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

trigger: "parent" yalnızca simgeyi oluşturduktan hemen sonra, bu örnekteki gibi eşzamanlı olarak sayfaya eklerseniz çalışır. Bir simgeyi sonradan eklemek için Sunucuda oluşturma bölümüne bakın ve bağlamayı kendiniz yapın.

Yer tutucuları değiştirme

Simge istediğiniz her yere data-kubai içeren bir öğe ekleyin, ardından her öğeyi kendi SVG'siyle değiştirmek için replaceIcons işlevini çağırın. Kullandığınız her simgeyi icons seçeneğinde listeleyin. Bu örnek bir paketleyici kullandığınızı varsayar:

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>

Web bileşenini kullanma

Bileşeni bir CDN'den yüklemek için tek bir script etiketi ekleyin. Her simge dosyasını o simge ilk kullanıldığında indirir.

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>

Sunucuda oluşturma

toSvg, simgeyi hareketsiz bir HTML dizesi olarak döndürür:

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

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

Tarayıcıda hareket eklemek için oluşturulan <svg> öğesini bulun, animate işlevine verin ve sonucu hareketi başlatacak öğeye bağlayın:

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

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