@unocss/preset-icons 0.29.4 → 0.30.0

package/README.md

@@ -82,6 +82,177 @@ By default, this preset will choose the rendering modes automatically for each i
 
 for example, `vscode-icons:file-type-light-db`, an icon with colors that will be rendered as a background image. Use `vscode-icons:file-type-light-db?bg` to render it as a mask image and bypass it's colors.
 
+## Configuring collections and icons resolvers
+
+You can provide collections via `@iconify-json/[the-collection-you-want]`, `@iconify/json` or using your custom ones using `collections` option on your `UnoCSS` configuration.
+
+### 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:
+```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),
+    twemoji: () => import('@iconify-json/twemoji/icons.json').then(i => i.default as any),
+    ri: () => import('@iconify-json/ri/icons.json').then(i => i.default as any),
+    tabler: () => import('@iconify-json/tabler/icons.json').then(i => i.default as any),
+    uim: () => import('@iconify-json/uim/icons.json').then(i => i.default as any)
+  }
+})
+```
+
+You can also provide your own custom collections using [CustomIconLoader](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L12) or [InlineCollection](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L61), for example using `InlineCollection`:
+```ts
+UnoCss({
+  presets: [
+    presetIcons({
+      collections: {
+        custom: {
+          circle: '<svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="50"></circle></svg>',
+          /* ... */
+        },
+        carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default as any),
+        /* ... */
+      }
+    })
+  ]
+})
+```
+
+and then, you can use it on your html: `<span class="i-custom:circle"></span>`
+
+### Node.js
+
+In `Node.js` the preset will search for the installed iconify dataset automatically and so you don't need to register the `iconify` collections.
+
+You can also provide your own custom collections using also [CustomIconLoader](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L12) or [InlineCollection](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L61).
+
+Additionally, you can also use [FileSystemIconLoader](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/loaders.ts#L9) to load your custom icons from your file system. You will need to install `@iconify/utils` package as `dev dependency`.
+```ts
+// vite.config.ts
+import { promises as fs } from 'fs'
+// loader helpers
+import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
+
+UnoCss({
+  presets: [  
+    presetIcons({
+      collections: {
+        // key as the collection name
+        'my-icons': {
+          'account': '<svg><!-- ... --></svg>',
+          // load your custom icon lazily
+          'settings': () => fs.readFile('./path/to/my-icon.svg', 'utf-8'),
+          /* ... */
+        },
+        'my-other-icons': async (iconName) => {
+          // your custom loader here. Do whatever you want.
+          // for example, fetch from a remote server: 
+          return await fetch(`https://example.com/icons/${iconName}.svg`).then(res => res.text())
+        },
+        // a helper to load icons from the file system
+        // files under `./assets/icons` with `.svg` extension will be loaded as it's file name
+        // you can also provide a transform callback to change each icon (optional)
+        'my-yet-other-icons': FileSystemIconLoader(
+          './assets/icons',
+          svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')
+        )
+      }
+    })
+  ]
+})
+```
+
+## Icon Customizations
+
+You can customize all icons using `customizations` configuration option. 
+
+Available customizations functions:
+- `transform`: transform raw `svg`, will be only applied when using `custom` icon collection (`iconify` collections excluded).
+- `customize`: change default icon customizations values.
+- `iconCustomizer`: change default icon customizations values.
+
+For each loaded icon, the customizations will be applied in this order:
+- apply `transform` to raw `svg`, if provided and using custom icon collection
+- apply `customize` with default customizations, if provided
+- apply `iconCustomizer` with `customize` customizations, if provided
+
+### Global Custom Icon Transformation
+
+When loading your custom icons, you can transform them, for example adding `fill` attribute with `currentColor`:
+```ts
+UnoCss({
+  presets: [
+    presetIcons({
+      customizations: {
+        transform(svg) {
+          return svg.replace(/^<svg /, '<svg fill="currentColor" ')  
+        }
+      }
+    })
+  ]
+})
+```
+
+### Global Icon Customization
+
+When loading any icon you can customize common properties to all of them, for example configuring the same size:
+```ts
+UnoCss({
+  presets: [
+    presetIcons({
+      customizations: {
+        customize(props) {
+          props.width = '2em'
+          props.height = '2em'
+          return props
+        }
+      }
+    })
+  ]
+})
+```
+
+### Icon/Collection Customization
+
+You can customize each icon using `iconCustomizer` configuration option.
+
+The `iconCustomizer` will take precedence over configuration.
+
+The `iconCustomizer` will be applied to any collection, that is, for each icon from `custom` loader, `inlined` on `custom collections` or from `@iconify`.
+
+For example, you can configure `iconCustomizer` to change all icons for a collection or individual icons on a collection:
+```ts
+UnoCss({
+  presets: [
+    presetIcons({
+      customizations: {
+        iconCustomizer(collection, icon, props) {
+          // customize all icons in this collection  
+          if (collection === 'my-other-icons') {
+            props.width = '4em'
+            props.height = '4em'
+          }
+          // customize this icon in this collection
+          if (collection === 'my-icons' && icon === 'account') {
+            props.width = '6em'
+            props.height = '6em'
+          }
+          // customize this @iconify icon in this collection  
+          if (collection === 'mdi' && icon === 'account') {
+            props.width = '2em'
+            props.height = '2em'
+          }
+        }
+      }
+    })
+  ]
+})    
+```
+
 ## Credits
 
 This preset is inspired from [this issue](https://github.com/antfu/unplugin-icons/issues/88) created by [@husayt](https://github.com/husayt). Based on the work of [this PR](https://github.com/antfu/unplugin-icons/pull/90) by [@userquin](https://github.com/userquin).

package/dist/index.cjs

@@ -3,53 +3,27 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const core = require('@unocss/core');
-const build = require('@iconify/utils/lib/svg/build');
-const customisations = require('@iconify/utils/lib/customisations');
-const getIcon = require('@iconify/utils/lib/icon-set/get-icon');
+const utils = require('@iconify/utils');
+const encodeSvgForCss = require('@iconify/utils/lib/svg/encode-svg-for-css');
 
 const isNode = typeof process < "u" && typeof process.stdout < "u";
 const isVSCode = isNode && !!process.env.VSCODE_CWD;
-function encodeSvg(svg) {
-  return svg.replace("<svg", ~svg.indexOf("xmlns") ? "<svg" : '<svg xmlns="http://www.w3.org/2000/svg"').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;
-async function importFsModule() {
-  try {
-    return await import('./fs.cjs');
-  } catch {
+async function lookupIconLoader() {
+  let useIconLoader;
+  if (isNode && !isVSCode) {
     try {
-      return require("./fs.cjs");
+      useIconLoader = await import('@iconify/utils/lib/loader/node-loader').then((i) => i?.loadNodeIcon);
     } catch {
-      return void 0;
+      try {
+        useIconLoader = require("@iconify/utils/lib/loader/node-loader.cjs");
+      } catch {
+        useIconLoader = utils.loadIcon;
+      }
     }
   }
-}
-async function searchForIcon(collection, id, collections, scale) {
-  if (!collection || !id)
-    return;
-  let iconSet = collections[collection];
-  if (typeof iconSet === "function")
-    iconSet = await iconSet();
-  if (!iconSet && isNode && !isVSCode) {
-    try {
-      const loadCollectionFromFS = await importFsModule().then((i) => i?.loadCollectionFromFS);
-      if (loadCollectionFromFS)
-        iconSet = await loadCollectionFromFS(collection);
-    } catch {
-    }
-  }
-  if (!iconSet)
-    return;
-  const iconData = getIcon.getIconData(iconSet, id, true);
-  if (iconData) {
-    const { attributes, body } = build.iconToSVG(iconData, {
-      ...customisations.defaults,
-      height: `${scale}em`,
-      width: `${scale}em`
-    });
-    return body.includes("xlink:") ? `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ${Object.entries(attributes).map((i) => `${i[0]}="${i[1]}"`).join(" ")}>${body}</svg>` : `<svg ${Object.entries(attributes).map((i) => `${i[0]}="${i[1]}"`).join(" ")}>${body}</svg>`;
-  }
+  return useIconLoader ?? utils.loadIcon;
 }
 const preset = (options = {}) => {
   const {
@@ -57,8 +31,10 @@ const preset = (options = {}) => {
     mode = "auto",
     prefix = "i-",
     warn = false,
-    collections = {},
+    collections: customCollections,
     extraProperties = {},
+    customizations = {},
+    autoInstall = false,
     layer = "icons"
   } = options;
   return {
@@ -74,15 +50,29 @@ const preset = (options = {}) => {
         let collection = "";
         let name = "";
         let svg;
+        const iconLoader = await lookupIconLoader();
+        const iconifyLoaderOptions = {
+          addXmlNs: true,
+          scale,
+          customCollections,
+          autoInstall,
+          warn: warn ? full : void 0,
+          customizations: {
+            ...customizations,
+            additionalProps: { ...extraProperties },
+            trimCustomSvg: true
+          },
+          usedProps: {}
+        };
         if (body.includes(":")) {
           [collection, name] = body.split(":");
-          svg = await searchForIcon(collection, name, collections, scale);
+          svg = await iconLoader(collection, name, iconifyLoaderOptions);
         } 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 searchForIcon(collection, name, collections, scale);
+            svg = await iconLoader(collection, name, iconifyLoaderOptions);
             if (svg)
               break;
           }
@@ -95,7 +85,7 @@ const preset = (options = {}) => {
         _mode = _mode || mode;
         if (_mode === "auto")
           _mode = svg.includes("currentColor") ? "mask" : "background-img";
-        const url = `url("data:image/svg+xml;utf8,${encodeSvg(svg)}")`;
+        const url = `url("data:image/svg+xml;utf8,${encodeSvgForCss.encodeSvgForCss(svg)}")`;
         if (_mode === "mask") {
           return {
             "--un-icon": url,
@@ -104,18 +94,14 @@ const preset = (options = {}) => {
             "-webkit-mask": "var(--un-icon) no-repeat",
             "-webkit-mask-size": "100% 100%",
             "background-color": "currentColor",
-            "height": `${scale}em`,
-            "width": `${scale}em`,
-            ...extraProperties
+            ...iconifyLoaderOptions.usedProps
           };
         } else {
           return {
             "background": `${url} no-repeat`,
             "background-size": "100% 100%",
             "background-color": "transparent",
-            "height": `${scale}em`,
-            "width": `${scale}em`,
-            ...extraProperties
+            ...iconifyLoaderOptions.usedProps
           };
         }
       },

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { Awaitable, Preset } from '@unocss/core';
+import { CustomIconLoader, InlineCollection, IconCustomizations } from '@iconify/utils/lib/loader/types';
 import { IconifyJSON } from '@iconify/types';
 
 interface IconsOptions {
@@ -41,13 +42,25 @@ interface IconsOptions {
      * 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, IconifyJSON | undefined | (() => Awaitable<IconifyJSON | undefined>)>;
+    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;
 }
 
 declare const preset: (options?: IconsOptions) => Preset;

package/dist/index.mjs

@@ -1,51 +1,25 @@
 import { warnOnce } from '@unocss/core';
-import { iconToSVG } from '@iconify/utils/lib/svg/build';
-import { defaults } from '@iconify/utils/lib/customisations';
-import { getIconData } from '@iconify/utils/lib/icon-set/get-icon';
+import { loadIcon } from '@iconify/utils';
+import { encodeSvgForCss } from '@iconify/utils/lib/svg/encode-svg-for-css';
 
 const isNode = typeof process < "u" && typeof process.stdout < "u";
 const isVSCode = isNode && !!process.env.VSCODE_CWD;
-function encodeSvg(svg) {
-  return svg.replace("<svg", ~svg.indexOf("xmlns") ? "<svg" : '<svg xmlns="http://www.w3.org/2000/svg"').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;
-async function importFsModule() {
-  try {
-    return await import('./fs.mjs');
-  } catch {
+async function lookupIconLoader() {
+  let useIconLoader;
+  if (isNode && !isVSCode) {
     try {
-      return require("./fs.cjs");
+      useIconLoader = await import('@iconify/utils/lib/loader/node-loader').then((i) => i?.loadNodeIcon);
     } catch {
-      return void 0;
+      try {
+        useIconLoader = require("@iconify/utils/lib/loader/node-loader.cjs");
+      } catch {
+        useIconLoader = loadIcon;
+      }
     }
   }
-}
-async function searchForIcon(collection, id, collections, scale) {
-  if (!collection || !id)
-    return;
-  let iconSet = collections[collection];
-  if (typeof iconSet === "function")
-    iconSet = await iconSet();
-  if (!iconSet && isNode && !isVSCode) {
-    try {
-      const loadCollectionFromFS = await importFsModule().then((i) => i?.loadCollectionFromFS);
-      if (loadCollectionFromFS)
-        iconSet = await loadCollectionFromFS(collection);
-    } catch {
-    }
-  }
-  if (!iconSet)
-    return;
-  const iconData = getIconData(iconSet, id, true);
-  if (iconData) {
-    const { attributes, body } = iconToSVG(iconData, {
-      ...defaults,
-      height: `${scale}em`,
-      width: `${scale}em`
-    });
-    return body.includes("xlink:") ? `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ${Object.entries(attributes).map((i) => `${i[0]}="${i[1]}"`).join(" ")}>${body}</svg>` : `<svg ${Object.entries(attributes).map((i) => `${i[0]}="${i[1]}"`).join(" ")}>${body}</svg>`;
-  }
+  return useIconLoader ?? loadIcon;
 }
 const preset = (options = {}) => {
   const {
@@ -53,8 +27,10 @@ const preset = (options = {}) => {
     mode = "auto",
     prefix = "i-",
     warn = false,
-    collections = {},
+    collections: customCollections,
     extraProperties = {},
+    customizations = {},
+    autoInstall = false,
     layer = "icons"
   } = options;
   return {
@@ -70,15 +46,29 @@ const preset = (options = {}) => {
         let collection = "";
         let name = "";
         let svg;
+        const iconLoader = await lookupIconLoader();
+        const iconifyLoaderOptions = {
+          addXmlNs: true,
+          scale,
+          customCollections,
+          autoInstall,
+          warn: warn ? full : void 0,
+          customizations: {
+            ...customizations,
+            additionalProps: { ...extraProperties },
+            trimCustomSvg: true
+          },
+          usedProps: {}
+        };
         if (body.includes(":")) {
           [collection, name] = body.split(":");
-          svg = await searchForIcon(collection, name, collections, scale);
+          svg = await iconLoader(collection, name, iconifyLoaderOptions);
         } 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 searchForIcon(collection, name, collections, scale);
+            svg = await iconLoader(collection, name, iconifyLoaderOptions);
             if (svg)
               break;
           }
@@ -91,7 +81,7 @@ const preset = (options = {}) => {
         _mode = _mode || mode;
         if (_mode === "auto")
           _mode = svg.includes("currentColor") ? "mask" : "background-img";
-        const url = `url("data:image/svg+xml;utf8,${encodeSvg(svg)}")`;
+        const url = `url("data:image/svg+xml;utf8,${encodeSvgForCss(svg)}")`;
         if (_mode === "mask") {
           return {
             "--un-icon": url,
@@ -100,18 +90,14 @@ const preset = (options = {}) => {
             "-webkit-mask": "var(--un-icon) no-repeat",
             "-webkit-mask-size": "100% 100%",
             "background-color": "currentColor",
-            "height": `${scale}em`,
-            "width": `${scale}em`,
-            ...extraProperties
+            ...iconifyLoaderOptions.usedProps
           };
         } else {
           return {
             "background": `${url} no-repeat`,
             "background-size": "100% 100%",
             "background-color": "transparent",
-            "height": `${scale}em`,
-            "width": `${scale}em`,
-            ...extraProperties
+            ...iconifyLoaderOptions.usedProps
           };
         }
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-icons",
-  "version": "0.29.4",
+  "version": "0.30.0",
   "description": "Pure CSS Icons for UnoCSS",
   "keywords": [
     "unocss",
@@ -29,11 +29,6 @@
       "require": "./dist/index.cjs",
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
-    },
-    "./fs": {
-      "require": "./dist/fs.cjs",
-      "import": "./dist/fs.mjs",
-      "types": "./dist/fs.d.ts"
     }
   },
   "files": [
@@ -42,16 +37,15 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@iconify/utils": "^1.0.24",
-    "@unocss/core": "0.29.4",
-    "local-pkg": "^0.4.1"
+    "@iconify/utils": "^1.0.30",
+    "@unocss/core": "0.30.0"
   },
   "devDependencies": {
-    "@iconify/types": "^1.0.12"
+    "@iconify/types": "^1.1.0"
   },
   "scripts": {
     "build": "unbuild",
     "stub": "unbuild --stub"
   },
-  "readme": "# @unocss/preset-icons\n\nUse **any** icons with **Pure CSS** for [UnoCSS](https://github.com/unocss/unocss).\n\n<blockquote>\n<p>💡 Recommend reading - <br><a href=\"https://antfu.me/posts/icons-in-pure-css\"><strong>Icons in Pure CSS</strong></a><br></p>\n</blockquote>\n\nFollow the following conventions to use the icons\n\n- `<prefix><collection>-<icon>`\n- `<prefix><collection>:<icon>`\n\nFor examples:\n\n```html\n<!-- A basic anchor icon from Phosphor icons -->\n<div class=\"i-ph-anchor-simple-thin\" />\n<!-- An orange alarm from Material Design Icons -->\n<div class=\"i-mdi-alarm text-orange-400\" />\n<!-- A large Vue logo -->\n<div class=\"i-logos-vue text-3xl\" />\n<!-- Sun in light mode, Moon in dark mode, from Carbon -->\n<button class=\"i-carbon-sun dark:i-carbon-moon\" />\n<!-- Twemoji of laugh, turns to tear on hovering -->\n<div class=\"i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy\" />\n```\n\n<img src=\"https://user-images.githubusercontent.com/11247099/136709053-31b4db79-eddc-4dc6-aa2d-388086332630.gif\" height=\"100\"><br><sup>This is powered by pure CSS</sup>\n\n## Install\n\n```bash\nnpm i -D @unocss/preset-icons @iconify-json/[the-collection-you-want]\n```\n\nWe use [Iconify](https://iconify.design) as our data source of icons. You need to install the corresponding iconset in `devDependencies` by following the `@iconify-json/*` pattern. For example, `@iconify-json/mdi` for [Material Design Icons](https://materialdesignicons.com/), `@iconify-json/tabler` for [Tabler](https://tabler-icons.io/). You can refer to [Icônes](https://icones.js.org/) or [Iconify](https://icon-sets.iconify.design/) for all the collections available.\n\n```ts\nimport presetIcons from '@unocss/preset-icons'\n\nUnocss({\n  presets: [\n    presetIcons({ /* options */ }),\n    // ...other presets\n  ],\n})\n```\n\n> 💡 You can also use this preset alone as a complement to your existing UI frameworks to have pure CSS icons!\n\nIf you prefer to install the all the icon sets available on Iconify at once (~130MB):\n\n```bash\nnpm i -D @iconify/json\n```\n\n## Configuration\n\nRefer to the [type definition](https://github.com/unocss/unocss/blob/main/packages/preset-icons/src/types.ts#L4) for all configurations avaliable.\n\n### Extra Properties\n\nYou can provide the extra CSS properties to control the default behavior of the icons. The following is an example of make icons inlined by default:\n\n```ts\npresetIcons({\n  extraProperties: {\n    'display': 'inline-block',\n    'vertical-align': 'middle',\n    // ...\n  },\n})\n```\n\n## Modes Overriding\n\nBy default, this preset will choose the rendering modes automatically for each icon based on the icons' characteristics. You can read more in this [blog post](https://antfu.me/posts/icons-in-pure-css). In some cases, you may want to explicitly set the rendering modes for each icon.\n\n- `?bg` for `background-img` - renders the icon as a background image\n- `?mask` for `mask` - renders the icon as a mask image\n\nfor example, `vscode-icons:file-type-light-db`, an icon with colors that will be rendered as a background image. Use `vscode-icons:file-type-light-db?bg` to render it as a mask image and bypass it's colors.\n\n## Credits\n\nThis preset is inspired from [this issue](https://github.com/antfu/unplugin-icons/issues/88) created by [@husayt](https://github.com/husayt). Based on the work of [this PR](https://github.com/antfu/unplugin-icons/pull/90) by [@userquin](https://github.com/userquin).\n\n## License\n\nMIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)\n"
+  "readme": "# @unocss/preset-icons\n\nUse **any** icons with **Pure CSS** for [UnoCSS](https://github.com/unocss/unocss).\n\n<blockquote>\n<p>💡 Recommend reading - <br><a href=\"https://antfu.me/posts/icons-in-pure-css\"><strong>Icons in Pure CSS</strong></a><br></p>\n</blockquote>\n\nFollow the following conventions to use the icons\n\n- `<prefix><collection>-<icon>`\n- `<prefix><collection>:<icon>`\n\nFor examples:\n\n```html\n<!-- A basic anchor icon from Phosphor icons -->\n<div class=\"i-ph-anchor-simple-thin\" />\n<!-- An orange alarm from Material Design Icons -->\n<div class=\"i-mdi-alarm text-orange-400\" />\n<!-- A large Vue logo -->\n<div class=\"i-logos-vue text-3xl\" />\n<!-- Sun in light mode, Moon in dark mode, from Carbon -->\n<button class=\"i-carbon-sun dark:i-carbon-moon\" />\n<!-- Twemoji of laugh, turns to tear on hovering -->\n<div class=\"i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy\" />\n```\n\n<img src=\"https://user-images.githubusercontent.com/11247099/136709053-31b4db79-eddc-4dc6-aa2d-388086332630.gif\" height=\"100\"><br><sup>This is powered by pure CSS</sup>\n\n## Install\n\n```bash\nnpm i -D @unocss/preset-icons @iconify-json/[the-collection-you-want]\n```\n\nWe use [Iconify](https://iconify.design) as our data source of icons. You need to install the corresponding iconset in `devDependencies` by following the `@iconify-json/*` pattern. For example, `@iconify-json/mdi` for [Material Design Icons](https://materialdesignicons.com/), `@iconify-json/tabler` for [Tabler](https://tabler-icons.io/). You can refer to [Icônes](https://icones.js.org/) or [Iconify](https://icon-sets.iconify.design/) for all the collections available.\n\n```ts\nimport presetIcons from '@unocss/preset-icons'\n\nUnocss({\n  presets: [\n    presetIcons({ /* options */ }),\n    // ...other presets\n  ],\n})\n```\n\n> 💡 You can also use this preset alone as a complement to your existing UI frameworks to have pure CSS icons!\n\nIf you prefer to install the all the icon sets available on Iconify at once (~130MB):\n\n```bash\nnpm i -D @iconify/json\n```\n\n## Configuration\n\nRefer to the [type definition](https://github.com/unocss/unocss/blob/main/packages/preset-icons/src/types.ts#L4) for all configurations avaliable.\n\n### Extra Properties\n\nYou can provide the extra CSS properties to control the default behavior of the icons. The following is an example of make icons inlined by default:\n\n```ts\npresetIcons({\n  extraProperties: {\n    'display': 'inline-block',\n    'vertical-align': 'middle',\n    // ...\n  },\n})\n```\n\n## Modes Overriding\n\nBy default, this preset will choose the rendering modes automatically for each icon based on the icons' characteristics. You can read more in this [blog post](https://antfu.me/posts/icons-in-pure-css). In some cases, you may want to explicitly set the rendering modes for each icon.\n\n- `?bg` for `background-img` - renders the icon as a background image\n- `?mask` for `mask` - renders the icon as a mask image\n\nfor example, `vscode-icons:file-type-light-db`, an icon with colors that will be rendered as a background image. Use `vscode-icons:file-type-light-db?bg` to render it as a mask image and bypass it's colors.\n\n## Configuring collections and icons resolvers\n\nYou can provide collections via `@iconify-json/[the-collection-you-want]`, `@iconify/json` or using your custom ones using `collections` option on your `UnoCSS` configuration.\n\n### Browser\n\nTo load `iconify` collections you should use `@iconify-json/[the-collection-you-want]` and not `@iconify/json` since the `json` file is huge.\nYou will need to provide the `iconify` collections using `dynamic imports`, for example, on playground you have these collections:\n```ts\npresetIcons({\n  collections: {\n    carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default as any),\n    mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default as any),\n    logos: () => import('@iconify-json/logos/icons.json').then(i => i.default as any),\n    twemoji: () => import('@iconify-json/twemoji/icons.json').then(i => i.default as any),\n    ri: () => import('@iconify-json/ri/icons.json').then(i => i.default as any),\n    tabler: () => import('@iconify-json/tabler/icons.json').then(i => i.default as any),\n    uim: () => import('@iconify-json/uim/icons.json').then(i => i.default as any)\n  }\n})\n```\n\nYou can also provide your own custom collections using [CustomIconLoader](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L12) or [InlineCollection](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L61), for example using `InlineCollection`:\n```ts\nUnoCss({\n  presets: [\n    presetIcons({\n      collections: {\n        custom: {\n          circle: '<svg viewBox=\"0 0 120 120\"><circle cx=\"60\" cy=\"60\" r=\"50\"></circle></svg>',\n          /* ... */\n        },\n        carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default as any),\n        /* ... */\n      }\n    })\n  ]\n})\n```\n\nand then, you can use it on your html: `<span class=\"i-custom:circle\"></span>`\n\n### Node.js\n\nIn `Node.js` the preset will search for the installed iconify dataset automatically and so you don't need to register the `iconify` collections.\n\nYou can also provide your own custom collections using also [CustomIconLoader](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L12) or [InlineCollection](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L61).\n\nAdditionally, you can also use [FileSystemIconLoader](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/loaders.ts#L9) to load your custom icons from your file system. You will need to install `@iconify/utils` package as `dev dependency`.\n```ts\n// vite.config.ts\nimport { promises as fs } from 'fs'\n// loader helpers\nimport { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'\n\nUnoCss({\n  presets: [  \n    presetIcons({\n      collections: {\n        // key as the collection name\n        'my-icons': {\n          'account': '<svg><!-- ... --></svg>',\n          // load your custom icon lazily\n          'settings': () => fs.readFile('./path/to/my-icon.svg', 'utf-8'),\n          /* ... */\n        },\n        'my-other-icons': async (iconName) => {\n          // your custom loader here. Do whatever you want.\n          // for example, fetch from a remote server: \n          return await fetch(`https://example.com/icons/${iconName}.svg`).then(res => res.text())\n        },\n        // a helper to load icons from the file system\n        // files under `./assets/icons` with `.svg` extension will be loaded as it's file name\n        // you can also provide a transform callback to change each icon (optional)\n        'my-yet-other-icons': FileSystemIconLoader(\n          './assets/icons',\n          svg => svg.replace(/^<svg /, '<svg fill=\"currentColor\" ')\n        )\n      }\n    })\n  ]\n})\n```\n\n## Icon Customizations\n\nYou can customize all icons using `customizations` configuration option. \n\nAvailable customizations functions:\n- `transform`: transform raw `svg`, will be only applied when using `custom` icon collection (`iconify` collections excluded).\n- `customize`: change default icon customizations values.\n- `iconCustomizer`: change default icon customizations values.\n\nFor each loaded icon, the customizations will be applied in this order:\n- apply `transform` to raw `svg`, if provided and using custom icon collection\n- apply `customize` with default customizations, if provided\n- apply `iconCustomizer` with `customize` customizations, if provided\n\n### Global Custom Icon Transformation\n\nWhen loading your custom icons, you can transform them, for example adding `fill` attribute with `currentColor`:\n```ts\nUnoCss({\n  presets: [\n    presetIcons({\n      customizations: {\n        transform(svg) {\n          return svg.replace(/^<svg /, '<svg fill=\"currentColor\" ')  \n        }\n      }\n    })\n  ]\n})\n```\n\n### Global Icon Customization\n\nWhen loading any icon you can customize common properties to all of them, for example configuring the same size:\n```ts\nUnoCss({\n  presets: [\n    presetIcons({\n      customizations: {\n        customize(props) {\n          props.width = '2em'\n          props.height = '2em'\n          return props\n        }\n      }\n    })\n  ]\n})\n```\n\n### Icon/Collection Customization\n\nYou can customize each icon using `iconCustomizer` configuration option.\n\nThe `iconCustomizer` will take precedence over configuration.\n\nThe `iconCustomizer` will be applied to any collection, that is, for each icon from `custom` loader, `inlined` on `custom collections` or from `@iconify`.\n\nFor example, you can configure `iconCustomizer` to change all icons for a collection or individual icons on a collection:\n```ts\nUnoCss({\n  presets: [\n    presetIcons({\n      customizations: {\n        iconCustomizer(collection, icon, props) {\n          // customize all icons in this collection  \n          if (collection === 'my-other-icons') {\n            props.width = '4em'\n            props.height = '4em'\n          }\n          // customize this icon in this collection\n          if (collection === 'my-icons' && icon === 'account') {\n            props.width = '6em'\n            props.height = '6em'\n          }\n          // customize this @iconify icon in this collection  \n          if (collection === 'mdi' && icon === 'account') {\n            props.width = '2em'\n            props.height = '2em'\n          }\n        }\n      }\n    })\n  ]\n})    \n```\n\n## Credits\n\nThis preset is inspired from [this issue](https://github.com/antfu/unplugin-icons/issues/88) created by [@husayt](https://github.com/husayt). Based on the work of [this PR](https://github.com/antfu/unplugin-icons/pull/90) by [@userquin](https://github.com/userquin).\n\n## License\n\nMIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)\n"
 }

package/dist/fs.cjs

@@ -1,27 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const fs = require('fs');
-const localPkg = require('local-pkg');
-
-const _collections = {};
-const isLegacyExists = localPkg.isPackageExists("@iconify/json");
-async function loadCollectionFromFS(name) {
-  if (!_collections[name])
-    _collections[name] = task();
-  return _collections[name];
-  async function task() {
-    let jsonPath = localPkg.resolveModule(`@iconify-json/${name}/icons.json`);
-    if (!jsonPath && isLegacyExists)
-      jsonPath = localPkg.resolveModule(`@iconify/json/json/${name}.json`);
-    if (jsonPath) {
-      const icons = JSON.parse(await fs.promises.readFile(jsonPath, "utf8"));
-      return icons;
-    } else {
-      return void 0;
-    }
-  }
-}
-
-exports.loadCollectionFromFS = loadCollectionFromFS;

package/dist/fs.d.ts

@@ -1,5 +0,0 @@
-import { IconifyJSON } from '@iconify/types';
-
-declare function loadCollectionFromFS(name: string): Promise<IconifyJSON | undefined>;
-
-export { loadCollectionFromFS };

package/dist/fs.mjs

@@ -1,23 +0,0 @@
-import { promises } from 'fs';
-import { isPackageExists, resolveModule } from 'local-pkg';
-
-const _collections = {};
-const isLegacyExists = isPackageExists("@iconify/json");
-async function loadCollectionFromFS(name) {
-  if (!_collections[name])
-    _collections[name] = task();
-  return _collections[name];
-  async function task() {
-    let jsonPath = resolveModule(`@iconify-json/${name}/icons.json`);
-    if (!jsonPath && isLegacyExists)
-      jsonPath = resolveModule(`@iconify/json/json/${name}.json`);
-    if (jsonPath) {
-      const icons = JSON.parse(await promises.readFile(jsonPath, "utf8"));
-      return icons;
-    } else {
-      return void 0;
-    }
-  }
-}
-
-export { loadCollectionFromFS };