gulp-stacksvg 1.0.5 → 1.1.0
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 +11 -7
- package/index.js +2 -2
- package/package.json +7 -7
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,11 @@ 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
|
+
```
|
|
107
105
|
|
|
108
106
|
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
107
|
|
|
@@ -144,6 +142,12 @@ And now the icons from the external sprite are available in the styles <img widt
|
|
|
144
142
|
|
|
145
143
|
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.
|
|
146
144
|
|
|
145
|
+
## Useful links
|
|
146
|
+
|
|
147
|
+
- [Changelog](CHANGELOG.md)
|
|
148
|
+
- [License](LICENSE)
|
|
149
|
+
- [SVG sprites: old-school, modern, unknown, and forgotten](https://pepelsbey.dev/articles/svg-sprites/#forgotten-stacks) by [Vadim Makeev](https://mastodon.social/@pepelsbey)
|
|
150
|
+
|
|
147
151
|
[test-url]: https://github.com/firefoxic/gulp-stacksvg/actions
|
|
148
152
|
[test-image]: https://github.com/firefoxic/gulp-stacksvg/actions/workflows/test.yml/badge.svg?branch=main
|
|
149
153
|
|
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
|
|
|
@@ -34,7 +34,7 @@ export function stacksvg ({ output = `stack.svg`, separator = `_`, spacer = `-`
|
|
|
34
34
|
return cb()
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
const icon = parse(file.contents.toString()).querySelector(`svg`)
|
|
37
|
+
const icon = parse(file.contents.toString()).removeWhitespace().querySelector(`svg`)
|
|
38
38
|
|
|
39
39
|
isEmpty = false
|
|
40
40
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "gulp-stacksvg",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Combine svg files into one with stack method",
|
|
6
6
|
"main": "index.js",
|
|
@@ -30,18 +30,18 @@
|
|
|
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.
|
|
34
|
-
"plugin-error": "^2.0.
|
|
33
|
+
"node-html-parser": "^6.1.4",
|
|
34
|
+
"plugin-error": "^2.0.1",
|
|
35
35
|
"vinyl": "^3.0.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"eslint": "^8.
|
|
38
|
+
"eslint": "^8.29.0",
|
|
39
39
|
"finalhandler": "^1.2.0",
|
|
40
40
|
"gulp": "^4.0.2",
|
|
41
|
-
"mocha": "^10.
|
|
42
|
-
"puppeteer": "^19.
|
|
41
|
+
"mocha": "^10.2.0",
|
|
42
|
+
"puppeteer": "^19.4.0",
|
|
43
43
|
"serve-static": "^1.15.0",
|
|
44
|
-
"sinon": "^
|
|
44
|
+
"sinon": "^15.0.0"
|
|
45
45
|
},
|
|
46
46
|
"engines": {
|
|
47
47
|
"node": ">=16"
|