@unocss/preset-icons 0.27.6 → 0.28.2

package/README.md

@@ -41,9 +41,9 @@ import presetIcons from '@unocss/preset-icons'
 
 Unocss({
   presets: [
-    presetIcons({ /* options */ })
+    presetIcons({ /* options */ }),
     // ...other presets
-  ]
+  ],
 })
 ```
 
@@ -69,7 +69,7 @@ presetIcons({
     'display': 'inline-block',
     'vertical-align': 'middle',
     // ...
-  }
+  },
 })
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-icons",
-  "version": "0.27.6",
+  "version": "0.28.2",
   "description": "Pure CSS Icons for UnoCSS",
   "keywords": [
     "unocss",
@@ -14,18 +14,16 @@
     "url": "https://github.com/unocss/unocss/issues"
   },
   "license": "MIT",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/unocss/unocss.git",
     "directory": "packages/preset-icons"
   },
   "funding": "https://github.com/sponsors/antfu",
-  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
-  "sideEffects": false,
-  "files": [
-    "dist",
-    "*.css"
-  ],
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "require": "./dist/index.cjs",
@@ -38,12 +36,14 @@
       "types": "./dist/fs.d.ts"
     }
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "*.css"
+  ],
+  "sideEffects": false,
   "dependencies": {
     "@iconify/utils": "^1.0.23",
-    "@unocss/core": "0.27.6",
+    "@unocss/core": "0.28.2",
     "local-pkg": "^0.4.1"
   },
   "devDependencies": {
@@ -52,5 +52,6 @@
   "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"
 }