@iconix/icons 0.0.0-stage → 1.0.0

package/dist/core.js

@@ -0,0 +1,386 @@
+const SVG_NS = "http://www.w3.org/2000/svg";
+const VIEWBOX_SIZE = 24;
+const VARIANT_ALIASES = {
+  default: "default",
+  circle: "circle",
+  square: "square"
+};
+const FLIPS = ["horizontal", "vertical", "both"];
+const LINECAPS = ["butt", "round", "square"];
+const LINEJOINS = ["miter", "round", "bevel", "arcs", "miter-clip"];
+const INNER_SCALE = 0.6;
+const DEFAULT_OPTIONS = Object.freeze({
+  size: 24,
+  width: void 0,
+  height: void 0,
+  color: "currentColor",
+  fill: "none",
+  strokeWidth: 2,
+  absoluteStrokeWidth: false,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  variant: "default",
+  background: "none",
+  rotate: 0,
+  flip: void 0,
+  spin: false,
+  pulse: false,
+  title: void 0,
+  className: void 0,
+  style: void 0,
+  attrs: void 0
+});
+const OPTION_KEYS = Object.freeze(Object.keys(DEFAULT_OPTIONS));
+let globalDefaults = { ...DEFAULT_OPTIONS };
+function pickDefined(obj) {
+  const out = {};
+  if (!obj) return out;
+  for (const key of OPTION_KEYS) {
+    if (obj[key] !== void 0) out[key] = obj[key];
+  }
+  return out;
+}
+function setDefaults(options) {
+  if (options == null || typeof options !== "object") {
+    throw new TypeError("[iconix] setDefaults() expects an options object");
+  }
+  const next = { ...globalDefaults, ...pickDefined(options) };
+  resolveOptions(next);
+  globalDefaults = next;
+  return getDefaults();
+}
+function getDefaults() {
+  return { ...globalDefaults };
+}
+function resetDefaults() {
+  globalDefaults = { ...DEFAULT_OPTIONS };
+  return getDefaults();
+}
+const CSS_LENGTH = /^\s*\d*\.?\d+\s*(px|em|rem|%|vw|vh|vmin|vmax|pt|cm|mm|in|ch|ex)?\s*$/;
+function isLength(value) {
+  if (typeof value === "number") return Number.isFinite(value) && value > 0;
+  if (typeof value === "string") return CSS_LENGTH.test(value) && parseFloat(value) > 0;
+  return false;
+}
+function toNumberIfNumeric(value) {
+  if (typeof value === "string" && /^\s*\d*\.?\d+\s*$/.test(value)) return parseFloat(value);
+  return value;
+}
+function nonEmptyString(value, key) {
+  if (typeof value !== "string" || !value.trim()) throw new TypeError(`[iconix] ${key} must be a non-empty string`);
+  return value;
+}
+function resolveOptions(options = {}, base = globalDefaults) {
+  const o = { ...base, ...pickDefined(options) };
+  const size = toNumberIfNumeric(o.size);
+  if (!isLength(size)) throw new TypeError(`[iconix] invalid size: ${JSON.stringify(o.size)} (use a positive number or CSS length like "2em")`);
+  const dimension = (key) => {
+    const raw = o[key];
+    if (raw === void 0 || raw === null) return void 0;
+    const value = toNumberIfNumeric(raw);
+    if (!isLength(value)) throw new TypeError(`[iconix] invalid ${key}: ${JSON.stringify(raw)}`);
+    return value;
+  };
+  const strokeWidth = Number(o.strokeWidth);
+  if (!Number.isFinite(strokeWidth) || strokeWidth < 0) {
+    throw new TypeError(`[iconix] invalid strokeWidth: ${JSON.stringify(o.strokeWidth)}`);
+  }
+  const variant = VARIANT_ALIASES[String(o.variant).toLowerCase()];
+  if (!variant) throw new TypeError(`[iconix] unknown variant "${String(o.variant)}" (use "default", "circle" or "square")`);
+  let flip = o.flip;
+  if (flip === false || flip === null || flip === "") flip = void 0;
+  if (flip === true) flip = "horizontal";
+  if (flip !== void 0 && !FLIPS.includes(flip)) {
+    throw new TypeError(`[iconix] unknown flip "${String(flip)}" (use "horizontal", "vertical" or "both")`);
+  }
+  const rotate = Number(o.rotate || 0);
+  if (!Number.isFinite(rotate)) throw new TypeError("[iconix] rotate must be a number (degrees)");
+  if (!LINECAPS.includes(o.strokeLinecap)) throw new TypeError(`[iconix] invalid strokeLinecap "${String(o.strokeLinecap)}"`);
+  if (!LINEJOINS.includes(o.strokeLinejoin)) throw new TypeError(`[iconix] invalid strokeLinejoin "${String(o.strokeLinejoin)}"`);
+  return {
+    size,
+    width: dimension("width"),
+    height: dimension("height"),
+    color: nonEmptyString(o.color, "color"),
+    fill: nonEmptyString(o.fill, "fill"),
+    strokeWidth,
+    absoluteStrokeWidth: Boolean(o.absoluteStrokeWidth),
+    strokeLinecap: o.strokeLinecap,
+    strokeLinejoin: o.strokeLinejoin,
+    variant,
+    background: nonEmptyString(o.background, "background"),
+    rotate,
+    flip,
+    spin: Boolean(o.spin),
+    pulse: Boolean(o.pulse),
+    title: o.title === void 0 || o.title === null ? void 0 : String(o.title),
+    className: o.className,
+    style: o.style,
+    attrs: o.attrs
+  };
+}
+function round(n) {
+  return Math.round(n * 1e3) / 1e3;
+}
+function isIcon(value) {
+  return Boolean(
+    value && typeof value === "object" && typeof value.name === "string" && Array.isArray(value.nodes)
+  );
+}
+function assertIcon(icon) {
+  if (!isIcon(icon)) {
+    throw new TypeError('[iconix] expected an icon object (e.g. iconHome). To use icon names import from "@iconix/icons" instead of "@iconix/icons/lite".');
+  }
+}
+function cloneNodes(nodes) {
+  return nodes.map(([tag, attrs, children]) => children ? [tag, { ...attrs }, cloneNodes(children)] : [tag, { ...attrs }]);
+}
+function buildIconTree(icon, options) {
+  assertIcon(icon);
+  const o = resolveOptions(options);
+  let strokeWidth = o.strokeWidth;
+  if (o.absoluteStrokeWidth && typeof o.size === "number") {
+    strokeWidth = strokeWidth * VIEWBOX_SIZE / o.size;
+  }
+  const attrs = {
+    xmlns: SVG_NS,
+    width: o.width ?? o.size,
+    height: o.height ?? o.size,
+    viewBox: `0 0 ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`,
+    fill: o.fill,
+    stroke: o.color,
+    "stroke-width": round(strokeWidth),
+    "stroke-linecap": o.strokeLinecap,
+    "stroke-linejoin": o.strokeLinejoin
+  };
+  const classes = ["iconix", `iconix-${icon.name}`];
+  if (o.variant !== "default") classes.push(`iconix-${o.variant}`);
+  if (o.spin) classes.push("iconix-spin");
+  if (o.pulse) classes.push("iconix-pulse");
+  if (o.className) classes.push(...String(o.className).split(/\s+/).filter(Boolean));
+  attrs.class = classes.join(" ");
+  if (o.title) {
+    attrs.role = "img";
+    attrs["aria-label"] = o.title;
+  } else {
+    attrs["aria-hidden"] = "true";
+  }
+  let content = cloneNodes(icon.nodes);
+  const transforms = [];
+  if (o.rotate % 360 !== 0) transforms.push(`rotate(${round(o.rotate)} 12 12)`);
+  if (o.flip === "horizontal") transforms.push("translate(24 0) scale(-1 1)");
+  if (o.flip === "vertical") transforms.push("translate(0 24) scale(1 -1)");
+  if (o.flip === "both") transforms.push("rotate(180 12 12)");
+  if (transforms.length) content = [["g", { transform: transforms.join(" ") }, content]];
+  const children = [];
+  const hasBackground = o.background !== "none" && o.background !== "transparent";
+  const bgFill = hasBackground ? { fill: o.background } : {};
+  if (o.variant === "circle") {
+    children.push(["circle", { cx: 12, cy: 12, r: 11, ...bgFill }]);
+  } else if (o.variant === "square") {
+    children.push(["rect", { x: 1, y: 1, width: 22, height: 22, rx: 5, ...bgFill }]);
+  } else if (hasBackground) {
+    children.push(["rect", { x: 0, y: 0, width: 24, height: 24, rx: 4, fill: o.background, stroke: "none" }]);
+  }
+  if (o.variant !== "default") {
+    content = [["g", {
+      transform: `translate(12 12) scale(${INNER_SCALE}) translate(-12 -12)`,
+      "stroke-width": round(strokeWidth / INNER_SCALE)
+    }, content]];
+  }
+  children.push(...content);
+  if (o.attrs && typeof o.attrs === "object") {
+    for (const [key, value] of Object.entries(o.attrs)) {
+      if (value === void 0 || value === null || value === false) delete attrs[key];
+      else attrs[key] = value === true ? "" : value;
+    }
+  }
+  return { tag: "svg", attrs, children, title: o.title, style: o.style, name: icon.name };
+}
+function escapeHtml(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function hyphenate(key) {
+  return key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+function styleToString(style) {
+  if (!style) return "";
+  if (typeof style === "string") return style.trim();
+  return Object.entries(style).filter(([, v]) => v !== void 0 && v !== null && v !== "").map(([k, v]) => `${k.startsWith("--") ? k : hyphenate(k)}:${String(v)}`).join(";");
+}
+function attrsToString(attrs) {
+  return Object.entries(attrs).filter(([, v]) => v !== void 0 && v !== null).map(([k, v]) => ` ${k}="${escapeHtml(v)}"`).join("");
+}
+function nodesToString(nodes) {
+  return nodes.map(([tag, attrs, children]) => children && children.length ? `<${tag}${attrsToString(attrs)}>${nodesToString(children)}</${tag}>` : `<${tag}${attrsToString(attrs)}/>`).join("");
+}
+function treeToString(tree) {
+  const attrs = { ...tree.attrs };
+  const style = styleToString(tree.style);
+  if (style) attrs.style = style;
+  const title = tree.title ? `<title>${escapeHtml(tree.title)}</title>` : "";
+  return `<svg${attrsToString(attrs)}>${title}${nodesToString(tree.children)}</svg>`;
+}
+function toSvg(icon, options) {
+  return treeToString(buildIconTree(icon, options));
+}
+function toDataUri(icon, options) {
+  const opts = { ...options };
+  if (resolveOptions(opts).color === "currentColor") opts.color = "#000";
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(toSvg(icon, opts))}`;
+}
+function toSprite(iconList, options = {}) {
+  const { idPrefix = "i-", ...renderOptions } = options;
+  const list = Array.isArray(iconList) ? iconList : Object.values(iconList || {});
+  const symbols = list.map((icon) => {
+    const tree = buildIconTree(icon, renderOptions);
+    const rest = { ...tree.attrs };
+    for (const key of ["width", "height", "xmlns", "class", "role", "aria-hidden", "aria-label"]) delete rest[key];
+    const attrs = { id: `${idPrefix}${icon.name}`, ...rest };
+    const title = tree.title ? `<title>${escapeHtml(tree.title)}</title>` : "";
+    return `<symbol${attrsToString(attrs)}>${title}${nodesToString(tree.children)}</symbol>`;
+  });
+  return `<svg xmlns="${SVG_NS}" style="display:none">${symbols.join("")}</svg>`;
+}
+function getDocument(doc) {
+  const d = doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("[iconix] createElement() needs a DOM (browser or jsdom). Use toSvg() on the server.");
+  return d;
+}
+function appendNodes(doc, parent, nodes) {
+  for (const [tag, attrs, children] of nodes) {
+    const el = doc.createElementNS(SVG_NS, tag);
+    for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, String(v));
+    if (children) appendNodes(doc, el, children);
+    parent.appendChild(el);
+  }
+}
+function treeToElement(tree, doc) {
+  const d = getDocument(doc);
+  const svg = d.createElementNS(SVG_NS, "svg");
+  for (const [k, v] of Object.entries(tree.attrs)) {
+    if (k === "xmlns" || v === void 0 || v === null) continue;
+    svg.setAttribute(k, String(v));
+  }
+  const style = styleToString(tree.style);
+  if (style) svg.setAttribute("style", style);
+  if (tree.title) {
+    const t = d.createElementNS(SVG_NS, "title");
+    t.textContent = tree.title;
+    svg.appendChild(t);
+  }
+  appendNodes(d, svg, tree.children);
+  return svg;
+}
+function createElement(icon, options, doc) {
+  return treeToElement(buildIconTree(icon, options), doc);
+}
+const DATA_OPTIONS = {
+  size: "size",
+  width: "width",
+  height: "height",
+  color: "color",
+  fill: "fill",
+  strokeWidth: "stroke-width",
+  absoluteStrokeWidth: "absolute-stroke-width",
+  strokeLinecap: "stroke-linecap",
+  strokeLinejoin: "stroke-linejoin",
+  variant: "variant",
+  background: "background",
+  rotate: "rotate",
+  flip: "flip",
+  spin: "spin",
+  pulse: "pulse",
+  title: "title"
+};
+const BOOLEAN_OPTIONS = /* @__PURE__ */ new Set(["absoluteStrokeWidth", "spin", "pulse"]);
+function parseBoolean(value) {
+  if (value === null || value === void 0) return void 0;
+  return value === "" || /^(true|1|yes)$/i.test(String(value));
+}
+function readOptionsFromAttributes(el, prefix = "data-") {
+  const opts = {};
+  for (const [key, attr] of Object.entries(DATA_OPTIONS)) {
+    const name = prefix + attr;
+    if (!el.hasAttribute(name)) continue;
+    const raw = el.getAttribute(name);
+    opts[key] = BOOLEAN_OPTIONS.has(key) ? parseBoolean(raw) : raw;
+  }
+  return opts;
+}
+function replaceElements(resolve, options = {}) {
+  const { root, attribute = "data-icon", ...renderOptions } = options;
+  const scope = root || getDocument();
+  const doc = scope.ownerDocument || scope;
+  const prefix = attribute.startsWith("data-") ? "data-" : "";
+  const optionAttrs = new Set(Object.values(DATA_OPTIONS).map((a) => prefix + a));
+  let count = 0;
+  for (const el of Array.from(scope.querySelectorAll(`[${attribute}]`))) {
+    const name = el.getAttribute(attribute) ?? "";
+    const icon = resolve(name);
+    if (!icon) {
+      if (typeof console !== "undefined") console.warn(`[iconix] unknown icon "${name}"`);
+      continue;
+    }
+    const opts = { ...renderOptions, ...readOptionsFromAttributes(el, prefix) };
+    const extra = el.getAttribute("class");
+    if (extra) opts.className = [opts.className, extra].filter(Boolean).join(" ");
+    const svg = createElement(icon, opts, doc);
+    for (const keep of ["id", "style"]) {
+      const value = el.getAttribute(keep);
+      if (value !== null) svg.setAttribute(keep, value);
+    }
+    for (const { name: attrName, value } of Array.from(el.attributes)) {
+      if (attrName === attribute || optionAttrs.has(attrName)) continue;
+      if (attrName.startsWith("aria-") || attrName.startsWith("data-")) {
+        svg.setAttribute(attrName, value);
+        if (attrName === "aria-label") {
+          svg.setAttribute("role", "img");
+          svg.removeAttribute("aria-hidden");
+        }
+      }
+    }
+    el.replaceWith(svg);
+    count += 1;
+  }
+  return count;
+}
+function toPascalCase(name) {
+  return String(name).split(/[-_\s]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function levenshtein(a, b) {
+  const dp = Array.from({ length: a.length + 1 }, (_, i) => [i]);
+  for (let j = 1; j <= b.length; j++) dp[0][j] = j;
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) {
+      dp[i][j] = Math.min(dp[i - 1][j] + 1, dp[i][j - 1] + 1, dp[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+    }
+  }
+  return dp[a.length][b.length];
+}
+export {
+  DEFAULT_OPTIONS,
+  OPTION_KEYS,
+  SVG_NS,
+  VIEWBOX_SIZE,
+  buildIconTree,
+  createElement,
+  escapeHtml,
+  getDefaults,
+  isIcon,
+  levenshtein,
+  nodesToString,
+  parseBoolean,
+  readOptionsFromAttributes,
+  replaceElements,
+  resetDefaults,
+  resolveOptions,
+  setDefaults,
+  styleToString,
+  toDataUri,
+  toPascalCase,
+  toSprite,
+  toSvg,
+  treeToElement,
+  treeToString
+};

package/dist/element.cjs

@@ -0,0 +1,85 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var element_exports = {};
+__export(element_exports, {
+  ELEMENT_ATTRIBUTES: () => ELEMENT_ATTRIBUTES,
+  defineIconElement: () => defineIconElement
+});
+module.exports = __toCommonJS(element_exports);
+var import_core = require("./core.cjs");
+var import_registry = require("./generated/registry.cjs");
+const ELEMENT_ATTRIBUTES = Object.freeze([
+  "name",
+  "size",
+  "width",
+  "height",
+  "color",
+  "fill",
+  "stroke-width",
+  "absolute-stroke-width",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "variant",
+  "background",
+  "rotate",
+  "flip",
+  "spin",
+  "pulse",
+  "title",
+  "label"
+]);
+function defineIconElement(tagName = "iconix-icon", { registry = import_registry.icons } = {}) {
+  if (typeof customElements === "undefined" || typeof HTMLElement === "undefined") {
+    throw new Error("[iconix] defineIconElement() must run in a browser (customElements is not available)");
+  }
+  const existing = customElements.get(tagName);
+  if (existing) return existing;
+  class IconixIconElementImpl extends HTMLElement {
+    static get observedAttributes() {
+      return ELEMENT_ATTRIBUTES;
+    }
+    connectedCallback() {
+      if (!this.style.display) this.style.display = "inline-flex";
+      this.render();
+    }
+    attributeChangedCallback() {
+      if (this.isConnected) this.render();
+    }
+    get name() {
+      return this.getAttribute("name");
+    }
+    set name(value) {
+      if (value === null) this.removeAttribute("name");
+      else this.setAttribute("name", value);
+    }
+    render() {
+      const name = this.getAttribute("name");
+      const icon = name !== null && Object.prototype.hasOwnProperty.call(registry, name) ? registry[name] : void 0;
+      if (!icon) {
+        this.replaceChildren();
+        return;
+      }
+      const options = (0, import_core.readOptionsFromAttributes)(this, "");
+      const label = this.getAttribute("label");
+      if (label !== null) options.title = label;
+      this.replaceChildren((0, import_core.createElement)(icon, options, this.ownerDocument));
+    }
+  }
+  customElements.define(tagName, IconixIconElementImpl);
+  return IconixIconElementImpl;
+}

package/dist/element.d.cts

@@ -0,0 +1,18 @@
+import type { IconLike } from './types.cjs';
+export type * from './types.cjs';
+export declare const ELEMENT_ATTRIBUTES: readonly string[];
+export interface IconixIconElement extends HTMLElement {
+    name: string | null;
+    render(): void;
+}
+export interface DefineIconElementOptions {
+    /** Custom icon set (e.g. only the ones you use); defaults to all icons. */
+    registry?: Record<string, IconLike>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'iconix-icon': IconixIconElement;
+    }
+}
+/** Registers the Web Component. Safe to call multiple times. */
+export declare function defineIconElement(tagName?: string, { registry }?: DefineIconElementOptions): CustomElementConstructor;

package/dist/element.d.ts

@@ -0,0 +1,18 @@
+import type { IconLike } from './types.js';
+export type * from './types.js';
+export declare const ELEMENT_ATTRIBUTES: readonly string[];
+export interface IconixIconElement extends HTMLElement {
+    name: string | null;
+    render(): void;
+}
+export interface DefineIconElementOptions {
+    /** Custom icon set (e.g. only the ones you use); defaults to all icons. */
+    registry?: Record<string, IconLike>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'iconix-icon': IconixIconElement;
+    }
+}
+/** Registers the Web Component. Safe to call multiple times. */
+export declare function defineIconElement(tagName?: string, { registry }?: DefineIconElementOptions): CustomElementConstructor;

package/dist/element.js

@@ -0,0 +1,66 @@
+import { createElement, readOptionsFromAttributes } from "./core.js";
+import { icons } from "./generated/registry.js";
+const ELEMENT_ATTRIBUTES = Object.freeze([
+  "name",
+  "size",
+  "width",
+  "height",
+  "color",
+  "fill",
+  "stroke-width",
+  "absolute-stroke-width",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "variant",
+  "background",
+  "rotate",
+  "flip",
+  "spin",
+  "pulse",
+  "title",
+  "label"
+]);
+function defineIconElement(tagName = "iconix-icon", { registry = icons } = {}) {
+  if (typeof customElements === "undefined" || typeof HTMLElement === "undefined") {
+    throw new Error("[iconix] defineIconElement() must run in a browser (customElements is not available)");
+  }
+  const existing = customElements.get(tagName);
+  if (existing) return existing;
+  class IconixIconElementImpl extends HTMLElement {
+    static get observedAttributes() {
+      return ELEMENT_ATTRIBUTES;
+    }
+    connectedCallback() {
+      if (!this.style.display) this.style.display = "inline-flex";
+      this.render();
+    }
+    attributeChangedCallback() {
+      if (this.isConnected) this.render();
+    }
+    get name() {
+      return this.getAttribute("name");
+    }
+    set name(value) {
+      if (value === null) this.removeAttribute("name");
+      else this.setAttribute("name", value);
+    }
+    render() {
+      const name = this.getAttribute("name");
+      const icon = name !== null && Object.prototype.hasOwnProperty.call(registry, name) ? registry[name] : void 0;
+      if (!icon) {
+        this.replaceChildren();
+        return;
+      }
+      const options = readOptionsFromAttributes(this, "");
+      const label = this.getAttribute("label");
+      if (label !== null) options.title = label;
+      this.replaceChildren(createElement(icon, options, this.ownerDocument));
+    }
+  }
+  customElements.define(tagName, IconixIconElementImpl);
+  return IconixIconElementImpl;
+}
+export {
+  ELEMENT_ATTRIBUTES,
+  defineIconElement
+};