@unocss/preset-icons 0.44.3 → 0.44.7

package/dist/core.mjs

@@ -0,0 +1,110 @@
+import { warnOnce } from '@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)
+              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 }
+      ]]
+    };
+  };
+}
+
+export { createPresetIcons };

package/dist/index.cjs

@@ -2,152 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const core = require('@unocss/core');
-const utils = require('@iconify/utils');
-const encodeSvgForCss = require('@iconify/utils/lib/svg/encode-svg-for-css');
-const loader = require('@iconify/utils/lib/loader/loader');
-const modern = require('@iconify/utils/lib/loader/modern');
-const ohmyfetch = require('ohmyfetch');
+const cdn = require('./chunks/cdn.cjs');
+const core = require('./core.cjs');
+require('ohmyfetch');
+require('@unocss/core');
 
 const isNode = typeof process < "u" && typeof process.stdout < "u" && !process.versions.deno;
 const isVSCode = isNode && !!process.env.VSCODE_CWD;
 
-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 loader.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 modern.searchForIcon(iconSet, collection, ids, options);
-    }
-    return result;
-  };
-}
-
-const COLLECTION_NAME_PARTS_MAX = 3;
-const preset = (options = {}) => {
+const presetIcons = core.createPresetIcons(async (options) => {
   const {
-    scale = 1,
-    mode = "auto",
-    prefix = "i-",
-    warn = false,
-    collections: customCollections,
-    extraProperties = {},
-    customizations = {},
-    autoInstall = false,
-    layer = "icons",
-    unit,
-    cdn
+    cdn: cdn$1
   } = 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}`;
-        }
-      }
+  if (cdn$1)
+    return cdn.createCDNLoader(cdn$1);
+  if (isNode && !isVSCode) {
+    try {
+      return await import('@iconify/utils/lib/loader/node-loader').then((i) => i?.loadNodeIcon);
+    } catch {
     }
-  };
-  async function lookupIconLoader() {
-    if (cdn)
-      return createCDNLoader(cdn);
-    if (isNode && !isVSCode) {
-      try {
-        return await import('@iconify/utils/lib/loader/node-loader').then((i) => i?.loadNodeIcon);
-      } catch {
-      }
-      try {
-        return require("@iconify/utils/lib/loader/node-loader.cjs");
-      } catch {
-      }
+    try {
+      return require("@iconify/utils/lib/loader/node-loader.cjs");
+    } catch {
     }
-    return utils.loadIcon;
   }
-  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();
-        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.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 }
-    ]]
-  };
-};
+  return cdn.loadIcon;
+});
 
-exports["default"] = preset;
-exports.preset = preset;
+exports.createPresetIcons = core.createPresetIcons;
+exports["default"] = presetIcons;
+exports.presetIcons = presetIcons;

package/dist/index.d.ts

@@ -1,82 +1,9 @@
-import { Awaitable, Preset } from '@unocss/core';
-import { CustomIconLoader, InlineCollection, IconCustomizations } from '@iconify/utils/lib/loader/types';
-import { IconifyJSON } from '@iconify/types';
+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';
 
-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 const presetIcons: (options?: IconsOptions) => _unocss_core.Preset<{}>;
 
-declare const preset: (options?: IconsOptions) => Preset;
-
-export { IconsOptions, preset as default, preset };
+export { presetIcons as default, presetIcons };

package/dist/index.mjs

@@ -1,148 +1,29 @@
-import { warnOnce } from '@unocss/core';
-import { loadIcon as loadIcon$1 } from '@iconify/utils';
-import { encodeSvgForCss } from '@iconify/utils/lib/svg/encode-svg-for-css';
-import { loadIcon } from '@iconify/utils/lib/loader/loader';
-import { searchForIcon } from '@iconify/utils/lib/loader/modern';
-import { $fetch } from 'ohmyfetch';
+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 isNode = typeof process < "u" && typeof process.stdout < "u" && !process.versions.deno;
 const isVSCode = isNode && !!process.env.VSCODE_CWD;
 
-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;
-  };
-}
-
-const COLLECTION_NAME_PARTS_MAX = 3;
-const preset = (options = {}) => {
+const presetIcons = createPresetIcons(async (options) => {
   const {
-    scale = 1,
-    mode = "auto",
-    prefix = "i-",
-    warn = false,
-    collections: customCollections,
-    extraProperties = {},
-    customizations = {},
-    autoInstall = false,
-    layer = "icons",
-    unit,
     cdn
   } = 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}`;
-        }
-      }
+  if (cdn)
+    return createCDNLoader(cdn);
+  if (isNode && !isVSCode) {
+    try {
+      return await import('@iconify/utils/lib/loader/node-loader').then((i) => i?.loadNodeIcon);
+    } catch {
     }
-  };
-  async function lookupIconLoader() {
-    if (cdn)
-      return createCDNLoader(cdn);
-    if (isNode && !isVSCode) {
-      try {
-        return await import('@iconify/utils/lib/loader/node-loader').then((i) => i?.loadNodeIcon);
-      } catch {
-      }
-      try {
-        return require("@iconify/utils/lib/loader/node-loader.cjs");
-      } catch {
-      }
+    try {
+      return require("@iconify/utils/lib/loader/node-loader.cjs");
+    } catch {
     }
-    return loadIcon$1;
   }
-  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();
-        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)
-            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 }
-    ]]
-  };
-};
+  return loadIcon;
+});
 
-export { preset as default, preset };
+export { presetIcons as default, presetIcons };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-icons",
-  "version": "0.44.3",
+  "version": "0.44.7",
   "description": "Pure CSS Icons for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -27,6 +27,16 @@
       "types": "./dist/index.d.ts",
       "require": "./dist/index.cjs",
       "import": "./dist/index.mjs"
+    },
+    "./browser": {
+      "types": "./dist/browser.d.ts",
+      "require": "./dist/browser.cjs",
+      "import": "./dist/browser.mjs"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "require": "./dist/core.cjs",
+      "import": "./dist/core.mjs"
     }
   },
   "main": "dist/index.cjs",
@@ -38,7 +48,7 @@
   ],
   "dependencies": {
     "@iconify/utils": "^1.0.33",
-    "@unocss/core": "0.44.3",
+    "@unocss/core": "0.44.7",
     "ohmyfetch": "^0.4.18"
   },
   "devDependencies": {