@unocss/preset-icons 0.16.4 → 0.18.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +10 -1
  2. package/dist/index.cjs +3 -3
  3. package/dist/index.mjs +3 -3
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Use **any** icons with **Pure CSS** for [UnoCSS](https://github.com/antfu/unocss).
4
4
 
5
- <blockquote align="center">
5
+ <blockquote>
6
6
  <p>💡 Recommend reading - <br><a href="https://antfu.me/posts/icons-in-pure-css"><strong>Icons in Pure CSS</strong></a><br></p>
7
7
  </blockquote>
8
8
 
@@ -67,6 +67,15 @@ presetIcons({
67
67
  })
68
68
  ```
69
69
 
70
+ ## Modes Overriding
71
+
72
+ By 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.
73
+
74
+ - `?bg` for `background-img` - renders the icon as a background image
75
+ - `?mask` for `mask` - renders the icon as a mask image
76
+
77
+ 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.
78
+
70
79
  ## Credits
71
80
 
72
81
  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 CHANGED
@@ -60,8 +60,8 @@ const preset = (options = {}) => {
60
60
  icons: -10
61
61
  },
62
62
  rules: [[
63
- new RegExp(`^${prefix}([a-z0-9:-]+)$`),
64
- async ([full, body]) => {
63
+ new RegExp(`^${prefix}([a-z0-9:-]+)(?:\\?(mask|bg))?$`),
64
+ async ([full, body, _mode]) => {
65
65
  let collection = "";
66
66
  let name = "";
67
67
  let svg;
@@ -83,7 +83,7 @@ const preset = (options = {}) => {
83
83
  core.warnOnce(`failed to load icon "${full}"`);
84
84
  return;
85
85
  }
86
- let _mode = mode;
86
+ _mode = _mode || mode;
87
87
  if (_mode === "auto")
88
88
  _mode = svg.includes("currentColor") ? "mask" : "background-img";
89
89
  const url = `url("data:image/svg+xml;utf8,${encodeSvg(svg)}")`;
package/dist/index.mjs CHANGED
@@ -56,8 +56,8 @@ const preset = (options = {}) => {
56
56
  icons: -10
57
57
  },
58
58
  rules: [[
59
- new RegExp(`^${prefix}([a-z0-9:-]+)$`),
60
- async ([full, body]) => {
59
+ new RegExp(`^${prefix}([a-z0-9:-]+)(?:\\?(mask|bg))?$`),
60
+ async ([full, body, _mode]) => {
61
61
  let collection = "";
62
62
  let name = "";
63
63
  let svg;
@@ -79,7 +79,7 @@ const preset = (options = {}) => {
79
79
  warnOnce(`failed to load icon "${full}"`);
80
80
  return;
81
81
  }
82
- let _mode = mode;
82
+ _mode = _mode || mode;
83
83
  if (_mode === "auto")
84
84
  _mode = svg.includes("currentColor") ? "mask" : "background-img";
85
85
  const url = `url("data:image/svg+xml;utf8,${encodeSvg(svg)}")`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unocss/preset-icons",
3
- "version": "0.16.4",
3
+ "version": "0.18.1",
4
4
  "description": "Pure CSS Icons for UnoCSS",
5
5
  "keywords": [
6
6
  "unocss",
@@ -43,7 +43,7 @@
43
43
  ],
44
44
  "dependencies": {
45
45
  "@iconify/utils": "^1.0.20",
46
- "@unocss/core": "0.16.4",
46
+ "@unocss/core": "0.18.1",
47
47
  "local-pkg": "^0.4.0"
48
48
  },
49
49
  "devDependencies": {