@tomasvn/svgstore 3.1.0 → 3.1.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.
- package/CHANGELOG.md +7 -0
- package/docs/examples/assets/gradient.svg +9 -0
- package/docs/examples/index.html +6 -0
- package/docs/examples/make.js +2 -1
- package/docs/examples/sprites.svg +10 -2
- package/package.json +1 -1
- package/readme.md +10 -2
- package/src/svgstore.js +33 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
|
2
|
+
<defs>
|
|
3
|
+
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
4
|
+
<stop offset="0%" style="stop-color:#ff7e5f; stop-opacity:1" />
|
|
5
|
+
<stop offset="100%" style="stop-color:#feb47b; stop-opacity:1" />
|
|
6
|
+
</linearGradient>
|
|
7
|
+
</defs>
|
|
8
|
+
<circle cx="50" cy="50" r="40" fill="url(#grad1)" />
|
|
9
|
+
</svg>
|
package/docs/examples/index.html
CHANGED
|
@@ -27,15 +27,21 @@
|
|
|
27
27
|
|
|
28
28
|
</head>
|
|
29
29
|
<body>
|
|
30
|
+
<p>Referencing from sprite</p>
|
|
30
31
|
<svg role="img">
|
|
31
32
|
<use href="./sprites.svg#unicorn" />
|
|
32
33
|
</svg>
|
|
33
34
|
<svg role="img">
|
|
34
35
|
<use href="./sprites.svg#rainbow" />
|
|
35
36
|
</svg>
|
|
37
|
+
<svg role="img">
|
|
38
|
+
<use href="./sprites.svg#gradient" />
|
|
39
|
+
</svg>
|
|
36
40
|
<br>
|
|
41
|
+
<p>Referencing from img element</p>
|
|
37
42
|
<img src="./sprites.svg#view-unicorn">
|
|
38
43
|
<img src="./sprites.svg#view-rainbow">
|
|
44
|
+
<br>
|
|
39
45
|
|
|
40
46
|
<p><small>Icons by <a href="http://emojione.com/">Emoji One</a></small></p>
|
|
41
47
|
|
package/docs/examples/make.js
CHANGED
|
@@ -5,6 +5,7 @@ var fs = require('fs');
|
|
|
5
5
|
|
|
6
6
|
var sprites = svgstore({ fragmentIdentifier: (id) => `view-${id}` })
|
|
7
7
|
.add('unicorn', fs.readFileSync('./assets/unicorn.svg', 'utf8'))
|
|
8
|
-
.add('rainbow', fs.readFileSync('./assets/rainbow.svg', 'utf8'))
|
|
8
|
+
.add('rainbow', fs.readFileSync('./assets/rainbow.svg', 'utf8'))
|
|
9
|
+
.add('gradient', fs.readFileSync('./assets/gradient.svg', 'utf8'));
|
|
9
10
|
|
|
10
11
|
fs.writeFileSync('./sprites.svg', sprites.toString());
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>
|
|
2
|
+
<linearGradient id="gradient__grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
3
|
+
<stop offset="0%" style="stop-color:#ff7e5f; stop-opacity:1"/>
|
|
4
|
+
<stop offset="100%" style="stop-color:#feb47b; stop-opacity:1"/>
|
|
5
|
+
</linearGradient>
|
|
6
|
+
</defs><symbol id="unicorn" viewBox="0 0 64 64">
|
|
2
7
|
<g>
|
|
3
8
|
<g>
|
|
4
9
|
<g>
|
|
@@ -102,4 +107,7 @@
|
|
|
102
107
|
c-0.14-0.08-0.281-0.156-0.425-0.229c0-0.022,0-0.044,0-0.066C37.575,38.442,32.79,33.684,26.907,33.684L26.907,33.684z"/>
|
|
103
108
|
</g>
|
|
104
109
|
</g>
|
|
105
|
-
</symbol><view id="view-rainbow" viewBox="0 64 64 64"/><use xlink:href="#rainbow" width="64" height="64" x="0" y="64"
|
|
110
|
+
</symbol><view id="view-rainbow" viewBox="0 64 64 64"/><use xlink:href="#rainbow" width="64" height="64" x="0" y="64"/><symbol id="gradient" viewBox="0 0 100 100">
|
|
111
|
+
|
|
112
|
+
<circle cx="50" cy="50" r="40" fill="url(#gradient__grad1)"/>
|
|
113
|
+
</symbol><view id="view-gradient" viewBox="0 128 100 100"/><use xlink:href="#gradient" width="100" height="100" x="0" y="128"/></svg>
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -4,9 +4,15 @@
|
|
|
4
4
|
|
|
5
5
|
Combines multiple SVG files into one using `<symbol>` elements which you may [`<use>` in your markup](https://css-tricks.com/svg-sprites-use-better-icon-fonts/). Heavily inspired by [`grunt-svgstore`](https://github.com/FWeinb/grunt-svgstore) and [`gulp-svgstore`](https://github.com/w0rm/gulp-svgstore), this is a standalone module that may be [used in any asset pipeline](#future-goals).
|
|
6
6
|
|
|
7
|
+
## NOTE
|
|
8
|
+
|
|
9
|
+
- This is only a fork of original work, it implements this [PR #33](https://github.com/svgstore/svgstore/pull/33) from original work
|
|
10
|
+
- Adds linear gradient proccessing
|
|
11
|
+
- **NOT MAINTAINED**
|
|
12
|
+
|
|
7
13
|
## Install
|
|
8
14
|
|
|
9
|
-
$ npm install --save svgstore
|
|
15
|
+
$ npm install --save @tomasvn/svgstore
|
|
10
16
|
|
|
11
17
|
## Usage
|
|
12
18
|
|
|
@@ -16,7 +22,8 @@ var fs = require('fs');
|
|
|
16
22
|
|
|
17
23
|
var sprites = svgstore()
|
|
18
24
|
.add('unicorn', fs.readFileSync('./unicorn.svg', 'utf8'))
|
|
19
|
-
.add('rainbow', fs.readFileSync('./rainbow.svg', 'utf8'))
|
|
25
|
+
.add('rainbow', fs.readFileSync('./rainbow.svg', 'utf8'))
|
|
26
|
+
.add('gradient', fs.readFileSync('./gradient.svg', 'utf8'));
|
|
20
27
|
|
|
21
28
|
fs.writeFileSync('./sprites.svg', sprites);
|
|
22
29
|
```
|
|
@@ -27,6 +34,7 @@ The resulting file may be consumed in markup as external content.
|
|
|
27
34
|
<body>
|
|
28
35
|
<svg role="img"><use xlink:href="./sprites.svg#unicorn" /></svg>
|
|
29
36
|
<svg role="img"><use xlink:href="./sprites.svg#rainbow" /></svg>
|
|
37
|
+
<svg role="img"><use xlink:href="./sprites.svg#gradient" /></svg>
|
|
30
38
|
</body>
|
|
31
39
|
```
|
|
32
40
|
|
package/src/svgstore.js
CHANGED
|
@@ -49,7 +49,39 @@ function svgstore(options) {
|
|
|
49
49
|
|
|
50
50
|
removeAttributes(childDefs, addOptions.cleanDefs);
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
var linearGradients = childDefs.find('linearGradient');
|
|
53
|
+
if (linearGradients.length) {
|
|
54
|
+
linearGradients.each(function (i, elem) {
|
|
55
|
+
var $elem = child(elem);
|
|
56
|
+
var oldId = $elem.attr('id');
|
|
57
|
+
if (!oldId) return;
|
|
58
|
+
|
|
59
|
+
var newId = id + '__' + oldId;
|
|
60
|
+
$elem.attr('id', newId);
|
|
61
|
+
|
|
62
|
+
// Update references in fill, stroke, filter, style attributes
|
|
63
|
+
child('[fill], [stroke], [filter], [style]').each(function (
|
|
64
|
+
i,
|
|
65
|
+
refElem
|
|
66
|
+
) {
|
|
67
|
+
var $refElem = child(refElem);
|
|
68
|
+
['fill', 'stroke', 'filter', 'style'].forEach(function (
|
|
69
|
+
attr
|
|
70
|
+
) {
|
|
71
|
+
var val = $refElem.attr(attr);
|
|
72
|
+
if (val && val.includes('url(#' + oldId + ')')) {
|
|
73
|
+
var newVal = val.replace(
|
|
74
|
+
new RegExp('url\\(#' + oldId + '\\)', 'g'),
|
|
75
|
+
'url(#' + newId + ')'
|
|
76
|
+
);
|
|
77
|
+
$refElem.attr(attr, newVal);
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
});
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* rename defs ids (existing original logic) */
|
|
53
85
|
if (addOptions.renameDefs) {
|
|
54
86
|
childDefs.children().each(function (i, _elem) {
|
|
55
87
|
var elem = child(_elem);
|