@unocss/preset-icons 0.44.3 → 0.44.7

package/README.md

@@ -95,6 +95,8 @@ To load `iconify` collections you should use `@iconify-json/[the-collection-you-
 When using bundlers, you can provide the collections using `dynamic imports` so they will be bundler as async chunk and loaded on demand.
 
 ```ts
+import presetIcons from '@unocss/preset-icons/browser'
+
 presetIcons({
   collections: {
     carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
@@ -109,6 +111,8 @@ presetIcons({
 Or if you prefer to fetch them from CDN, you can specify the `cdn` option since `v0.32.10`. We recommend [esm.sh](https://esm.sh/) as the CDN provider.
 
 ```ts
+import presetIcons from '@unocss/preset-icons/browser'
+
 presetIcons({
   cdn: 'https://esm.sh/'
 })

package/dist/browser.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const cdn = require('./chunks/cdn.cjs');
+const core = require('./core.cjs');
+require('ohmyfetch');
+require('@unocss/core');
+
+const presetIcons = core.createPresetIcons(async (options) => {
+  const { cdn: cdn$1 } = options;
+  if (cdn$1)
+    return cdn.createCDNLoader(cdn$1);
+  return cdn.loadIcon;
+});
+
+exports.createPresetIcons = core.createPresetIcons;
+exports["default"] = presetIcons;
+exports.presetIcons = presetIcons;

package/dist/browser.d.ts

@@ -0,0 +1,9 @@
+import * as _unocss_core from '@unocss/core';
+import { IconsOptions } from './core.js';
+export { IconsOptions, createPresetIcons } from './core.js';
+import '@iconify/utils/lib/loader/types';
+import '@iconify/types';
+
+declare const presetIcons: (options?: IconsOptions) => _unocss_core.Preset<{}>;
+
+export { presetIcons as default, presetIcons };

package/dist/browser.mjs

@@ -0,0 +1,14 @@
+import { c as createCDNLoader, l as loadIcon } from './chunks/cdn.mjs';
+import { createPresetIcons } from './core.mjs';
+export { createPresetIcons } from './core.mjs';
+import 'ohmyfetch';
+import '@unocss/core';
+
+const presetIcons = createPresetIcons(async (options) => {
+  const { cdn } = options;
+  if (cdn)
+    return createCDNLoader(cdn);
+  return loadIcon;
+});
+
+export { presetIcons as default, presetIcons };

package/dist/chunks/cdn.cjs

@@ -0,0 +1,440 @@
+'use strict';
+
+const ohmyfetch = require('ohmyfetch');
+
+const defaults = Object.freeze({
+  inline: false,
+  width: null,
+  height: null,
+  hAlign: "center",
+  vAlign: "middle",
+  slice: false,
+  hFlip: false,
+  vFlip: false,
+  rotate: 0
+});
+
+const iconDefaults = Object.freeze({
+  left: 0,
+  top: 0,
+  width: 16,
+  height: 16,
+  rotate: 0,
+  vFlip: false,
+  hFlip: false
+});
+function fullIcon(data) {
+  return { ...iconDefaults, ...data };
+}
+
+function mergeIconData(icon, alias) {
+  const result = { ...icon };
+  for (const key in iconDefaults) {
+    const prop = key;
+    if (alias[prop] !== void 0) {
+      const value = alias[prop];
+      if (result[prop] === void 0) {
+        result[prop] = value;
+        continue;
+      }
+      switch (prop) {
+        case "rotate":
+          result[prop] = (result[prop] + value) % 4;
+          break;
+        case "hFlip":
+        case "vFlip":
+          result[prop] = value !== result[prop];
+          break;
+        default:
+          result[prop] = value;
+      }
+    }
+  }
+  return result;
+}
+
+function getIconData(data, name, full = false) {
+  function getIcon(name2, iteration) {
+    if (data.icons[name2] !== void 0) {
+      return Object.assign({}, data.icons[name2]);
+    }
+    if (iteration > 5) {
+      return null;
+    }
+    const aliases = data.aliases;
+    if (aliases && aliases[name2] !== void 0) {
+      const item = aliases[name2];
+      const result2 = getIcon(item.parent, iteration + 1);
+      if (result2) {
+        return mergeIconData(result2, item);
+      }
+      return result2;
+    }
+    const chars = data.chars;
+    if (!iteration && chars && chars[name2] !== void 0) {
+      return getIcon(chars[name2], iteration + 1);
+    }
+    return null;
+  }
+  const result = getIcon(name, 0);
+  if (result) {
+    for (const key in iconDefaults) {
+      if (result[key] === void 0 && data[key] !== void 0) {
+        result[key] = data[key];
+      }
+    }
+  }
+  return result && full ? fullIcon(result) : result;
+}
+
+const unitsSplit = /(-?[0-9.]*[0-9]+[0-9.]*)/g;
+const unitsTest = /^-?[0-9.]*[0-9]+[0-9.]*$/g;
+function calculateSize(size, ratio, precision) {
+  if (ratio === 1) {
+    return size;
+  }
+  precision = precision === void 0 ? 100 : precision;
+  if (typeof size === "number") {
+    return Math.ceil(size * ratio * precision) / precision;
+  }
+  if (typeof size !== "string") {
+    return size;
+  }
+  const oldParts = size.split(unitsSplit);
+  if (oldParts === null || !oldParts.length) {
+    return size;
+  }
+  const newParts = [];
+  let code = oldParts.shift();
+  let isNumber = unitsTest.test(code);
+  while (true) {
+    if (isNumber) {
+      const num = parseFloat(code);
+      if (isNaN(num)) {
+        newParts.push(code);
+      } else {
+        newParts.push(Math.ceil(num * ratio * precision) / precision);
+      }
+    } else {
+      newParts.push(code);
+    }
+    code = oldParts.shift();
+    if (code === void 0) {
+      return newParts.join("");
+    }
+    isNumber = !isNumber;
+  }
+}
+
+function preserveAspectRatio(props) {
+  let result = "";
+  switch (props.hAlign) {
+    case "left":
+      result += "xMin";
+      break;
+    case "right":
+      result += "xMax";
+      break;
+    default:
+      result += "xMid";
+  }
+  switch (props.vAlign) {
+    case "top":
+      result += "YMin";
+      break;
+    case "bottom":
+      result += "YMax";
+      break;
+    default:
+      result += "YMid";
+  }
+  result += props.slice ? " slice" : " meet";
+  return result;
+}
+function iconToSVG(icon, customisations) {
+  const box = {
+    left: icon.left,
+    top: icon.top,
+    width: icon.width,
+    height: icon.height
+  };
+  let body = icon.body;
+  [icon, customisations].forEach((props) => {
+    const transformations = [];
+    const hFlip = props.hFlip;
+    const vFlip = props.vFlip;
+    let rotation = props.rotate;
+    if (hFlip) {
+      if (vFlip) {
+        rotation += 2;
+      } else {
+        transformations.push("translate(" + (box.width + box.left).toString() + " " + (0 - box.top).toString() + ")");
+        transformations.push("scale(-1 1)");
+        box.top = box.left = 0;
+      }
+    } else if (vFlip) {
+      transformations.push("translate(" + (0 - box.left).toString() + " " + (box.height + box.top).toString() + ")");
+      transformations.push("scale(1 -1)");
+      box.top = box.left = 0;
+    }
+    let tempValue;
+    if (rotation < 0) {
+      rotation -= Math.floor(rotation / 4) * 4;
+    }
+    rotation = rotation % 4;
+    switch (rotation) {
+      case 1:
+        tempValue = box.height / 2 + box.top;
+        transformations.unshift("rotate(90 " + tempValue.toString() + " " + tempValue.toString() + ")");
+        break;
+      case 2:
+        transformations.unshift("rotate(180 " + (box.width / 2 + box.left).toString() + " " + (box.height / 2 + box.top).toString() + ")");
+        break;
+      case 3:
+        tempValue = box.width / 2 + box.left;
+        transformations.unshift("rotate(-90 " + tempValue.toString() + " " + tempValue.toString() + ")");
+        break;
+    }
+    if (rotation % 2 === 1) {
+      if (box.left !== 0 || box.top !== 0) {
+        tempValue = box.left;
+        box.left = box.top;
+        box.top = tempValue;
+      }
+      if (box.width !== box.height) {
+        tempValue = box.width;
+        box.width = box.height;
+        box.height = tempValue;
+      }
+    }
+    if (transformations.length) {
+      body = '<g transform="' + transformations.join(" ") + '">' + body + "</g>";
+    }
+  });
+  let width, height;
+  if (customisations.width === null && customisations.height === null) {
+    height = "1em";
+    width = calculateSize(height, box.width / box.height);
+  } else if (customisations.width !== null && customisations.height !== null) {
+    width = customisations.width;
+    height = customisations.height;
+  } else if (customisations.height !== null) {
+    height = customisations.height;
+    width = calculateSize(height, box.width / box.height);
+  } else {
+    width = customisations.width;
+    height = calculateSize(width, box.height / box.width);
+  }
+  if (width === "auto") {
+    width = box.width;
+  }
+  if (height === "auto") {
+    height = box.height;
+  }
+  width = typeof width === "string" ? width : width.toString() + "";
+  height = typeof height === "string" ? height : height.toString() + "";
+  const result = {
+    attributes: {
+      width,
+      height,
+      preserveAspectRatio: preserveAspectRatio(customisations),
+      viewBox: box.left.toString() + " " + box.top.toString() + " " + box.width.toString() + " " + box.height.toString()
+    },
+    body
+  };
+  if (customisations.inline) {
+    result.inline = true;
+  }
+  return result;
+}
+
+function trimSVG(str) {
+  return str.replace(/(["';{}><])\s*\n\s*/g, "$1").replace(/\s*\n\s*/g, " ").replace(/\s+"/g, '"').replace(/="\s+/g, '="').trim();
+}
+
+const svgWidthRegex = /width\s*=\s*["'](\w+)["']/;
+const svgHeightRegex = /height\s*=\s*["'](\w+)["']/;
+function configureSvgSize(svg, props, scale) {
+  const svgNode = svg.slice(0, svg.indexOf(">"));
+  let result = svgWidthRegex.exec(svgNode);
+  const w = result != null;
+  if (typeof props.width === "undefined" || props.width === null) {
+    if (typeof scale === "number") {
+      props.width = `${scale}em`;
+    } else if (result) {
+      props.width = result[1];
+    }
+  }
+  result = svgHeightRegex.exec(svgNode);
+  const h = result != null;
+  if (typeof props.height === "undefined" || props.height === null) {
+    if (typeof scale === "number") {
+      props.height = `${scale}em`;
+    } else if (result) {
+      props.height = result[1];
+    }
+  }
+  return [w, h];
+}
+async function mergeIconProps(svg, collection, icon, options, propsProvider, afterCustomizations) {
+  const { scale, addXmlNs = false } = options ?? {};
+  const { additionalProps = {}, iconCustomizer } = options?.customizations ?? {};
+  const props = await propsProvider?.() ?? {};
+  await iconCustomizer?.(collection, icon, props);
+  Object.keys(additionalProps).forEach((p) => {
+    const v = additionalProps[p];
+    if (v !== void 0 && v !== null)
+      props[p] = v;
+  });
+  afterCustomizations?.(props);
+  const [widthOnSvg, heightOnSvg] = configureSvgSize(svg, props, scale);
+  if (addXmlNs) {
+    if (!svg.includes(" xmlns=") && !props["xmlns"]) {
+      props["xmlns"] = "http://www.w3.org/2000/svg";
+    }
+    if (!svg.includes(" xmlns:xlink=") && svg.includes("xlink:") && !props["xmlns:xlink"]) {
+      props["xmlns:xlink"] = "http://www.w3.org/1999/xlink";
+    }
+  }
+  const propsToAdd = Object.keys(props).map((p) => p === "width" && widthOnSvg || p === "height" && heightOnSvg ? null : `${p}="${props[p]}"`).filter((p) => p != null);
+  if (propsToAdd.length) {
+    svg = svg.replace("<svg ", `<svg ${propsToAdd.join(" ")} `);
+  }
+  if (options) {
+    const { defaultStyle, defaultClass } = options;
+    if (defaultClass && !svg.includes(" class=")) {
+      svg = svg.replace("<svg ", `<svg class="${defaultClass}" `);
+    }
+    if (defaultStyle && !svg.includes(" style=")) {
+      svg = svg.replace("<svg ", `<svg style="${defaultStyle}" `);
+    }
+  }
+  const usedProps = options?.usedProps;
+  if (usedProps) {
+    Object.keys(additionalProps).forEach((p) => {
+      const v = props[p];
+      if (v !== void 0 && v !== null)
+        usedProps[p] = v;
+    });
+    if (typeof props.width !== "undefined" && props.width !== null) {
+      usedProps.width = props.width;
+    }
+    if (typeof props.height !== "undefined" && props.height !== null) {
+      usedProps.height = props.height;
+    }
+  }
+  return svg;
+}
+
+async function getCustomIcon(custom, collection, icon, options) {
+  let result;
+  if (typeof custom === "function") {
+    result = await custom(icon);
+  } else {
+    const inline = custom[icon];
+    result = typeof inline === "function" ? await inline() : inline;
+  }
+  if (result) {
+    const cleanupIdx = result.indexOf("<svg");
+    if (cleanupIdx > 0)
+      result = result.slice(cleanupIdx);
+    const { transform } = options?.customizations ?? {};
+    result = typeof transform === "function" ? await transform(result, collection, icon) : result;
+    if (!result.startsWith("<svg")) {
+      console.warn(`Custom icon "${icon}" in "${collection}" is not a valid SVG`);
+      return result;
+    }
+    return await mergeIconProps(options?.customizations?.trimCustomSvg === true ? trimSVG(result) : result, collection, icon, options, void 0);
+  }
+}
+
+async function searchForIcon(iconSet, collection, ids, options) {
+  let iconData;
+  const { customize } = options?.customizations ?? {};
+  for (const id of ids) {
+    iconData = getIconData(iconSet, id, true);
+    if (iconData) {
+      let defaultCustomizations = { ...defaults };
+      if (typeof customize === "function")
+        defaultCustomizations = customize(defaultCustomizations);
+      const {
+        attributes: { width, height, ...restAttributes },
+        body
+      } = iconToSVG(iconData, defaultCustomizations);
+      const scale = options?.scale;
+      return await mergeIconProps(`<svg >${body}</svg>`, collection, id, options, () => {
+        return { ...restAttributes };
+      }, (props) => {
+        if (typeof props.width === "undefined" || props.width === null) {
+          if (typeof scale === "number") {
+            props.width = `${scale}em`;
+          } else {
+            props.width = width;
+          }
+        }
+        if (typeof props.height === "undefined" || props.height === null) {
+          if (typeof scale === "number") {
+            props.height = `${scale}em`;
+          } else {
+            props.height = height;
+          }
+        }
+      });
+    }
+  }
+}
+
+const loadIcon = async (collection, icon, options) => {
+  const custom = options?.customCollections?.[collection];
+  if (custom) {
+    if (typeof custom === "function") {
+      const result = await custom(icon);
+      if (result) {
+        if (typeof result === "string") {
+          return await getCustomIcon(() => result, collection, icon, options);
+        }
+        if ("icons" in result) {
+          const ids = [
+            icon,
+            icon.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(),
+            icon.replace(/([a-z])(\d+)/g, "$1-$2")
+          ];
+          return await searchForIcon(result, collection, ids, options);
+        }
+      }
+    } else {
+      return await getCustomIcon(custom, collection, icon, options);
+    }
+  }
+  return void 0;
+};
+
+const supportedCollection = ["material-symbols", "ic", "mdi", "ph", "ri", "carbon", "bi", "tabler", "ion", "uil", "teenyicons", "clarity", "iconoir", "majesticons", "zondicons", "ant-design", "bx", "bxs", "gg", "cil", "lucide", "pixelarticons", "system-uicons", "ci", "akar-icons", "typcn", "radix-icons", "ep", "mdi-light", "fe", "eos-icons", "line-md", "charm", "prime", "heroicons-outline", "heroicons-solid", "uiw", "uim", "uit", "uis", "maki", "gridicons", "mi", "quill", "gala", "fluent", "icon-park-outline", "icon-park", "vscode-icons", "jam", "codicon", "pepicons", "bytesize", "ei", "fa6-solid", "fa6-regular", "octicon", "ooui", "nimbus", "openmoji", "twemoji", "noto", "noto-v1", "emojione", "emojione-monotone", "emojione-v1", "fxemoji", "bxl", "logos", "simple-icons", "cib", "fa6-brands", "arcticons", "file-icons", "brandico", "entypo-social", "cryptocurrency", "flag", "circle-flags", "flagpack", "cif", "gis", "map", "geo", "fad", "academicons", "wi", "healthicons", "medical-icon", "la", "eva", "dashicons", "flat-color-icons", "entypo", "foundation", "raphael", "icons8", "iwwa", "fa-solid", "fa-regular", "fa-brands", "fa", "fontisto", "icomoon-free", "ps", "subway", "oi", "wpf", "simple-line-icons", "et", "el", "vaadin", "grommet-icons", "whh", "si-glyph", "zmdi", "ls", "bpmn", "flat-ui", "vs", "topcoat", "il", "websymbol", "fontelico", "feather", "mono-icons"];
+function createCDNLoader(cdnBase) {
+  const cache = /* @__PURE__ */ new Map();
+  function fetchCollection(name) {
+    if (!supportedCollection.includes(name))
+      return void 0;
+    if (!cache.has(name))
+      cache.set(name, ohmyfetch.$fetch(`${cdnBase}@iconify-json/${name}/icons.json`));
+    return cache.get(name);
+  }
+  return async (collection, icon, options) => {
+    let result = await loadIcon(collection, icon, options);
+    if (result)
+      return result;
+    const iconSet = await fetchCollection(collection);
+    if (iconSet) {
+      const ids = [
+        icon,
+        icon.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(),
+        icon.replace(/([a-z])(\d+)/g, "$1-$2")
+      ];
+      result = await searchForIcon(iconSet, collection, ids, options);
+    }
+    return result;
+  };
+}
+
+exports.createCDNLoader = createCDNLoader;
+exports.loadIcon = loadIcon;