vite-plugin-css-svg-mask-image 1.0.0 → 1.0.2
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.
- package/README.md +43 -1
- package/package.json +10 -4
package/README.md
CHANGED
|
@@ -44,16 +44,44 @@ export default defineConfig({
|
|
|
44
44
|
|
|
45
45
|
### CSS/SCSS Usage
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
#### Best practice: use `currentColor`
|
|
48
|
+
|
|
49
|
+
The main intended workflow is to theme icons via `color` and let the plugin use `background-color: currentColor` for the mask fill.
|
|
50
|
+
|
|
51
|
+
```scss
|
|
52
|
+
.icon {
|
|
53
|
+
width: 1em;
|
|
54
|
+
height: 1em;
|
|
55
|
+
mask-image: svg("arrow-right");
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.icon.is-muted {
|
|
59
|
+
color: var(--text-muted);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.icon.is-danger {
|
|
63
|
+
color: var(--danger);
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
#### `svg()` function
|
|
68
|
+
|
|
69
|
+
In your CSS or SCSS files, use the `svg()` function. The optional second argument sets `background-color` (useful as an escape hatch; for most cases prefer `currentColor` as shown above).
|
|
48
70
|
|
|
49
71
|
```scss
|
|
50
72
|
.a {
|
|
73
|
+
width: 1em;
|
|
74
|
+
height: 1em;
|
|
51
75
|
mask-image: svg("arrow-right");
|
|
52
76
|
}
|
|
53
77
|
|
|
54
78
|
.b {
|
|
55
79
|
mask-image: svg("arrow-right", "red");
|
|
56
80
|
}
|
|
81
|
+
|
|
82
|
+
.c {
|
|
83
|
+
mask-image: svg("arrow-right", "var(--color-primary)");
|
|
84
|
+
}
|
|
57
85
|
```
|
|
58
86
|
|
|
59
87
|
The plugin will transform this to:
|
|
@@ -64,6 +92,8 @@ The plugin will transform this to:
|
|
|
64
92
|
}
|
|
65
93
|
|
|
66
94
|
.a {
|
|
95
|
+
width: 1em;
|
|
96
|
+
height: 1em;
|
|
67
97
|
background-color: currentColor;
|
|
68
98
|
mask-image: var(--icon-arrow-right);
|
|
69
99
|
mask-repeat: no-repeat;
|
|
@@ -76,10 +106,22 @@ The plugin will transform this to:
|
|
|
76
106
|
mask-repeat: no-repeat;
|
|
77
107
|
mask-size: 100% 100%;
|
|
78
108
|
}
|
|
109
|
+
|
|
110
|
+
.c {
|
|
111
|
+
background-color: var(--color-primary);
|
|
112
|
+
mask-image: var(--icon-arrow-right);
|
|
113
|
+
mask-repeat: no-repeat;
|
|
114
|
+
mask-size: 100% 100%;
|
|
115
|
+
}
|
|
79
116
|
```
|
|
80
117
|
|
|
81
118
|
The `:root` declarations are automatically written to the `icons.scss` file (or your configured output file). Make sure to import this file in your main stylesheet.
|
|
82
119
|
|
|
120
|
+
Notes:
|
|
121
|
+
|
|
122
|
+
- To pass a CSS variable as the optional color argument, keep it quoted: `svg("arrow-right", "var(--color-primary)")`.
|
|
123
|
+
- If you need per-usage colors, you can also skip the second argument and set `color` (recommended) or `background-color` in regular CSS.
|
|
124
|
+
|
|
83
125
|
## Requirements
|
|
84
126
|
|
|
85
127
|
- Vite 4.0+ or 5.0+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vite-plugin-css-svg-mask-image",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Vite plugin to transform CSS/SCSS files with svg() mask-image function calls to CSS variables",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -8,6 +8,11 @@
|
|
|
8
8
|
"dist",
|
|
9
9
|
"README.md"
|
|
10
10
|
],
|
|
11
|
+
"homepage": "https://github.com/taunoha/vite-plugin-css-svg-mask-image#readme",
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "git+https://github.com/taunoha/vite-plugin-css-svg-mask-image.git"
|
|
15
|
+
},
|
|
11
16
|
"scripts": {
|
|
12
17
|
"build": "tsc",
|
|
13
18
|
"dev": "tsc --watch",
|
|
@@ -21,9 +26,10 @@
|
|
|
21
26
|
"svg",
|
|
22
27
|
"mask",
|
|
23
28
|
"css",
|
|
24
|
-
"scss"
|
|
29
|
+
"scss",
|
|
30
|
+
"icons"
|
|
25
31
|
],
|
|
26
|
-
"author": "",
|
|
32
|
+
"author": "Tauno Hanni",
|
|
27
33
|
"license": "MIT",
|
|
28
34
|
"devDependencies": {
|
|
29
35
|
"@types/node": "^25.1.0",
|
|
@@ -35,6 +41,6 @@
|
|
|
35
41
|
"postcss": "^8.5.6"
|
|
36
42
|
},
|
|
37
43
|
"peerDependencies": {
|
|
38
|
-
"vite": "^
|
|
44
|
+
"vite": "^7.0.0"
|
|
39
45
|
}
|
|
40
46
|
}
|