vadivam 0.0.16 → 0.0.18

package/README.md

@@ -2,15 +2,41 @@
 
 Pixel-perfect, open-source, gorgeous SVG icons for refined interfaces.
 
-![All Vadivam icons](https://raw.githubusercontent.com/praveenjuge/vadivam/main/apps/web/public/preview.png?v=0.0.16)
+![All Vadivam icons](https://raw.githubusercontent.com/praveenjuge/vadivam/main/apps/web/public/preview.png?v=0.0.18)
 
 ```sh
 bun add vadivam
 ```
 
 ```js
-import { icons } from "vadivam";
+import { Activity, createElement } from "vadivam";
 import activitySvgUrl from "vadivam/icons/activity.svg";
+
+const svg = createElement(Activity, { width: 20, height: 20 });
 ```
 
-The canonical source lives in the repository root `icons/` folder. Package files are generated during build.
+Icon nodes are also available through tree-shakable subpaths:
+
+```js
+import Activity from "vadivam/icons/activity";
+```
+
+Replace elements in HTML using `createIcons`:
+
+```html
+<i data-vadivam="activity" aria-label="Activity"></i>
+```
+
+```js
+import { createIcons, icons } from "vadivam";
+
+createIcons({ icons });
+```
+
+`createIcons` accepts `attrs`, `nameAttr`, `root`, and `inTemplates`. Pass a
+shadow root through `root`, or set `inTemplates: true` to process template
+contents. The complete metadata collection remains available as `manifest`,
+or from `vadivam/manifest`.
+
+The canonical source lives in the repository root `icons/` folder. Package
+files are generated during build.

package/dist/createElement.d.ts

@@ -0,0 +1,3 @@
+import type { IconNode, SVGProps } from "./types.js";
+export declare function createElement(iconNode: IconNode, customAttrs?: SVGProps): SVGElement;
+export default createElement;

package/dist/createElement.js

@@ -0,0 +1,17 @@
+import defaultAttributes from "./defaultAttributes.js";
+
+const unsafeAttribute = /^(?:on|href$|xlink:href$|src$)/i;
+function createSvgElement(document, [tag, attrs, children]) {
+  const element = document.createElementNS("http://www.w3.org/2000/svg", tag);
+  for (const [name, value] of Object.entries(attrs)) {
+    if (value !== undefined && !unsafeAttribute.test(name)) element.setAttribute(name, String(value));
+  }
+  for (const child of children ?? []) element.appendChild(createSvgElement(document, child));
+  return element;
+}
+
+export function createElement(iconNode, customAttrs = {}) {
+  if (typeof document === "undefined") throw new Error("createElement() only works in a browser environment.");
+  return createSvgElement(document, ["svg", { ...defaultAttributes, ...customAttrs }, iconNode]);
+}
+export default createElement;

package/dist/createIcons.d.ts

@@ -0,0 +1,10 @@
+import type { Icons, SVGProps } from "./types.js";
+export interface CreateIconsOptions {
+  icons?: Icons;
+  nameAttr?: string;
+  attrs?: SVGProps;
+  root?: Element | Document | DocumentFragment;
+  inTemplates?: boolean;
+}
+export declare function createIcons(options?: CreateIconsOptions): void;
+export default createIcons;

package/dist/createIcons.js

@@ -0,0 +1,38 @@
+import createElement from "./createElement.js";
+import defaultAttributes from "./defaultAttributes.js";
+
+function attributes(element) {
+  return Object.fromEntries(Array.from(element.attributes, ({ name, value }) => [name, value]));
+}
+function classes(value) {
+  if (Array.isArray(value)) return value;
+  return typeof value === "string" ? value.split(/\s+/).filter(Boolean) : [];
+}
+function hasAccessibleName(attrs) {
+  return Object.keys(attrs).some((name) => name.startsWith("aria-") || name === "role" || name === "title");
+}
+function replaceElement(element, { nameAttr, icons, attrs }) {
+  const name = element.getAttribute(nameAttr);
+  if (!name) return;
+  const componentName = name.split("-").filter(Boolean).map((part) => part[0].toUpperCase() + part.slice(1)).join("");
+  const iconNode = icons[componentName];
+  if (!iconNode) {
+    console.warn(`${element.outerHTML} icon name was not found in the provided icons object.`);
+    return;
+  }
+  const elementAttrs = attributes(element);
+  const iconAttrs = { ...defaultAttributes, [nameAttr]: name, ...(hasAccessibleName(elementAttrs) ? {} : { "aria-hidden": "true" }), ...attrs, ...elementAttrs };
+  iconAttrs.class = ["vadivam", `vadivam-${name}`, ...classes(elementAttrs.class), ...classes(attrs.class)].filter((value, index, all) => value && all.indexOf(value) === index).join(" ");
+  element.parentNode?.replaceChild(createElement(iconNode, iconAttrs), element);
+}
+
+export function createIcons({ icons = {}, nameAttr = "data-vadivam", attrs = {}, root = globalThis.document, inTemplates = false } = {}) {
+  if (!Object.keys(icons).length) throw new Error("Please provide an icons object to createIcons().");
+  if (!root) throw new Error("createIcons() only works in a browser environment.");
+  if (!/^[A-Za-z_:][A-Za-z0-9_.:-]*$/.test(nameAttr)) throw new Error("createIcons() received an invalid nameAttr.");
+  for (const element of root.querySelectorAll(`[${nameAttr}]`)) replaceElement(element, { nameAttr, icons, attrs });
+  if (inTemplates) {
+    for (const template of root.querySelectorAll("template")) createIcons({ icons, nameAttr, attrs, root: template.content, inTemplates });
+  }
+}
+export default createIcons;

package/dist/defaultAttributes.js

@@ -0,0 +1,2 @@
+const defaultAttributes = { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round" };
+export default defaultAttributes;

package/dist/iconNodes.d.ts

@@ -0,0 +1,234 @@
+import type { IconNode } from "./types.js";
+export declare const icons: {
+  readonly AArrowDown: IconNode;
+  readonly AArrowUp: IconNode;
+  readonly ALargeSmall: IconNode;
+  readonly Accessibility: IconNode;
+  readonly Activity: IconNode;
+  readonly AirVent: IconNode;
+  readonly Airplay: IconNode;
+  readonly AlarmClockCheck: IconNode;
+  readonly AlarmClockMinus: IconNode;
+  readonly AlarmClockOff: IconNode;
+  readonly AlarmClockPlus: IconNode;
+  readonly AlarmClock: IconNode;
+  readonly AlarmSmoke: IconNode;
+  readonly Album: IconNode;
+  readonly AlignCenterHorizontal: IconNode;
+  readonly AlignCenterVertical: IconNode;
+  readonly AlignEndHorizontal: IconNode;
+  readonly AlignEndVertical: IconNode;
+  readonly AlignHorizontalDistributeCenter: IconNode;
+  readonly AlignHorizontalDistributeEnd: IconNode;
+  readonly AlignHorizontalDistributeStart: IconNode;
+  readonly AlignHorizontalJustifyCenter: IconNode;
+  readonly AlignHorizontalJustifyEnd: IconNode;
+  readonly AlignHorizontalJustifyStart: IconNode;
+  readonly AlignHorizontalSpaceAround: IconNode;
+  readonly AlignHorizontalSpaceBetween: IconNode;
+  readonly AlignStartHorizontal: IconNode;
+  readonly AlignStartVertical: IconNode;
+  readonly AlignVerticalDistributeCenter: IconNode;
+  readonly AlignVerticalDistributeEnd: IconNode;
+  readonly AlignVerticalDistributeStart: IconNode;
+  readonly AlignVerticalJustifyCenter: IconNode;
+  readonly AlignVerticalJustifyEnd: IconNode;
+  readonly AlignVerticalJustifyStart: IconNode;
+  readonly AlignVerticalSpaceAround: IconNode;
+  readonly AlignVerticalSpaceBetween: IconNode;
+  readonly Ambulance: IconNode;
+  readonly Ampersand: IconNode;
+  readonly Ampersands: IconNode;
+  readonly Amphora: IconNode;
+  readonly Anchor: IconNode;
+  readonly Angry: IconNode;
+  readonly Annoyed: IconNode;
+  readonly Antenna: IconNode;
+  readonly Anvil: IconNode;
+  readonly Aperture: IconNode;
+  readonly AppWindowMac: IconNode;
+  readonly AppWindow: IconNode;
+  readonly Apple: IconNode;
+  readonly ArchiveRestore: IconNode;
+  readonly ArchiveX: IconNode;
+  readonly Archive: IconNode;
+  readonly Armchair: IconNode;
+  readonly ArrowBigDownDash: IconNode;
+  readonly ArrowBigDown: IconNode;
+  readonly ArrowBigLeftDash: IconNode;
+  readonly ArrowBigLeft: IconNode;
+  readonly ArrowBigRightDash: IconNode;
+  readonly ArrowBigRight: IconNode;
+  readonly ArrowBigUpDash: IconNode;
+  readonly ArrowBigUp: IconNode;
+  readonly ArrowDown01: IconNode;
+  readonly ArrowDown10: IconNode;
+  readonly ArrowDownAZ: IconNode;
+  readonly ArrowDownFromLine: IconNode;
+  readonly ArrowDownLeft: IconNode;
+  readonly ArrowDownNarrowWide: IconNode;
+  readonly ArrowDownRight: IconNode;
+  readonly ArrowDownToDot: IconNode;
+  readonly ArrowDownToLine: IconNode;
+  readonly ArrowDownUp: IconNode;
+  readonly ArrowDownWideNarrow: IconNode;
+  readonly ArrowDownZA: IconNode;
+  readonly ArrowDown: IconNode;
+  readonly ArrowLeftFromLine: IconNode;
+  readonly ArrowLeftRight: IconNode;
+  readonly ArrowLeftToLine: IconNode;
+  readonly ArrowLeft: IconNode;
+  readonly ArrowRightFromLine: IconNode;
+  readonly ArrowRightLeft: IconNode;
+  readonly ArrowRightToLine: IconNode;
+  readonly ArrowRight: IconNode;
+  readonly ArrowUp01: IconNode;
+  readonly ArrowUp10: IconNode;
+  readonly ArrowUpAZ: IconNode;
+  readonly ArrowUpDown: IconNode;
+  readonly ArrowUpFromDot: IconNode;
+  readonly ArrowUpFromLine: IconNode;
+  readonly ArrowUpLeft: IconNode;
+  readonly ArrowUpNarrowWide: IconNode;
+  readonly ArrowUpRight: IconNode;
+  readonly ArrowUpToLine: IconNode;
+  readonly ArrowUpWideNarrow: IconNode;
+  readonly ArrowUpZA: IconNode;
+  readonly ArrowUp: IconNode;
+  readonly ArrowsUpFromLine: IconNode;
+  readonly Asterisk: IconNode;
+  readonly Astroid: IconNode;
+  readonly AtSign: IconNode;
+  readonly Atom: IconNode;
+  readonly AudioLines: IconNode;
+  readonly AudioWaveform: IconNode;
+  readonly Award: IconNode;
+  readonly Axe: IconNode;
+  readonly Axis3d: IconNode;
+  readonly Baby: IconNode;
+  readonly Backpack: IconNode;
+  readonly BadgeAlert: IconNode;
+  readonly BadgeCent: IconNode;
+  readonly BadgeCheck: IconNode;
+  readonly BadgeDollarSign: IconNode;
+  readonly BadgeEuro: IconNode;
+  readonly BadgeIndianRupee: IconNode;
+  readonly BadgeInfo: IconNode;
+  readonly BadgeJapaneseYen: IconNode;
+  readonly BadgeMinus: IconNode;
+  readonly BadgePercent: IconNode;
+  readonly BadgePlus: IconNode;
+  readonly BadgePoundSterling: IconNode;
+  readonly BadgeQuestionMark: IconNode;
+  readonly BadgeRussianRuble: IconNode;
+  readonly BadgeSwissFranc: IconNode;
+  readonly BadgeTurkishLira: IconNode;
+  readonly BadgeX: IconNode;
+  readonly Badge: IconNode;
+  readonly BaggageClaim: IconNode;
+  readonly Balloon: IconNode;
+  readonly Ban: IconNode;
+  readonly Banana: IconNode;
+  readonly Bandage: IconNode;
+  readonly BanknoteArrowDown: IconNode;
+  readonly BanknoteArrowUp: IconNode;
+  readonly BanknoteX: IconNode;
+  readonly Banknote: IconNode;
+  readonly Barcode: IconNode;
+  readonly Barrel: IconNode;
+  readonly Baseline: IconNode;
+  readonly Bath: IconNode;
+  readonly BatteryCharging: IconNode;
+  readonly BatteryFull: IconNode;
+  readonly BatteryLow: IconNode;
+  readonly BatteryMedium: IconNode;
+  readonly BatteryPlus: IconNode;
+  readonly BatteryWarning: IconNode;
+  readonly Battery: IconNode;
+  readonly Beaker: IconNode;
+  readonly BeanOff: IconNode;
+  readonly Bean: IconNode;
+  readonly BedDouble: IconNode;
+  readonly BedSingle: IconNode;
+  readonly Bed: IconNode;
+  readonly BeefOff: IconNode;
+  readonly Beef: IconNode;
+  readonly BeerOff: IconNode;
+  readonly Beer: IconNode;
+  readonly BellCheck: IconNode;
+  readonly BellDot: IconNode;
+  readonly BellElectric: IconNode;
+  readonly BellMinus: IconNode;
+  readonly BellOff: IconNode;
+  readonly BellPlus: IconNode;
+  readonly BellRing: IconNode;
+  readonly Bell: IconNode;
+  readonly BetweenHorizontalEnd: IconNode;
+  readonly BetweenHorizontalStart: IconNode;
+  readonly BetweenVerticalEnd: IconNode;
+  readonly BetweenVerticalStart: IconNode;
+  readonly BookOpen: IconNode;
+  readonly Bot: IconNode;
+  readonly Calendar: IconNode;
+  readonly Check: IconNode;
+  readonly ChevronDown: IconNode;
+  readonly ChevronLeft: IconNode;
+  readonly ChevronRight: IconNode;
+  readonly ChevronUp: IconNode;
+  readonly Circle: IconNode;
+  readonly Clock: IconNode;
+  readonly Code: IconNode;
+  readonly Copy: IconNode;
+  readonly Database: IconNode;
+  readonly Download: IconNode;
+  readonly ExternalLink: IconNode;
+  readonly EyeOff: IconNode;
+  readonly Eye: IconNode;
+  readonly FileText: IconNode;
+  readonly File: IconNode;
+  readonly FolderOpen: IconNode;
+  readonly Folder: IconNode;
+  readonly Globe: IconNode;
+  readonly GripHorizontal: IconNode;
+  readonly GripVertical: IconNode;
+  readonly Heart: IconNode;
+  readonly Image: IconNode;
+  readonly Info: IconNode;
+  readonly Layers: IconNode;
+  readonly Link: IconNode;
+  readonly List: IconNode;
+  readonly Lock: IconNode;
+  readonly LogOut: IconNode;
+  readonly Mail: IconNode;
+  readonly Menu: IconNode;
+  readonly MessageSquare: IconNode;
+  readonly Minus: IconNode;
+  readonly Monitor: IconNode;
+  readonly Moon: IconNode;
+  readonly Pencil: IconNode;
+  readonly Play: IconNode;
+  readonly Plus: IconNode;
+  readonly RefreshCcw: IconNode;
+  readonly RefreshCw: IconNode;
+  readonly RotateCcw: IconNode;
+  readonly RotateCw: IconNode;
+  readonly Save: IconNode;
+  readonly Search: IconNode;
+  readonly Send: IconNode;
+  readonly Server: IconNode;
+  readonly Settings: IconNode;
+  readonly ShieldCheck: IconNode;
+  readonly Shield: IconNode;
+  readonly Sparkles: IconNode;
+  readonly Square: IconNode;
+  readonly Star: IconNode;
+  readonly Sun: IconNode;
+  readonly Terminal: IconNode;
+  readonly Trash2: IconNode;
+  readonly Upload: IconNode;
+  readonly User: IconNode;
+  readonly Users: IconNode;
+  readonly X: IconNode;
+  readonly Zap: IconNode;
+};
+export default icons;