gulp-stacksvg 1.0.4 → 1.0.6
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 +7 -7
- package/index.js +1 -1
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -66,10 +66,7 @@ This can be done much easier. In general, the stack is arranged almost like a sy
|
|
|
66
66
|
```xml
|
|
67
67
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
68
68
|
|
|
69
|
-
<style>
|
|
70
|
-
:root { visibility: hidden }
|
|
71
|
-
:target { visibility: visible }
|
|
72
|
-
</style>
|
|
69
|
+
<style>:root svg:not(:target) { display: none }</style>
|
|
73
70
|
```
|
|
74
71
|
|
|
75
72
|
<img align="left" width="90" height="90" title="sun" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/test/stack.svg#sun-alpha">
|
|
@@ -100,10 +97,13 @@ This can be done much easier. In general, the stack is arranged almost like a sy
|
|
|
100
97
|
</svg>
|
|
101
98
|
```
|
|
102
99
|
|
|
103
|
-
The magic is in the stack inner style:
|
|
100
|
+
The magic is in the stack inner style, which shows only the fragment requested by the link, hiding everything else:
|
|
104
101
|
|
|
105
|
-
|
|
106
|
-
|
|
102
|
+
```css
|
|
103
|
+
:root svg:not(:target) { display: none }
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
It shows only the fragment that is requested by its link.
|
|
107
107
|
|
|
108
108
|
And now the icons from the external sprite are available in the styles <img width="16" height="16" title="heart" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/test/stack.svg#heart-red" alt="heart">
|
|
109
109
|
|
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(`<svg xmlns="http://www.w3.org/2000/svg"><style>:root
|
|
23
|
+
const stack = parse(`<svg xmlns="http://www.w3.org/2000/svg"><style>:root svg:not(:target){display:none}</style></svg>`)
|
|
24
24
|
const rootSvg = stack.querySelector(`svg`)
|
|
25
25
|
const stream = new Transform({ objectMode: true })
|
|
26
26
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "gulp-stacksvg",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Combine svg files into one with stack method",
|
|
6
6
|
"main": "index.js",
|
|
@@ -30,21 +30,21 @@
|
|
|
30
30
|
"homepage": "https://github.com/firefoxic/gulp-stacksvg",
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"fancy-log": "^2.0.0",
|
|
33
|
-
"node-html-parser": "^6.1.
|
|
33
|
+
"node-html-parser": "^6.1.1",
|
|
34
34
|
"plugin-error": "^2.0.0",
|
|
35
|
-
"vinyl": "^
|
|
35
|
+
"vinyl": "^3.0.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"eslint": "^8.
|
|
38
|
+
"eslint": "^8.26.0",
|
|
39
39
|
"finalhandler": "^1.2.0",
|
|
40
40
|
"gulp": "^4.0.2",
|
|
41
|
-
"mocha": "^10.
|
|
42
|
-
"puppeteer": "^
|
|
41
|
+
"mocha": "^10.1.0",
|
|
42
|
+
"puppeteer": "^19.2.0",
|
|
43
43
|
"serve-static": "^1.15.0",
|
|
44
|
-
"sinon": "^14.0.
|
|
44
|
+
"sinon": "^14.0.1"
|
|
45
45
|
},
|
|
46
46
|
"engines": {
|
|
47
|
-
"node": "16"
|
|
47
|
+
"node": ">=16"
|
|
48
48
|
},
|
|
49
49
|
"engineStrict": true,
|
|
50
50
|
"keywords": [
|