@unocss/preset-icons 0.32.0 → 0.32.8

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Anthony Fu <https://github.com/antfu>
+Copyright (c) 2021-PRESENT Anthony Fu <https://github.com/antfu>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -90,23 +90,21 @@ You can provide collections via `@iconify-json/[the-collection-you-want]`, `@ico
 
 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#L17) or [InlineCollection](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L80), for example using `InlineCollection`:
+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
-UnoCss({
+UnoCSS({
   presets: [
     presetIcons({
       collections: {
@@ -128,29 +126,30 @@ And then, you can use it on your html: `<span class="i-custom:circle"></span>`
 
 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#L17) or [InlineCollection](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L80).
+You can also provide your own custom collections using also [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).
 
 Additionally, you can also use [FileSystemIconLoader](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/node-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: [  
+UnoCSS({
+  presets: [
     presetIcons({
       collections: {
         // key as the collection name
         'my-icons': {
-          'account': '<svg><!-- ... --></svg>',
+          account: '<svg><!-- ... --></svg>',
           // load your custom icon lazily
-          'settings': () => fs.readFile('./path/to/my-icon.svg', 'utf-8'),
+          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: 
+          // 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
@@ -158,7 +157,7 @@ UnoCss({
         // 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" ')
+          svg => svg.replace(/#fff/, 'currentColor')
         )
       }
     })
@@ -168,14 +167,16 @@ UnoCss({
 
 ## Icon Customizations
 
-You can customize all icons using `customizations` configuration option. 
+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
@@ -183,13 +184,14 @@ For each loaded icon, the customizations will be applied in this order:
 ### Global Custom Icon Transformation
 
 When loading your custom icons, you can transform them, for example adding `fill` attribute with `currentColor`:
+
 ```ts
-UnoCss({
+UnoCSS({
   presets: [
     presetIcons({
       customizations: {
         transform(svg) {
-          return svg.replace(/^<svg /, '<svg fill="currentColor" ')  
+          return svg.replace(/#fff/, 'currentColor')
         }
       }
     })
@@ -198,8 +200,9 @@ UnoCss({
 ```
 
 From version `0.30.8` the `transform` provides the `collection` and `icon` names:
+
 ```ts
-UnoCss({
+UnoCSS({
   presets: [
     presetIcons({
       customizations: {
@@ -207,8 +210,7 @@ UnoCss({
           // do not apply fill to this icons on this collection
           if (collection === 'custom' && icon === 'my-icon')
             return svg
-          
-          return svg.replace(/^<svg /, '<svg fill="currentColor" ')  
+          return svg.replace(/#fff/, 'currentColor')
         }
       }
     })
@@ -219,8 +221,9 @@ UnoCss({
 ### Global Icon Customization
 
 When loading any icon you can customize common properties to all of them, for example configuring the same size:
+
 ```ts
-UnoCss({
+UnoCSS({
   presets: [
     presetIcons({
       customizations: {
@@ -244,13 +247,14 @@ 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({
+UnoCSS({
   presets: [
     presetIcons({
       customizations: {
         iconCustomizer(collection, icon, props) {
-          // customize all icons in this collection  
+          // customize all icons in this collection
           if (collection === 'my-other-icons') {
             props.width = '4em'
             props.height = '4em'
@@ -260,7 +264,7 @@ UnoCss({
             props.width = '6em'
             props.height = '6em'
           }
-          // customize this @iconify icon in this collection  
+          // customize this @iconify icon in this collection
           if (collection === 'mdi' && icon === 'account') {
             props.width = '2em'
             props.height = '2em'
@@ -269,14 +273,14 @@ UnoCss({
       }
     })
   ]
-})    
+})
 ```
 
-### Advanced Custom Icon Set Cleanup 
+### Advanced Custom Icon Set Cleanup
 
 When using this preset with your custom icons, consider using a cleanup process similar to that done by [Iconify](https://iconify.design/) for any icons sets. All the tools you need are available in [Iconify Tools](https://docs.iconify.design/tools/tools2/).
 
-You can check this repo, using this preset on a `Vue 3` project: https://github.com/iconify/tools/tree/main/%40iconify-demo/unocss.
+You can check this repo, using this preset on a `Vue 3` project: [@iconify/tools/@iconify-demo/unocss](https://github.com/iconify/tools/tree/main/%40iconify-demo/unocss).
 
 Read [Cleaning up icons](https://docs.iconify.design/articles/cleaning-up-icons/) article from [Iconify](https://iconify.design/) for more details.
 
@@ -286,4 +290,4 @@ This preset is inspired from [this issue](https://github.com/antfu/unplugin-icon
 
 ## License
 
-MIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)
+MIT License &copy; 2021-PRESENT [Anthony Fu](https://github.com/antfu)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-icons",
-  "version": "0.32.0",
+  "version": "0.32.8",
   "description": "Pure CSS Icons for UnoCSS",
   "keywords": [
     "unocss",
@@ -38,7 +38,7 @@
   "sideEffects": false,
   "dependencies": {
     "@iconify/utils": "^1.0.32",
-    "@unocss/core": "0.32.0"
+    "@unocss/core": "0.32.8"
   },
   "devDependencies": {
     "@iconify/types": "^1.1.0"
@@ -46,6 +46,5 @@
   "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## 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#L17) or [InlineCollection](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L80), 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#L17) or [InlineCollection](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/types.ts#L80).\n\nAdditionally, you can also use [FileSystemIconLoader](https://github.com/iconify/iconify/blob/master/packages/utils/src/loader/node-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\nFrom version `0.30.8` the `transform` provides the `collection` and `icon` names:\n```ts\nUnoCss({\n  presets: [\n    presetIcons({\n      customizations: {\n        transform(svg, collection, icon) {\n          // do not apply fill to this icons on this collection\n          if (collection === 'custom' && icon === 'my-icon')\n            return svg\n          \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### Advanced Custom Icon Set Cleanup \n\nWhen using this preset with your custom icons, consider using a cleanup process similar to that done by [Iconify](https://iconify.design/) for any icons sets. All the tools you need are available in [Iconify Tools](https://docs.iconify.design/tools/tools2/).\n\nYou can check this repo, using this preset on a `Vue 3` project: https://github.com/iconify/tools/tree/main/%40iconify-demo/unocss.\n\nRead [Cleaning up icons](https://docs.iconify.design/articles/cleaning-up-icons/) article from [Iconify](https://iconify.design/) for more details.\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"
+  }
 }