@unocss/preset-icons 0.44.3 → 0.44.7

package/dist/chunks/cdn.mjs

@@ -0,0 +1,437 @@
+import { $fetch } from '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, $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;
+  };
+}
+
+export { createCDNLoader as c, loadIcon as l };

package/dist/core.cjs

@@ -0,0 +1,114 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const core = require('@unocss/core');
+
+function encodeSvgForCss(svg) {
+  let useSvg = svg.startsWith("<svg>") ? svg.replace("<svg>", "<svg >") : svg;
+  if (!useSvg.includes(" xmlns:xlink=") && useSvg.includes(" xlink:")) {
+    useSvg = useSvg.replace("<svg ", '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ');
+  }
+  if (!useSvg.includes(" xmlns=")) {
+    useSvg = useSvg.replace("<svg ", '<svg xmlns="http://www.w3.org/2000/svg" ');
+  }
+  return useSvg.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/{/g, "%7B").replace(/}/g, "%7D").replace(/</g, "%3C").replace(/>/g, "%3E");
+}
+
+const COLLECTION_NAME_PARTS_MAX = 3;
+function createPresetIcons(lookupIconLoader) {
+  return function presetIcons(options = {}) {
+    const {
+      scale = 1,
+      mode = "auto",
+      prefix = "i-",
+      warn = false,
+      collections: customCollections,
+      extraProperties = {},
+      customizations = {},
+      autoInstall = false,
+      layer = "icons",
+      unit
+    } = options;
+    const loaderOptions = {
+      addXmlNs: true,
+      scale,
+      customCollections,
+      autoInstall,
+      warn: void 0,
+      customizations: {
+        ...customizations,
+        additionalProps: { ...extraProperties },
+        trimCustomSvg: true,
+        async iconCustomizer(collection, icon, props) {
+          await customizations.iconCustomizer?.(collection, icon, props);
+          if (unit) {
+            if (!props.width)
+              props.width = `${scale}${unit}`;
+            if (!props.height)
+              props.height = `${scale}${unit}`;
+          }
+        }
+      }
+    };
+    let iconLoader;
+    return {
+      name: "@unocss/preset-icons",
+      enforce: "pre",
+      options,
+      layers: { icons: -30 },
+      rules: [[
+        /^([a-z0-9:-]+)(?:\?(mask|bg|auto))?$/,
+        async ([full, body, _mode = mode]) => {
+          let collection = "";
+          let name = "";
+          let svg;
+          iconLoader = iconLoader || await lookupIconLoader(options);
+          const usedProps = {};
+          if (body.includes(":")) {
+            [collection, name] = body.split(":");
+            svg = await iconLoader(collection, name, { ...loaderOptions, usedProps });
+          } else {
+            const parts = body.split(/-/g);
+            for (let i = COLLECTION_NAME_PARTS_MAX; i >= 1; i--) {
+              collection = parts.slice(0, i).join("-");
+              name = parts.slice(i).join("-");
+              svg = await iconLoader(collection, name, { ...loaderOptions, usedProps });
+              if (svg)
+                break;
+            }
+          }
+          if (!svg) {
+            if (warn)
+              core.warnOnce(`failed to load icon "${full}"`);
+            return;
+          }
+          const url = `url("data:image/svg+xml;utf8,${encodeSvgForCss(svg)}")`;
+          if (_mode === "auto")
+            _mode = svg.includes("currentColor") ? "mask" : "bg";
+          if (_mode === "mask") {
+            return {
+              "--un-icon": url,
+              "mask": "var(--un-icon) no-repeat",
+              "mask-size": "100% 100%",
+              "-webkit-mask": "var(--un-icon) no-repeat",
+              "-webkit-mask-size": "100% 100%",
+              "background-color": "currentColor",
+              ...usedProps
+            };
+          } else {
+            return {
+              "background": `${url} no-repeat`,
+              "background-size": "100% 100%",
+              "background-color": "transparent",
+              ...usedProps
+            };
+          }
+        },
+        { layer, prefix }
+      ]]
+    };
+  };
+}
+
+exports.createPresetIcons = createPresetIcons;

package/dist/core.d.ts

@@ -0,0 +1,82 @@
+import { Awaitable, Preset } from '@unocss/core';
+import { CustomIconLoader, InlineCollection, IconCustomizations, UniversalIconLoader } from '@iconify/utils/lib/loader/types';
+import { IconifyJSON } from '@iconify/types';
+
+interface IconsOptions {
+    /**
+     * Scale related to the current font size (1em).
+     *
+     * @default 1
+     */
+    scale?: number;
+    /**
+     * Mode of generated CSS icons.
+     *
+     * - `mask` - use background color and the `mask` property for monochrome icons
+     * - `background-img` - use background image for the icons, colors are static
+     * - `auto` - smartly decide mode between `mask` and `background-img` per icon based on its style
+     *
+     * @default 'auto'
+     * @see https://antfu.me/posts/icons-in-pure-css
+     */
+    mode?: 'mask' | 'background-img' | 'auto';
+    /**
+     * Class prefix for matching icon rules.
+     *
+     * @default `i-`
+     */
+    prefix?: string;
+    /**
+     * Extra CSS properties applied to the generated CSS
+     *
+     * @default {}
+     */
+    extraProperties?: Record<string, string>;
+    /**
+     * Emit warning when missing icons are matched
+     *
+     * @default false
+     */
+    warn?: boolean;
+    /**
+     * In Node.js environment, the preset will search for the installed iconify dataset automatically.
+     * When using in the browser, this options is provided to provide dataset with custom loading mechanism.
+     */
+    collections?: Record<string, (() => Awaitable<IconifyJSON>) | undefined | CustomIconLoader | InlineCollection>;
+    /**
+     * Rule layer
+     *
+     * @default 'icons'
+     */
+    layer?: string;
+    /**
+     * Custom icon customizations.
+     */
+    customizations?: Omit<IconCustomizations, 'additionalProps' | 'trimCustomSvg'>;
+    /**
+     * Auto install icon sources package when the usages is detected
+     *
+     * **WARNING**: only on `node` environment, on `browser` this option will be ignored.
+     *
+     * @default false
+     */
+    autoInstall?: boolean;
+    /**
+     * Custom icon unit.
+     *
+     * @default `em`
+     */
+    unit?: string;
+    /**
+     * Load icons from CDN. Should starts with `https://` and ends with `/`
+     *
+     * Recommends:
+     * - https://esm.sh/
+     * - https://cdn.skypack.dev/
+     */
+    cdn?: string;
+}
+
+declare function createPresetIcons(lookupIconLoader: (options: IconsOptions) => Promise<UniversalIconLoader>): (options?: IconsOptions) => Preset;
+
+export { IconsOptions, createPresetIcons };