@unocss/preset-icons 0.32.8 → 0.32.12

package/README.md

@@ -89,18 +89,33 @@ You can provide collections via `@iconify-json/[the-collection-you-want]`, `@ico
 ### Browser
 
 To load `iconify` collections you should use `@iconify-json/[the-collection-you-want]` and not `@iconify/json` since the `json` file is huge.
-You will need to provide the `iconify` collections using `dynamic imports`, for example, on playground you have these collections:
+
+#### Bundler
+
+When using bundlers, you can provide the collections using `dynamic imports` so they will be bundler as async chunk and loaded on demand.
 
 ```ts
 presetIcons({
   collections: {
-    carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default as any),
-    mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default as any),
-    logos: () => import('@iconify-json/logos/icons.json').then(i => i.default as any),
+    carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
+    mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default),
+    logos: () => import('@iconify-json/logos/icons.json').then(i => i.default),
   }
 })
 ```
 
+#### CDN
+
+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
+presetIcons({
+  cdn: 'https://esm.sh/'
+})
+```
+
+#### Customization
+
 You can also provide your own custom collections using [CustomIconLoader](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L17) or [InlineCollection](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L86), for example using `InlineCollection`:
 
 ```ts

package/dist/index.cjs

@@ -5,26 +5,444 @@ 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 isNode = typeof process < "u" && typeof process.stdout < "u" && !process.versions.deno;
 const isVSCode = isNode && !!process.env.VSCODE_CWD;
 
-const COLLECTION_NAME_PARTS_MAX = 3;
-async function lookupIconLoader() {
-  let useIconLoader;
-  if (isNode && !isVSCode) {
-    try {
-      useIconLoader = await import('@iconify/utils/lib/loader/node-loader').then((i) => i?.loadNodeIcon);
-    } catch {
-      try {
-        useIconLoader = require("@iconify/utils/lib/loader/node-loader.cjs");
-      } catch {
-        useIconLoader = utils.loadIcon;
+const suspectProtoRx = /"(?:_|\\u005[Ff])(?:_|\\u005[Ff])(?:p|\\u0070)(?:r|\\u0072)(?:o|\\u006[Ff])(?:t|\\u0074)(?:o|\\u006[Ff])(?:_|\\u005[Ff])(?:_|\\u005[Ff])"\s*:/;
+const suspectConstructorRx = /"(?:c|\\u0063)(?:o|\\u006[Ff])(?:n|\\u006[Ee])(?:s|\\u0073)(?:t|\\u0074)(?:r|\\u0072)(?:u|\\u0075)(?:c|\\u0063)(?:t|\\u0074)(?:o|\\u006[Ff])(?:r|\\u0072)"\s*:/;
+const JsonSigRx = /^["{[]|^-?[0-9][0-9.]{0,14}$/;
+function jsonParseTransform(key, value) {
+  if (key === "__proto__" || key === "constructor") {
+    return;
+  }
+  return value;
+}
+function destr(val) {
+  if (typeof val !== "string") {
+    return val;
+  }
+  const _lval = val.toLowerCase();
+  if (_lval === "true") {
+    return true;
+  }
+  if (_lval === "false") {
+    return false;
+  }
+  if (_lval === "null") {
+    return null;
+  }
+  if (_lval === "nan") {
+    return NaN;
+  }
+  if (_lval === "infinity") {
+    return Infinity;
+  }
+  if (_lval === "undefined") {
+    return void 0;
+  }
+  if (!JsonSigRx.test(val)) {
+    return val;
+  }
+  try {
+    if (suspectProtoRx.test(val) || suspectConstructorRx.test(val)) {
+      return JSON.parse(val, jsonParseTransform);
+    }
+    return JSON.parse(val);
+  } catch (_e) {
+    return val;
+  }
+}
+
+const HASH_RE = /#/g;
+const AMPERSAND_RE = /&/g;
+const EQUAL_RE = /=/g;
+const PLUS_RE = /\+/g;
+const ENC_BRACKET_OPEN_RE = /%5B/gi;
+const ENC_BRACKET_CLOSE_RE = /%5D/gi;
+const ENC_CARET_RE = /%5E/gi;
+const ENC_BACKTICK_RE = /%60/gi;
+const ENC_CURLY_OPEN_RE = /%7B/gi;
+const ENC_PIPE_RE = /%7C/gi;
+const ENC_CURLY_CLOSE_RE = /%7D/gi;
+const ENC_SPACE_RE = /%20/gi;
+function encode(text) {
+  return encodeURI("" + text).replace(ENC_PIPE_RE, "|").replace(ENC_BRACKET_OPEN_RE, "[").replace(ENC_BRACKET_CLOSE_RE, "]");
+}
+function encodeQueryValue(text) {
+  return encode(text).replace(PLUS_RE, "%2B").replace(ENC_SPACE_RE, "+").replace(HASH_RE, "%23").replace(AMPERSAND_RE, "%26").replace(ENC_BACKTICK_RE, "`").replace(ENC_CURLY_OPEN_RE, "{").replace(ENC_CURLY_CLOSE_RE, "}").replace(ENC_CARET_RE, "^");
+}
+function encodeQueryKey(text) {
+  return encodeQueryValue(text).replace(EQUAL_RE, "%3D");
+}
+function decode(text = "") {
+  try {
+    return decodeURIComponent("" + text);
+  } catch (_err) {
+    return "" + text;
+  }
+}
+function decodeQueryValue(text) {
+  return decode(text.replace(PLUS_RE, " "));
+}
+
+function parseQuery(paramsStr = "") {
+  const obj = {};
+  if (paramsStr[0] === "?") {
+    paramsStr = paramsStr.substr(1);
+  }
+  for (const param of paramsStr.split("&")) {
+    const s = param.match(/([^=]+)=?(.*)/) || [];
+    if (s.length < 2) {
+      continue;
+    }
+    const key = decode(s[1]);
+    if (key === "__proto__" || key === "constructor") {
+      continue;
+    }
+    const value = decodeQueryValue(s[2] || "");
+    if (obj[key]) {
+      if (Array.isArray(obj[key])) {
+        obj[key].push(value);
+      } else {
+        obj[key] = [obj[key], value];
+      }
+    } else {
+      obj[key] = value;
+    }
+  }
+  return obj;
+}
+function encodeQueryItem(key, val) {
+  if (typeof val === "number" || typeof val === "boolean") {
+    val = String(val);
+  }
+  if (!val) {
+    return encodeQueryKey(key);
+  }
+  if (Array.isArray(val)) {
+    return val.map((_val) => `${encodeQueryKey(key)}=${encodeQueryValue(_val)}`).join("&");
+  }
+  return `${encodeQueryKey(key)}=${encodeQueryValue(val)}`;
+}
+function stringifyQuery(query) {
+  return Object.keys(query).map((k) => encodeQueryItem(k, query[k])).join("&");
+}
+const PROTOCOL_REGEX = /^\w+:(\/\/)?/;
+const PROTOCOL_RELATIVE_REGEX = /^\/\/[^/]+/;
+function hasProtocol(inputStr, acceptProtocolRelative = false) {
+  return PROTOCOL_REGEX.test(inputStr) || acceptProtocolRelative && PROTOCOL_RELATIVE_REGEX.test(inputStr);
+}
+const TRAILING_SLASH_RE = /\/$|\/\?/;
+function hasTrailingSlash(input = "", queryParams = false) {
+  if (!queryParams) {
+    return input.endsWith("/");
+  }
+  return TRAILING_SLASH_RE.test(input);
+}
+function withoutTrailingSlash(input = "", queryParams = false) {
+  if (!queryParams) {
+    return (hasTrailingSlash(input) ? input.slice(0, -1) : input) || "/";
+  }
+  if (!hasTrailingSlash(input, true)) {
+    return input || "/";
+  }
+  const [s0, ...s] = input.split("?");
+  return (s0.slice(0, -1) || "/") + (s.length ? `?${s.join("?")}` : "");
+}
+function withTrailingSlash(input = "", queryParams = false) {
+  if (!queryParams) {
+    return input.endsWith("/") ? input : input + "/";
+  }
+  if (hasTrailingSlash(input, true)) {
+    return input || "/";
+  }
+  const [s0, ...s] = input.split("?");
+  return s0 + "/" + (s.length ? `?${s.join("?")}` : "");
+}
+function hasLeadingSlash(input = "") {
+  return input.startsWith("/");
+}
+function withoutLeadingSlash(input = "") {
+  return (hasLeadingSlash(input) ? input.substr(1) : input) || "/";
+}
+function withBase(input, base) {
+  if (isEmptyURL(base)) {
+    return input;
+  }
+  const _base = withoutTrailingSlash(base);
+  if (input.startsWith(_base)) {
+    return input;
+  }
+  return joinURL(_base, input);
+}
+function withQuery(input, query) {
+  const parsed = parseURL(input);
+  const mergedQuery = { ...parseQuery(parsed.search), ...query };
+  parsed.search = stringifyQuery(mergedQuery);
+  return stringifyParsedURL(parsed);
+}
+function isEmptyURL(url) {
+  return !url || url === "/";
+}
+function isNonEmptyURL(url) {
+  return url && url !== "/";
+}
+function joinURL(base, ...input) {
+  let url = base || "";
+  for (const i of input.filter(isNonEmptyURL)) {
+    url = url ? withTrailingSlash(url) + withoutLeadingSlash(i) : i;
+  }
+  return url;
+}
+
+function parseURL(input = "", defaultProto) {
+  if (!hasProtocol(input, true)) {
+    return defaultProto ? parseURL(defaultProto + input) : parsePath(input);
+  }
+  const [protocol = "", auth, hostAndPath = ""] = (input.replace(/\\/g, "/").match(/([^:/]+:)?\/\/([^/@]+@)?(.*)/) || []).splice(1);
+  const [host = "", path = ""] = (hostAndPath.match(/([^/?#]*)(.*)?/) || []).splice(1);
+  const { pathname, search, hash } = parsePath(path);
+  return {
+    protocol,
+    auth: auth ? auth.substr(0, auth.length - 1) : "",
+    host,
+    pathname,
+    search,
+    hash
+  };
+}
+function parsePath(input = "") {
+  const [pathname = "", search = "", hash = ""] = (input.match(/([^#?]*)(\?[^#]*)?(#.*)?/) || []).splice(1);
+  return {
+    pathname,
+    search,
+    hash
+  };
+}
+function stringifyParsedURL(parsed) {
+  const fullpath = parsed.pathname + (parsed.search ? (parsed.search.startsWith("?") ? "" : "?") + parsed.search : "") + parsed.hash;
+  if (!parsed.protocol) {
+    return fullpath;
+  }
+  return parsed.protocol + "//" + (parsed.auth ? parsed.auth + "@" : "") + parsed.host + fullpath;
+}
+
+class FetchError extends Error {
+  constructor() {
+    super(...arguments);
+    this.name = "FetchError";
+  }
+}
+function createFetchError(request, error, response) {
+  let message = "";
+  if (request && response) {
+    message = `${response.status} ${response.statusText} (${request.toString()})`;
+  }
+  if (error) {
+    message = `${error.message} (${message})`;
+  }
+  const fetchError = new FetchError(message);
+  Object.defineProperty(fetchError, "request", { get() {
+    return request;
+  } });
+  Object.defineProperty(fetchError, "response", { get() {
+    return response;
+  } });
+  Object.defineProperty(fetchError, "data", { get() {
+    return response && response._data;
+  } });
+  return fetchError;
+}
+
+const payloadMethods = new Set(Object.freeze(["PATCH", "POST", "PUT", "DELETE"]));
+function isPayloadMethod(method = "GET") {
+  return payloadMethods.has(method.toUpperCase());
+}
+function isJSONSerializable(val) {
+  if (val === void 0) {
+    return false;
+  }
+  const t = typeof val;
+  if (t === "string" || t === "number" || t === "boolean" || t === null) {
+    return true;
+  }
+  if (t !== "object") {
+    return false;
+  }
+  if (Array.isArray(val)) {
+    return true;
+  }
+  return val.constructor && val.constructor.name === "Object" || typeof val.toJSON === "function";
+}
+const textTypes = /* @__PURE__ */ new Set([
+  "image/svg",
+  "application/xml",
+  "application/xhtml",
+  "application/html"
+]);
+const JSON_RE = /^application\/(?:[\w!#$%&*`\-.^~]*\+)?json(;.+)?$/i;
+function detectResponseType(_contentType = "") {
+  if (!_contentType) {
+    return "json";
+  }
+  const contentType = _contentType.split(";").shift();
+  if (JSON_RE.test(contentType)) {
+    return "json";
+  }
+  if (textTypes.has(contentType) || contentType.startsWith("text/")) {
+    return "text";
+  }
+  return "blob";
+}
+
+const retryStatusCodes = /* @__PURE__ */ new Set([
+  408,
+  409,
+  425,
+  429,
+  500,
+  502,
+  503,
+  504
+]);
+function createFetch(globalOptions) {
+  const { fetch, Headers } = globalOptions;
+  function onError(ctx) {
+    if (ctx.options.retry !== false) {
+      const retries = typeof ctx.options.retry === "number" ? ctx.options.retry : isPayloadMethod(ctx.options.method) ? 0 : 1;
+      const responseCode = ctx.response && ctx.response.status || 500;
+      if (retries > 0 && retryStatusCodes.has(responseCode)) {
+        return $fetchRaw(ctx.request, {
+          ...ctx.options,
+          retry: retries - 1
+        });
+      }
+    }
+    const err = createFetchError(ctx.request, ctx.error, ctx.response);
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(err, $fetchRaw);
+    }
+    throw err;
+  }
+  const $fetchRaw = async function $fetchRaw2(_request, _opts = {}) {
+    const ctx = {
+      request: _request,
+      options: { ...globalOptions.defaults, ..._opts },
+      response: void 0,
+      error: void 0
+    };
+    if (ctx.options.onRequest) {
+      await ctx.options.onRequest(ctx);
+    }
+    if (typeof ctx.request === "string") {
+      if (ctx.options.baseURL) {
+        ctx.request = withBase(ctx.request, ctx.options.baseURL);
+      }
+      if (ctx.options.params) {
+        ctx.request = withQuery(ctx.request, ctx.options.params);
+      }
+      if (ctx.options.body && isPayloadMethod(ctx.options.method)) {
+        if (isJSONSerializable(ctx.options.body)) {
+          ctx.options.body = JSON.stringify(ctx.options.body);
+          ctx.options.headers = new Headers(ctx.options.headers);
+          if (!ctx.options.headers.has("content-type")) {
+            ctx.options.headers.set("content-type", "application/json");
+          }
+          if (!ctx.options.headers.has("accept")) {
+            ctx.options.headers.set("accept", "application/json");
+          }
+        }
       }
     }
+    ctx.response = await fetch(ctx.request, ctx.options).catch(async (error) => {
+      ctx.error = error;
+      if (ctx.options.onRequestError) {
+        await ctx.options.onRequestError(ctx);
+      }
+      return onError(ctx);
+    });
+    const responseType = (ctx.options.parseResponse ? "json" : ctx.options.responseType) || detectResponseType(ctx.response.headers.get("content-type") || "");
+    if (responseType === "json") {
+      const data = await ctx.response.text();
+      const parseFn = ctx.options.parseResponse || destr;
+      ctx.response._data = parseFn(data);
+    } else {
+      ctx.response._data = await ctx.response[responseType]();
+    }
+    if (ctx.options.onResponse) {
+      await ctx.options.onResponse(ctx);
+    }
+    if (!ctx.response.ok) {
+      if (ctx.options.onResponseError) {
+        await ctx.options.onResponseError(ctx);
+      }
+    }
+    return ctx.response.ok ? ctx.response : onError(ctx);
+  };
+  const $fetch = function $fetch2(request, opts) {
+    return $fetchRaw(request, opts).then((r) => r._data);
+  };
+  $fetch.raw = $fetchRaw;
+  $fetch.create = (defaultOptions = {}) => createFetch({
+    ...globalOptions,
+    defaults: {
+      ...globalOptions.defaults,
+      ...defaultOptions
+    }
+  });
+  return $fetch;
+}
+
+const _globalThis = function() {
+  if (typeof globalThis !== "undefined") {
+    return globalThis;
+  }
+  if (typeof self !== "undefined") {
+    return self;
+  }
+  if (typeof window !== "undefined") {
+    return window;
   }
-  return useIconLoader ?? utils.loadIcon;
+  if (typeof global !== "undefined") {
+    return global;
+  }
+  throw new Error("unable to locate global object");
+}();
+const fetch = _globalThis.fetch || (() => Promise.reject(new Error("[ohmyfetch] global.fetch is not supported!")));
+const Headers = _globalThis.Headers;
+const $fetch = createFetch({ fetch, Headers });
+
+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 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 {
     scale = 1,
@@ -36,8 +454,46 @@ const preset = (options = {}) => {
     customizations = {},
     autoInstall = false,
     layer = "icons",
-    unit
+    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}`;
+        }
+      }
+    }
+  };
+  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 {
+      }
+    }
+    return utils.loadIcon;
+  }
+  let iconLoader;
   return {
     name: "@unocss/preset-icons",
     enforce: "pre",
@@ -51,38 +507,17 @@ const preset = (options = {}) => {
         let collection = "";
         let name = "";
         let svg;
-        const iconLoader = await lookupIconLoader();
-        const iconifyLoaderOptions = {
-          addXmlNs: true,
-          scale,
-          customCollections,
-          autoInstall,
-          warn: void 0,
-          customizations: {
-            ...customizations,
-            additionalProps: { ...extraProperties },
-            trimCustomSvg: true,
-            async iconCustomizer(collection2, icon, props) {
-              await customizations.iconCustomizer?.(collection2, icon, props);
-              if (unit) {
-                if (!props.width)
-                  props.width = `${scale}${unit}`;
-                if (!props.height)
-                  props.height = `${scale}${unit}`;
-              }
-            }
-          },
-          usedProps: {}
-        };
+        iconLoader = iconLoader || await lookupIconLoader();
+        const usedProps = {};
         if (body.includes(":")) {
           [collection, name] = body.split(":");
-          svg = await iconLoader(collection, name, iconifyLoaderOptions);
+          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, iconifyLoaderOptions);
+            svg = await iconLoader(collection, name, { ...loaderOptions, usedProps });
             if (svg)
               break;
           }
@@ -103,14 +538,14 @@ const preset = (options = {}) => {
             "-webkit-mask": "var(--un-icon) no-repeat",
             "-webkit-mask-size": "100% 100%",
             "background-color": "currentColor",
-            ...iconifyLoaderOptions.usedProps
+            ...usedProps
           };
         } else {
           return {
             "background": `${url} no-repeat`,
             "background-size": "100% 100%",
             "background-color": "transparent",
-            ...iconifyLoaderOptions.usedProps
+            ...usedProps
           };
         }
       },

package/dist/index.d.ts

@@ -67,6 +67,14 @@ interface IconsOptions {
      * @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 preset: (options?: IconsOptions) => Preset;

package/dist/index.mjs

@@ -1,26 +1,444 @@
 import { warnOnce } from '@unocss/core';
-import { loadIcon } from '@iconify/utils';
+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';
 
 const isNode = typeof process < "u" && typeof process.stdout < "u" && !process.versions.deno;
 const isVSCode = isNode && !!process.env.VSCODE_CWD;
 
-const COLLECTION_NAME_PARTS_MAX = 3;
-async function lookupIconLoader() {
-  let useIconLoader;
-  if (isNode && !isVSCode) {
-    try {
-      useIconLoader = await import('@iconify/utils/lib/loader/node-loader').then((i) => i?.loadNodeIcon);
-    } catch {
-      try {
-        useIconLoader = require("@iconify/utils/lib/loader/node-loader.cjs");
-      } catch {
-        useIconLoader = loadIcon;
+const suspectProtoRx = /"(?:_|\\u005[Ff])(?:_|\\u005[Ff])(?:p|\\u0070)(?:r|\\u0072)(?:o|\\u006[Ff])(?:t|\\u0074)(?:o|\\u006[Ff])(?:_|\\u005[Ff])(?:_|\\u005[Ff])"\s*:/;
+const suspectConstructorRx = /"(?:c|\\u0063)(?:o|\\u006[Ff])(?:n|\\u006[Ee])(?:s|\\u0073)(?:t|\\u0074)(?:r|\\u0072)(?:u|\\u0075)(?:c|\\u0063)(?:t|\\u0074)(?:o|\\u006[Ff])(?:r|\\u0072)"\s*:/;
+const JsonSigRx = /^["{[]|^-?[0-9][0-9.]{0,14}$/;
+function jsonParseTransform(key, value) {
+  if (key === "__proto__" || key === "constructor") {
+    return;
+  }
+  return value;
+}
+function destr(val) {
+  if (typeof val !== "string") {
+    return val;
+  }
+  const _lval = val.toLowerCase();
+  if (_lval === "true") {
+    return true;
+  }
+  if (_lval === "false") {
+    return false;
+  }
+  if (_lval === "null") {
+    return null;
+  }
+  if (_lval === "nan") {
+    return NaN;
+  }
+  if (_lval === "infinity") {
+    return Infinity;
+  }
+  if (_lval === "undefined") {
+    return void 0;
+  }
+  if (!JsonSigRx.test(val)) {
+    return val;
+  }
+  try {
+    if (suspectProtoRx.test(val) || suspectConstructorRx.test(val)) {
+      return JSON.parse(val, jsonParseTransform);
+    }
+    return JSON.parse(val);
+  } catch (_e) {
+    return val;
+  }
+}
+
+const HASH_RE = /#/g;
+const AMPERSAND_RE = /&/g;
+const EQUAL_RE = /=/g;
+const PLUS_RE = /\+/g;
+const ENC_BRACKET_OPEN_RE = /%5B/gi;
+const ENC_BRACKET_CLOSE_RE = /%5D/gi;
+const ENC_CARET_RE = /%5E/gi;
+const ENC_BACKTICK_RE = /%60/gi;
+const ENC_CURLY_OPEN_RE = /%7B/gi;
+const ENC_PIPE_RE = /%7C/gi;
+const ENC_CURLY_CLOSE_RE = /%7D/gi;
+const ENC_SPACE_RE = /%20/gi;
+function encode(text) {
+  return encodeURI("" + text).replace(ENC_PIPE_RE, "|").replace(ENC_BRACKET_OPEN_RE, "[").replace(ENC_BRACKET_CLOSE_RE, "]");
+}
+function encodeQueryValue(text) {
+  return encode(text).replace(PLUS_RE, "%2B").replace(ENC_SPACE_RE, "+").replace(HASH_RE, "%23").replace(AMPERSAND_RE, "%26").replace(ENC_BACKTICK_RE, "`").replace(ENC_CURLY_OPEN_RE, "{").replace(ENC_CURLY_CLOSE_RE, "}").replace(ENC_CARET_RE, "^");
+}
+function encodeQueryKey(text) {
+  return encodeQueryValue(text).replace(EQUAL_RE, "%3D");
+}
+function decode(text = "") {
+  try {
+    return decodeURIComponent("" + text);
+  } catch (_err) {
+    return "" + text;
+  }
+}
+function decodeQueryValue(text) {
+  return decode(text.replace(PLUS_RE, " "));
+}
+
+function parseQuery(paramsStr = "") {
+  const obj = {};
+  if (paramsStr[0] === "?") {
+    paramsStr = paramsStr.substr(1);
+  }
+  for (const param of paramsStr.split("&")) {
+    const s = param.match(/([^=]+)=?(.*)/) || [];
+    if (s.length < 2) {
+      continue;
+    }
+    const key = decode(s[1]);
+    if (key === "__proto__" || key === "constructor") {
+      continue;
+    }
+    const value = decodeQueryValue(s[2] || "");
+    if (obj[key]) {
+      if (Array.isArray(obj[key])) {
+        obj[key].push(value);
+      } else {
+        obj[key] = [obj[key], value];
+      }
+    } else {
+      obj[key] = value;
+    }
+  }
+  return obj;
+}
+function encodeQueryItem(key, val) {
+  if (typeof val === "number" || typeof val === "boolean") {
+    val = String(val);
+  }
+  if (!val) {
+    return encodeQueryKey(key);
+  }
+  if (Array.isArray(val)) {
+    return val.map((_val) => `${encodeQueryKey(key)}=${encodeQueryValue(_val)}`).join("&");
+  }
+  return `${encodeQueryKey(key)}=${encodeQueryValue(val)}`;
+}
+function stringifyQuery(query) {
+  return Object.keys(query).map((k) => encodeQueryItem(k, query[k])).join("&");
+}
+const PROTOCOL_REGEX = /^\w+:(\/\/)?/;
+const PROTOCOL_RELATIVE_REGEX = /^\/\/[^/]+/;
+function hasProtocol(inputStr, acceptProtocolRelative = false) {
+  return PROTOCOL_REGEX.test(inputStr) || acceptProtocolRelative && PROTOCOL_RELATIVE_REGEX.test(inputStr);
+}
+const TRAILING_SLASH_RE = /\/$|\/\?/;
+function hasTrailingSlash(input = "", queryParams = false) {
+  if (!queryParams) {
+    return input.endsWith("/");
+  }
+  return TRAILING_SLASH_RE.test(input);
+}
+function withoutTrailingSlash(input = "", queryParams = false) {
+  if (!queryParams) {
+    return (hasTrailingSlash(input) ? input.slice(0, -1) : input) || "/";
+  }
+  if (!hasTrailingSlash(input, true)) {
+    return input || "/";
+  }
+  const [s0, ...s] = input.split("?");
+  return (s0.slice(0, -1) || "/") + (s.length ? `?${s.join("?")}` : "");
+}
+function withTrailingSlash(input = "", queryParams = false) {
+  if (!queryParams) {
+    return input.endsWith("/") ? input : input + "/";
+  }
+  if (hasTrailingSlash(input, true)) {
+    return input || "/";
+  }
+  const [s0, ...s] = input.split("?");
+  return s0 + "/" + (s.length ? `?${s.join("?")}` : "");
+}
+function hasLeadingSlash(input = "") {
+  return input.startsWith("/");
+}
+function withoutLeadingSlash(input = "") {
+  return (hasLeadingSlash(input) ? input.substr(1) : input) || "/";
+}
+function withBase(input, base) {
+  if (isEmptyURL(base)) {
+    return input;
+  }
+  const _base = withoutTrailingSlash(base);
+  if (input.startsWith(_base)) {
+    return input;
+  }
+  return joinURL(_base, input);
+}
+function withQuery(input, query) {
+  const parsed = parseURL(input);
+  const mergedQuery = { ...parseQuery(parsed.search), ...query };
+  parsed.search = stringifyQuery(mergedQuery);
+  return stringifyParsedURL(parsed);
+}
+function isEmptyURL(url) {
+  return !url || url === "/";
+}
+function isNonEmptyURL(url) {
+  return url && url !== "/";
+}
+function joinURL(base, ...input) {
+  let url = base || "";
+  for (const i of input.filter(isNonEmptyURL)) {
+    url = url ? withTrailingSlash(url) + withoutLeadingSlash(i) : i;
+  }
+  return url;
+}
+
+function parseURL(input = "", defaultProto) {
+  if (!hasProtocol(input, true)) {
+    return defaultProto ? parseURL(defaultProto + input) : parsePath(input);
+  }
+  const [protocol = "", auth, hostAndPath = ""] = (input.replace(/\\/g, "/").match(/([^:/]+:)?\/\/([^/@]+@)?(.*)/) || []).splice(1);
+  const [host = "", path = ""] = (hostAndPath.match(/([^/?#]*)(.*)?/) || []).splice(1);
+  const { pathname, search, hash } = parsePath(path);
+  return {
+    protocol,
+    auth: auth ? auth.substr(0, auth.length - 1) : "",
+    host,
+    pathname,
+    search,
+    hash
+  };
+}
+function parsePath(input = "") {
+  const [pathname = "", search = "", hash = ""] = (input.match(/([^#?]*)(\?[^#]*)?(#.*)?/) || []).splice(1);
+  return {
+    pathname,
+    search,
+    hash
+  };
+}
+function stringifyParsedURL(parsed) {
+  const fullpath = parsed.pathname + (parsed.search ? (parsed.search.startsWith("?") ? "" : "?") + parsed.search : "") + parsed.hash;
+  if (!parsed.protocol) {
+    return fullpath;
+  }
+  return parsed.protocol + "//" + (parsed.auth ? parsed.auth + "@" : "") + parsed.host + fullpath;
+}
+
+class FetchError extends Error {
+  constructor() {
+    super(...arguments);
+    this.name = "FetchError";
+  }
+}
+function createFetchError(request, error, response) {
+  let message = "";
+  if (request && response) {
+    message = `${response.status} ${response.statusText} (${request.toString()})`;
+  }
+  if (error) {
+    message = `${error.message} (${message})`;
+  }
+  const fetchError = new FetchError(message);
+  Object.defineProperty(fetchError, "request", { get() {
+    return request;
+  } });
+  Object.defineProperty(fetchError, "response", { get() {
+    return response;
+  } });
+  Object.defineProperty(fetchError, "data", { get() {
+    return response && response._data;
+  } });
+  return fetchError;
+}
+
+const payloadMethods = new Set(Object.freeze(["PATCH", "POST", "PUT", "DELETE"]));
+function isPayloadMethod(method = "GET") {
+  return payloadMethods.has(method.toUpperCase());
+}
+function isJSONSerializable(val) {
+  if (val === void 0) {
+    return false;
+  }
+  const t = typeof val;
+  if (t === "string" || t === "number" || t === "boolean" || t === null) {
+    return true;
+  }
+  if (t !== "object") {
+    return false;
+  }
+  if (Array.isArray(val)) {
+    return true;
+  }
+  return val.constructor && val.constructor.name === "Object" || typeof val.toJSON === "function";
+}
+const textTypes = /* @__PURE__ */ new Set([
+  "image/svg",
+  "application/xml",
+  "application/xhtml",
+  "application/html"
+]);
+const JSON_RE = /^application\/(?:[\w!#$%&*`\-.^~]*\+)?json(;.+)?$/i;
+function detectResponseType(_contentType = "") {
+  if (!_contentType) {
+    return "json";
+  }
+  const contentType = _contentType.split(";").shift();
+  if (JSON_RE.test(contentType)) {
+    return "json";
+  }
+  if (textTypes.has(contentType) || contentType.startsWith("text/")) {
+    return "text";
+  }
+  return "blob";
+}
+
+const retryStatusCodes = /* @__PURE__ */ new Set([
+  408,
+  409,
+  425,
+  429,
+  500,
+  502,
+  503,
+  504
+]);
+function createFetch(globalOptions) {
+  const { fetch, Headers } = globalOptions;
+  function onError(ctx) {
+    if (ctx.options.retry !== false) {
+      const retries = typeof ctx.options.retry === "number" ? ctx.options.retry : isPayloadMethod(ctx.options.method) ? 0 : 1;
+      const responseCode = ctx.response && ctx.response.status || 500;
+      if (retries > 0 && retryStatusCodes.has(responseCode)) {
+        return $fetchRaw(ctx.request, {
+          ...ctx.options,
+          retry: retries - 1
+        });
+      }
+    }
+    const err = createFetchError(ctx.request, ctx.error, ctx.response);
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(err, $fetchRaw);
+    }
+    throw err;
+  }
+  const $fetchRaw = async function $fetchRaw2(_request, _opts = {}) {
+    const ctx = {
+      request: _request,
+      options: { ...globalOptions.defaults, ..._opts },
+      response: void 0,
+      error: void 0
+    };
+    if (ctx.options.onRequest) {
+      await ctx.options.onRequest(ctx);
+    }
+    if (typeof ctx.request === "string") {
+      if (ctx.options.baseURL) {
+        ctx.request = withBase(ctx.request, ctx.options.baseURL);
+      }
+      if (ctx.options.params) {
+        ctx.request = withQuery(ctx.request, ctx.options.params);
+      }
+      if (ctx.options.body && isPayloadMethod(ctx.options.method)) {
+        if (isJSONSerializable(ctx.options.body)) {
+          ctx.options.body = JSON.stringify(ctx.options.body);
+          ctx.options.headers = new Headers(ctx.options.headers);
+          if (!ctx.options.headers.has("content-type")) {
+            ctx.options.headers.set("content-type", "application/json");
+          }
+          if (!ctx.options.headers.has("accept")) {
+            ctx.options.headers.set("accept", "application/json");
+          }
+        }
       }
     }
+    ctx.response = await fetch(ctx.request, ctx.options).catch(async (error) => {
+      ctx.error = error;
+      if (ctx.options.onRequestError) {
+        await ctx.options.onRequestError(ctx);
+      }
+      return onError(ctx);
+    });
+    const responseType = (ctx.options.parseResponse ? "json" : ctx.options.responseType) || detectResponseType(ctx.response.headers.get("content-type") || "");
+    if (responseType === "json") {
+      const data = await ctx.response.text();
+      const parseFn = ctx.options.parseResponse || destr;
+      ctx.response._data = parseFn(data);
+    } else {
+      ctx.response._data = await ctx.response[responseType]();
+    }
+    if (ctx.options.onResponse) {
+      await ctx.options.onResponse(ctx);
+    }
+    if (!ctx.response.ok) {
+      if (ctx.options.onResponseError) {
+        await ctx.options.onResponseError(ctx);
+      }
+    }
+    return ctx.response.ok ? ctx.response : onError(ctx);
+  };
+  const $fetch = function $fetch2(request, opts) {
+    return $fetchRaw(request, opts).then((r) => r._data);
+  };
+  $fetch.raw = $fetchRaw;
+  $fetch.create = (defaultOptions = {}) => createFetch({
+    ...globalOptions,
+    defaults: {
+      ...globalOptions.defaults,
+      ...defaultOptions
+    }
+  });
+  return $fetch;
+}
+
+const _globalThis = function() {
+  if (typeof globalThis !== "undefined") {
+    return globalThis;
+  }
+  if (typeof self !== "undefined") {
+    return self;
+  }
+  if (typeof window !== "undefined") {
+    return window;
   }
-  return useIconLoader ?? loadIcon;
+  if (typeof global !== "undefined") {
+    return global;
+  }
+  throw new Error("unable to locate global object");
+}();
+const fetch = _globalThis.fetch || (() => Promise.reject(new Error("[ohmyfetch] global.fetch is not supported!")));
+const Headers = _globalThis.Headers;
+const $fetch = createFetch({ fetch, Headers });
+
+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 {
     scale = 1,
@@ -32,8 +450,46 @@ const preset = (options = {}) => {
     customizations = {},
     autoInstall = false,
     layer = "icons",
-    unit
+    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}`;
+        }
+      }
+    }
+  };
+  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 {
+      }
+    }
+    return loadIcon$1;
+  }
+  let iconLoader;
   return {
     name: "@unocss/preset-icons",
     enforce: "pre",
@@ -47,38 +503,17 @@ const preset = (options = {}) => {
         let collection = "";
         let name = "";
         let svg;
-        const iconLoader = await lookupIconLoader();
-        const iconifyLoaderOptions = {
-          addXmlNs: true,
-          scale,
-          customCollections,
-          autoInstall,
-          warn: void 0,
-          customizations: {
-            ...customizations,
-            additionalProps: { ...extraProperties },
-            trimCustomSvg: true,
-            async iconCustomizer(collection2, icon, props) {
-              await customizations.iconCustomizer?.(collection2, icon, props);
-              if (unit) {
-                if (!props.width)
-                  props.width = `${scale}${unit}`;
-                if (!props.height)
-                  props.height = `${scale}${unit}`;
-              }
-            }
-          },
-          usedProps: {}
-        };
+        iconLoader = iconLoader || await lookupIconLoader();
+        const usedProps = {};
         if (body.includes(":")) {
           [collection, name] = body.split(":");
-          svg = await iconLoader(collection, name, iconifyLoaderOptions);
+          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, iconifyLoaderOptions);
+            svg = await iconLoader(collection, name, { ...loaderOptions, usedProps });
             if (svg)
               break;
           }
@@ -99,14 +534,14 @@ const preset = (options = {}) => {
             "-webkit-mask": "var(--un-icon) no-repeat",
             "-webkit-mask-size": "100% 100%",
             "background-color": "currentColor",
-            ...iconifyLoaderOptions.usedProps
+            ...usedProps
           };
         } else {
           return {
             "background": `${url} no-repeat`,
             "background-size": "100% 100%",
             "background-color": "transparent",
-            ...iconifyLoaderOptions.usedProps
+            ...usedProps
           };
         }
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-icons",
-  "version": "0.32.8",
+  "version": "0.32.12",
   "description": "Pure CSS Icons for UnoCSS",
   "keywords": [
     "unocss",
@@ -38,10 +38,11 @@
   "sideEffects": false,
   "dependencies": {
     "@iconify/utils": "^1.0.32",
-    "@unocss/core": "0.32.8"
+    "@unocss/core": "0.32.12"
   },
   "devDependencies": {
-    "@iconify/types": "^1.1.0"
+    "@iconify/types": "^1.1.0",
+    "ohmyfetch": "^0.4.16"
   },
   "scripts": {
     "build": "unbuild",