gulp-stacksvg 1.0.2 → 1.0.4
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 +10 -11
- package/index.js +2 -4
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -49,11 +49,11 @@ Unlike all other methods for assembling a sprite, the stack does not limit us in
|
|
|
49
49
|
We can use the stack in all four possible ways:
|
|
50
50
|
|
|
51
51
|
- in markup:
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
- in `src` of `img` tag — static,
|
|
53
|
+
- in the `href` of the `use` tag — with the possibility of repainting,
|
|
54
54
|
- in styles:
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
- in `url()` properties `background` — static,
|
|
56
|
+
- in `url()` properties `mask` — with the possibility of repainting.
|
|
57
57
|
|
|
58
58
|
[Demo page](https://firefoxic.github.io/gulp-stacksvg/test/) to prove it.
|
|
59
59
|
|
|
@@ -63,8 +63,7 @@ This method was first mentioned in a Simurai [article](https://simurai.com/blog/
|
|
|
63
63
|
|
|
64
64
|
This can be done much easier. In general, the stack is arranged almost like a symbol sprite, but without changing the icon tag (it remain the `svg` tag, as in the original icon files) and with the addition of a tiny bit of style.
|
|
65
65
|
|
|
66
|
-
```
|
|
67
|
-
<?xml version="1.0" encoding="UTF-8"?>
|
|
66
|
+
```xml
|
|
68
67
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
69
68
|
|
|
70
69
|
<style>
|
|
@@ -75,7 +74,7 @@ This can be done much easier. In general, the stack is arranged almost like a sy
|
|
|
75
74
|
|
|
76
75
|
<img align="left" width="90" height="90" title="sun" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/test/stack.svg#sun-alpha">
|
|
77
76
|
|
|
78
|
-
```
|
|
77
|
+
```xml
|
|
79
78
|
<svg id="sun" viewBox="0 0 24 24">
|
|
80
79
|
<!-- Inner code of sun icon -->
|
|
81
80
|
</svg>
|
|
@@ -83,7 +82,7 @@ This can be done much easier. In general, the stack is arranged almost like a sy
|
|
|
83
82
|
|
|
84
83
|
<img align="left" width="90" height="90" title="heart" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/test/stack.svg#heart-red">
|
|
85
84
|
|
|
86
|
-
```
|
|
85
|
+
```xml
|
|
87
86
|
<svg id="heart" viewBox="0 0 24 24">
|
|
88
87
|
<!-- Inner code of heart icon -->
|
|
89
88
|
</svg>
|
|
@@ -91,13 +90,13 @@ This can be done much easier. In general, the stack is arranged almost like a sy
|
|
|
91
90
|
|
|
92
91
|
<img align="left" width="90" height="90" title="thumbup" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/test/stack.svg#thumbup-alpha">
|
|
93
92
|
|
|
94
|
-
```
|
|
93
|
+
```xml
|
|
95
94
|
<svg id="thumbup" viewBox="0 0 24 24">
|
|
96
95
|
<!-- Inner code of thumbup icon -->
|
|
97
96
|
</svg>
|
|
98
97
|
```
|
|
99
98
|
|
|
100
|
-
```
|
|
99
|
+
```xml
|
|
101
100
|
</svg>
|
|
102
101
|
```
|
|
103
102
|
|
|
@@ -141,7 +140,7 @@ And now the icons from the external sprite are available in the styles <img widt
|
|
|
141
140
|
```
|
|
142
141
|
|
|
143
142
|
> ⚠️ Note:
|
|
144
|
-
>
|
|
143
|
+
> We still need the [autoprefixer](https://github.com/postcss/autoprefixer) for the mask property.
|
|
145
144
|
|
|
146
145
|
For an icon inserted via `mask`, simply change the `background`. Moreover, unlike `use`, you can draw anything in the background under the mask, for example, a gradient.
|
|
147
146
|
|
package/index.js
CHANGED
|
@@ -20,7 +20,7 @@ export function stacksvg ({ output = `stack.svg`, separator = `_`, spacer = `-`
|
|
|
20
20
|
let isEmpty = true
|
|
21
21
|
const ids = {}
|
|
22
22
|
const namespaces = {}
|
|
23
|
-
const stack = parse(
|
|
23
|
+
const stack = parse(`<svg xmlns="http://www.w3.org/2000/svg"><style>:root{visibility:hidden}:target{visibility:visible}</style></svg>`)
|
|
24
24
|
const rootSvg = stack.querySelector(`svg`)
|
|
25
25
|
const stream = new Transform({ objectMode: true })
|
|
26
26
|
|
|
@@ -36,9 +36,7 @@ export function stacksvg ({ output = `stack.svg`, separator = `_`, spacer = `-`
|
|
|
36
36
|
|
|
37
37
|
const icon = parse(file.contents.toString()).querySelector(`svg`)
|
|
38
38
|
|
|
39
|
-
|
|
40
|
-
isEmpty = false
|
|
41
|
-
}
|
|
39
|
+
isEmpty = false
|
|
42
40
|
|
|
43
41
|
const iconId = basename(
|
|
44
42
|
file.relative.split(sep).join(separator).replace(/\s/g, spacer),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "gulp-stacksvg",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Combine svg files into one with stack method",
|
|
6
6
|
"main": "index.js",
|
|
@@ -30,16 +30,16 @@
|
|
|
30
30
|
"homepage": "https://github.com/firefoxic/gulp-stacksvg",
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"fancy-log": "^2.0.0",
|
|
33
|
-
"node-html-parser": "^
|
|
33
|
+
"node-html-parser": "^6.1.0",
|
|
34
34
|
"plugin-error": "^2.0.0",
|
|
35
35
|
"vinyl": "^2.2.1"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"eslint": "^8.
|
|
38
|
+
"eslint": "^8.23.1",
|
|
39
39
|
"finalhandler": "^1.2.0",
|
|
40
40
|
"gulp": "^4.0.2",
|
|
41
41
|
"mocha": "^10.0.0",
|
|
42
|
-
"puppeteer": "^
|
|
42
|
+
"puppeteer": "^18.0.5",
|
|
43
43
|
"serve-static": "^1.15.0",
|
|
44
44
|
"sinon": "^14.0.0"
|
|
45
45
|
},
|