@iconify/tools 1.3.17 → 2.0.0-dev.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/.editorconfig +13 -0
- package/.eslintignore +2 -0
- package/lib/colors/attribs.d.ts +16 -0
- package/lib/colors/attribs.js +26 -0
- package/lib/colors/attribs.mjs +28 -0
- package/lib/colors/parse.d.ts +37 -0
- package/lib/colors/parse.js +261 -0
- package/lib/colors/parse.mjs +212 -0
- package/lib/css/parse.d.ts +4 -0
- package/lib/css/parse.js +23 -0
- package/lib/css/parse.mjs +20 -0
- package/lib/css/parser/error.d.ts +11 -0
- package/lib/css/parser/error.js +27 -0
- package/lib/css/parser/error.mjs +23 -0
- package/lib/css/parser/export.d.ts +5 -0
- package/lib/css/parser/export.js +69 -0
- package/lib/css/parser/export.mjs +46 -0
- package/lib/css/parser/strings.d.ts +13 -0
- package/lib/css/parser/strings.js +93 -0
- package/lib/css/parser/strings.mjs +74 -0
- package/lib/css/parser/text.d.ts +17 -0
- package/lib/css/parser/text.js +174 -0
- package/lib/css/parser/text.mjs +133 -0
- package/lib/css/parser/tokens.d.ts +6 -0
- package/lib/css/parser/tokens.js +200 -0
- package/lib/css/parser/tokens.mjs +186 -0
- package/lib/css/parser/tree.d.ts +5 -0
- package/lib/css/parser/tree.js +44 -0
- package/lib/css/parser/tree.mjs +40 -0
- package/lib/css/parser/types.d.ts +51 -0
- package/lib/css/parser/types.js +2 -0
- package/lib/css/parser/types.mjs +0 -0
- package/lib/icon-set/index.d.ts +134 -0
- package/lib/icon-set/index.js +776 -0
- package/lib/icon-set/index.mjs +617 -0
- package/lib/icon-set/match.d.ts +6 -0
- package/lib/icon-set/match.js +66 -0
- package/lib/icon-set/match.mjs +55 -0
- package/lib/icon-set/merge.d.ts +5 -0
- package/lib/icon-set/merge.js +91 -0
- package/lib/icon-set/merge.mjs +75 -0
- package/lib/icon-set/props.d.ts +10 -0
- package/lib/icon-set/props.js +33 -0
- package/lib/icon-set/props.mjs +25 -0
- package/lib/icon-set/types.d.ts +68 -0
- package/lib/icon-set/types.js +2 -0
- package/lib/icon-set/types.mjs +0 -0
- package/lib/import/directory.d.ts +35 -0
- package/lib/import/directory.js +59 -0
- package/lib/import/directory.mjs +47 -0
- package/lib/misc/keyword.d.ts +4 -0
- package/lib/misc/keyword.js +31 -0
- package/lib/misc/keyword.mjs +17 -0
- package/lib/misc/scan.d.ts +24 -0
- package/lib/misc/scan.js +48 -0
- package/lib/misc/scan.mjs +43 -0
- package/lib/optimise/flags.d.ts +5 -0
- package/lib/optimise/flags.js +303 -0
- package/lib/optimise/flags.mjs +241 -0
- package/lib/optimise/scale.d.ts +5 -0
- package/lib/optimise/scale.js +42 -0
- package/lib/optimise/scale.mjs +22 -0
- package/lib/optimise/svgo.d.ts +27 -0
- package/lib/optimise/svgo.js +88 -0
- package/lib/optimise/svgo.mjs +75 -0
- package/lib/svg/cleanup/attribs.d.ts +5 -0
- package/lib/svg/cleanup/attribs.js +43 -0
- package/lib/svg/cleanup/attribs.mjs +36 -0
- package/lib/svg/cleanup/bad-tags.d.ts +5 -0
- package/lib/svg/cleanup/bad-tags.js +69 -0
- package/lib/svg/cleanup/bad-tags.mjs +68 -0
- package/lib/svg/cleanup/inline-style.d.ts +5 -0
- package/lib/svg/cleanup/inline-style.js +77 -0
- package/lib/svg/cleanup/inline-style.mjs +65 -0
- package/lib/svg/cleanup/root-svg.d.ts +5 -0
- package/lib/svg/cleanup/root-svg.js +106 -0
- package/lib/svg/cleanup/root-svg.mjs +88 -0
- package/lib/svg/cleanup/svgo-style.d.ts +5 -0
- package/lib/svg/cleanup/svgo-style.js +35 -0
- package/lib/svg/cleanup/svgo-style.mjs +29 -0
- package/lib/svg/cleanup.d.ts +5 -0
- package/lib/svg/cleanup.js +24 -0
- package/lib/svg/cleanup.mjs +16 -0
- package/lib/svg/data/attributes.d.ts +71 -0
- package/lib/svg/data/attributes.js +403 -0
- package/lib/svg/data/attributes.mjs +352 -0
- package/lib/svg/data/tags.d.ts +89 -0
- package/lib/svg/data/tags.js +185 -0
- package/lib/svg/data/tags.mjs +136 -0
- package/lib/svg/index.d.ts +33 -0
- package/lib/svg/index.js +122 -0
- package/lib/svg/index.mjs +85 -0
- package/lib/svg/parse-style.d.ts +40 -0
- package/lib/svg/parse-style.js +131 -0
- package/lib/svg/parse-style.mjs +109 -0
- package/lib/svg/parse.d.ts +30 -0
- package/lib/svg/parse.js +49 -0
- package/lib/svg/parse.mjs +40 -0
- package/package.json +167 -13
- package/README.md +0 -576
- package/license.txt +0 -21
- package/sample/parse.js +0 -74
- package/sample/source/icon-close.svg +0 -15
- package/sample/source/icon-confirm.svg +0 -14
- package/sample/source/icon-search.svg +0 -16
- package/src/collection.js +0 -641
- package/src/colors/change_palette.js +0 -227
- package/src/colors/get_palette.js +0 -143
- package/src/colors/opacify.js +0 -195
- package/src/export/component.js +0 -482
- package/src/export/dir.js +0 -109
- package/src/export/json.js +0 -329
- package/src/export/phantomjs.js +0 -76
- package/src/export/phantomjs_script.js +0 -125
- package/src/export/png.js +0 -193
- package/src/export/svg.js +0 -55
- package/src/export/templates/component.md +0 -79
- package/src/export/templates/info.md +0 -3
- package/src/export/templates/sample-react-1.md +0 -21
- package/src/export/templates/sample-react-2.md +0 -15
- package/src/export/templates/sample-react.md +0 -11
- package/src/export/templates/sample-svelte.md +0 -11
- package/src/export/templates/sample-svelte1.md +0 -22
- package/src/export/templates/sample-svelte2.md +0 -13
- package/src/export/templates/sample-vue-0.md +0 -30
- package/src/export/templates/sample-vue-1.md +0 -25
- package/src/export/templates/sample-vue-2.md +0 -27
- package/src/export/templates/sample-vue.md +0 -28
- package/src/helpers.js +0 -43
- package/src/import/dir.js +0 -234
- package/src/import/font.js +0 -402
- package/src/import/json.js +0 -200
- package/src/import/svg.js +0 -60
- package/src/import/web_icons.js +0 -248
- package/src/modules.js +0 -50
- package/src/optimize/crop.js +0 -554
- package/src/optimize/crop_script.js +0 -525
- package/src/optimize/flags.js +0 -430
- package/src/optimize/scale.js +0 -72
- package/src/optimize/svgo.js +0 -161
- package/src/optimize/tags.js +0 -522
- package/src/shapes/convert.js +0 -264
- package/src/shapes/index.js +0 -135
- package/src/shapes/length.js +0 -707
- package/src/shapes/length_script.js +0 -105
- package/src/shapes/options.js +0 -60
- package/src/svg.js +0 -162
|
@@ -1,227 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This file is part of the @iconify/tools package.
|
|
3
|
-
*
|
|
4
|
-
* (c) Vjacheslav Trushkin <cyberalien@gmail.com>
|
|
5
|
-
*
|
|
6
|
-
* For the full copyright and license information, please view the LICENSE
|
|
7
|
-
* file that was distributed with this source code.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
'use strict';
|
|
11
|
-
|
|
12
|
-
const cheerio = require('cheerio');
|
|
13
|
-
const Color = require('cyberalien-color');
|
|
14
|
-
const Tokenizer = require('simple-tokenizer');
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Change palette
|
|
18
|
-
*
|
|
19
|
-
* Must run SVGO optimization before running this script!
|
|
20
|
-
*
|
|
21
|
-
* @param {SVG} svg SVG object
|
|
22
|
-
* @param {string|object} palette
|
|
23
|
-
* @return {Promise}
|
|
24
|
-
*/
|
|
25
|
-
module.exports = (svg, palette) => {
|
|
26
|
-
return new Promise((fulfill, reject) => {
|
|
27
|
-
let $root = svg.$svg(':root'),
|
|
28
|
-
addColor =
|
|
29
|
-
typeof palette === 'string'
|
|
30
|
-
? palette
|
|
31
|
-
: palette.add === void 0
|
|
32
|
-
? false
|
|
33
|
-
: palette.add;
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* Check if value equals 'none'
|
|
37
|
-
*
|
|
38
|
-
* @param {string} value
|
|
39
|
-
* @returns {boolean}
|
|
40
|
-
*/
|
|
41
|
-
function isNone(value) {
|
|
42
|
-
return value.toLowerCase().trim() === 'none';
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* Parse style
|
|
47
|
-
*
|
|
48
|
-
* @param {string} style
|
|
49
|
-
* @returns {string}
|
|
50
|
-
*/
|
|
51
|
-
function parseStyle(style) {
|
|
52
|
-
if (typeof style !== 'string') {
|
|
53
|
-
return '';
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
let tokens = new Tokenizer({
|
|
57
|
-
splitRules: true,
|
|
58
|
-
}).tokenize(style);
|
|
59
|
-
|
|
60
|
-
tokens.forEach(token => {
|
|
61
|
-
if (token.token === 'rule') {
|
|
62
|
-
let key = token.key.toLowerCase();
|
|
63
|
-
switch (key) {
|
|
64
|
-
case 'stop-color':
|
|
65
|
-
case 'fill':
|
|
66
|
-
case 'stroke':
|
|
67
|
-
let color = Color.fromString(token.value);
|
|
68
|
-
if (color === null) {
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
if (typeof palette === 'string') {
|
|
72
|
-
token.value = palette;
|
|
73
|
-
} else {
|
|
74
|
-
let colorKey = token.value,
|
|
75
|
-
callbackColor = null;
|
|
76
|
-
|
|
77
|
-
if (palette[colorKey] === void 0) {
|
|
78
|
-
colorKey = color.toString({ compress: true });
|
|
79
|
-
if (palette[colorKey] === void 0) {
|
|
80
|
-
// Make sure actual color is used in callback
|
|
81
|
-
callbackColor = colorKey;
|
|
82
|
-
colorKey = 'default';
|
|
83
|
-
if (palette[colorKey] === void 0) {
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
let newColor = palette[colorKey];
|
|
90
|
-
if (typeof newColor === 'function') {
|
|
91
|
-
// Get color from callback('css', color, token, key)
|
|
92
|
-
newColor = newColor(
|
|
93
|
-
'css',
|
|
94
|
-
callbackColor === null ? colorKey : callbackColor,
|
|
95
|
-
token,
|
|
96
|
-
key
|
|
97
|
-
);
|
|
98
|
-
}
|
|
99
|
-
if (typeof newColor === 'string') {
|
|
100
|
-
token.value = palette[colorKey];
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
break;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
|
|
108
|
-
return Tokenizer.build(tokens, { minify: true });
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
/**
|
|
112
|
-
* Check child elements of tag
|
|
113
|
-
*
|
|
114
|
-
* @param {object} $tag
|
|
115
|
-
* @param {object} params
|
|
116
|
-
*/
|
|
117
|
-
function parseChildElements($tag, params) {
|
|
118
|
-
$tag.children().each((index, child) => {
|
|
119
|
-
let $child = cheerio(child),
|
|
120
|
-
shape = false;
|
|
121
|
-
|
|
122
|
-
//noinspection FallThroughInSwitchStatementJS
|
|
123
|
-
switch (child.tagName) {
|
|
124
|
-
case 'mask': // mask
|
|
125
|
-
case 'clipPath': // clip path
|
|
126
|
-
case 'defs': // definitions
|
|
127
|
-
case 'filter': // filters
|
|
128
|
-
return;
|
|
129
|
-
|
|
130
|
-
case 'style':
|
|
131
|
-
$child.text(parseStyle($child.text()));
|
|
132
|
-
return;
|
|
133
|
-
|
|
134
|
-
case 'path':
|
|
135
|
-
case 'circle':
|
|
136
|
-
case 'line':
|
|
137
|
-
case 'polygon':
|
|
138
|
-
case 'polyline':
|
|
139
|
-
case 'rect':
|
|
140
|
-
case 'ellipse':
|
|
141
|
-
shape = true;
|
|
142
|
-
|
|
143
|
-
default:
|
|
144
|
-
let attributes = params;
|
|
145
|
-
if (shape || Object.keys(child.attribs).length) {
|
|
146
|
-
let props = child.attribs;
|
|
147
|
-
|
|
148
|
-
// Mix values with parent values
|
|
149
|
-
attributes = Object.assign(Object.create(null), params);
|
|
150
|
-
|
|
151
|
-
// Check for fill and stroke
|
|
152
|
-
['fill', 'stroke'].forEach(attr => {
|
|
153
|
-
if (props[attr] !== void 0) {
|
|
154
|
-
// Node has fill or stroke - check value
|
|
155
|
-
if (isNone(props[attr])) {
|
|
156
|
-
// Color is set to "none" - ignore node
|
|
157
|
-
attributes[attr] = false;
|
|
158
|
-
return;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
// Change color
|
|
162
|
-
if (typeof palette !== 'string') {
|
|
163
|
-
let colorKey = props[attr],
|
|
164
|
-
callbackColor = null;
|
|
165
|
-
if (palette[colorKey] === void 0) {
|
|
166
|
-
let color = Color.fromString(props[attr]);
|
|
167
|
-
if (color !== null) {
|
|
168
|
-
colorKey = color.toString({ compress: true });
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
if (
|
|
172
|
-
palette[colorKey] === void 0 &&
|
|
173
|
-
palette.default !== void 0
|
|
174
|
-
) {
|
|
175
|
-
// Send actual color instead of 'default' to callback
|
|
176
|
-
callbackColor = colorKey;
|
|
177
|
-
colorKey = 'default';
|
|
178
|
-
}
|
|
179
|
-
if (palette[colorKey] !== void 0) {
|
|
180
|
-
let newColor = palette[colorKey];
|
|
181
|
-
// Call callback('node', color, $node, attr) to get new color
|
|
182
|
-
if (typeof newColor === 'function') {
|
|
183
|
-
newColor = newColor(
|
|
184
|
-
'node',
|
|
185
|
-
callbackColor === null ? colorKey : callbackColor,
|
|
186
|
-
$child,
|
|
187
|
-
attr
|
|
188
|
-
);
|
|
189
|
-
}
|
|
190
|
-
if (typeof newColor === 'string') {
|
|
191
|
-
$child.attr(attr, newColor);
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
if (props[attr] !== void 0) {
|
|
197
|
-
attributes[attr] = props[attr];
|
|
198
|
-
}
|
|
199
|
-
} else if (shape && attributes[attr] === true) {
|
|
200
|
-
// Shape that supposed to have color, but it is not set. Set default value
|
|
201
|
-
|
|
202
|
-
// Get color value from callback('add', $node)
|
|
203
|
-
let color =
|
|
204
|
-
typeof addColor === 'function'
|
|
205
|
-
? addColor('add', $child)
|
|
206
|
-
: addColor;
|
|
207
|
-
if (typeof color === 'string') {
|
|
208
|
-
$child.attr(attr, color);
|
|
209
|
-
attributes[attr] = color;
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
});
|
|
213
|
-
}
|
|
214
|
-
parseChildElements($child, attributes);
|
|
215
|
-
}
|
|
216
|
-
});
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
// Do stuff
|
|
220
|
-
parseChildElements($root, {
|
|
221
|
-
fill: true,
|
|
222
|
-
stroke: false,
|
|
223
|
-
});
|
|
224
|
-
|
|
225
|
-
fulfill(svg);
|
|
226
|
-
});
|
|
227
|
-
};
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This file is part of the @iconify/tools package.
|
|
3
|
-
*
|
|
4
|
-
* (c) Vjacheslav Trushkin <cyberalien@gmail.com>
|
|
5
|
-
*
|
|
6
|
-
* For the full copyright and license information, please view the LICENSE
|
|
7
|
-
* file that was distributed with this source code.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
'use strict';
|
|
11
|
-
|
|
12
|
-
const cheerio = require('cheerio');
|
|
13
|
-
const Color = require('cyberalien-color');
|
|
14
|
-
const Tokenizer = require('simple-tokenizer');
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Get colors used in SVG image
|
|
18
|
-
*
|
|
19
|
-
* Must run SVGO optimization before running this script!
|
|
20
|
-
*
|
|
21
|
-
* @param {SVG} svg SVG object
|
|
22
|
-
* @return {Promise}
|
|
23
|
-
*/
|
|
24
|
-
module.exports = svg => {
|
|
25
|
-
return new Promise((fulfill, reject) => {
|
|
26
|
-
let $root = svg.$svg(':root'),
|
|
27
|
-
colors = [],
|
|
28
|
-
notices = [];
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* Add color to palette
|
|
32
|
-
*
|
|
33
|
-
* @param {string} value
|
|
34
|
-
*/
|
|
35
|
-
function addColor(value) {
|
|
36
|
-
let clr = Color.fromString(value);
|
|
37
|
-
if (clr === null) {
|
|
38
|
-
// Keywords
|
|
39
|
-
switch (value.toLowerCase()) {
|
|
40
|
-
case 'currentcolor':
|
|
41
|
-
value = 'currentColor';
|
|
42
|
-
break;
|
|
43
|
-
|
|
44
|
-
default:
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
} else {
|
|
48
|
-
value = clr.toString({ compress: true });
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
// Add to list of colors
|
|
52
|
-
if (colors.indexOf(value) === -1) {
|
|
53
|
-
colors.push(value);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* Check style
|
|
59
|
-
*
|
|
60
|
-
* @param {string} code
|
|
61
|
-
*/
|
|
62
|
-
function scanStyle(code) {
|
|
63
|
-
notices.push('Style attribute found');
|
|
64
|
-
|
|
65
|
-
let tokens = new Tokenizer({
|
|
66
|
-
splitRules: true,
|
|
67
|
-
}).tokenize(code);
|
|
68
|
-
|
|
69
|
-
tokens.forEach(token => {
|
|
70
|
-
if (token.token === 'rule') {
|
|
71
|
-
let key = token.key.toLowerCase();
|
|
72
|
-
switch (key) {
|
|
73
|
-
case 'stop-color':
|
|
74
|
-
case 'fill':
|
|
75
|
-
case 'stroke':
|
|
76
|
-
addColor(token.value);
|
|
77
|
-
break;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/**
|
|
84
|
-
* Check shape
|
|
85
|
-
*
|
|
86
|
-
* @param {object} $tag
|
|
87
|
-
* @param {object} tag
|
|
88
|
-
*/
|
|
89
|
-
function scanElement($tag, tag) {
|
|
90
|
-
// Check attributes
|
|
91
|
-
if (tag.attribs) {
|
|
92
|
-
Object.keys(tag.attribs).forEach(attr => {
|
|
93
|
-
let value = tag.attribs[attr];
|
|
94
|
-
|
|
95
|
-
switch (attr) {
|
|
96
|
-
case 'stop-color':
|
|
97
|
-
case 'fill':
|
|
98
|
-
case 'stroke':
|
|
99
|
-
addColor(value);
|
|
100
|
-
break;
|
|
101
|
-
|
|
102
|
-
case 'style':
|
|
103
|
-
scanStyle(value);
|
|
104
|
-
break;
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
scanChildElements($tag);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
/**
|
|
113
|
-
* Check child elements of tag
|
|
114
|
-
*
|
|
115
|
-
* @param {object} $tag
|
|
116
|
-
*/
|
|
117
|
-
function scanChildElements($tag) {
|
|
118
|
-
$tag.children().each((index, child) => {
|
|
119
|
-
let $child = cheerio(child);
|
|
120
|
-
|
|
121
|
-
switch (child.tagName) {
|
|
122
|
-
case 'mask': // do not scan colors inside mask
|
|
123
|
-
case 'clipPath': // do not scan colors inside clip path
|
|
124
|
-
return;
|
|
125
|
-
|
|
126
|
-
case 'style':
|
|
127
|
-
scanStyle($child.text());
|
|
128
|
-
return;
|
|
129
|
-
|
|
130
|
-
default:
|
|
131
|
-
scanElement($child, child);
|
|
132
|
-
}
|
|
133
|
-
});
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
scanChildElements($root);
|
|
137
|
-
|
|
138
|
-
fulfill({
|
|
139
|
-
colors: colors,
|
|
140
|
-
notices: notices,
|
|
141
|
-
});
|
|
142
|
-
});
|
|
143
|
-
};
|
package/src/colors/opacify.js
DELETED
|
@@ -1,195 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This file is part of the @iconify/tools package.
|
|
3
|
-
*
|
|
4
|
-
* (c) Vjacheslav Trushkin <cyberalien@gmail.com>
|
|
5
|
-
*
|
|
6
|
-
* For the full copyright and license information, please view the LICENSE
|
|
7
|
-
* file that was distributed with this source code.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
'use strict';
|
|
11
|
-
|
|
12
|
-
const cheerio = require('cheerio');
|
|
13
|
-
const Color = require('cyberalien-color');
|
|
14
|
-
const Tokenizer = require('simple-tokenizer');
|
|
15
|
-
|
|
16
|
-
const defaultCallback = (color, defaultColor) => {
|
|
17
|
-
let obj = Color.fromString(color);
|
|
18
|
-
if (obj === null) {
|
|
19
|
-
return {
|
|
20
|
-
color: color,
|
|
21
|
-
opacity: 1,
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
let lightness = obj.getLightness(),
|
|
26
|
-
opacity = Math.round(100 - lightness) / 100;
|
|
27
|
-
|
|
28
|
-
return {
|
|
29
|
-
color: defaultColor,
|
|
30
|
-
opacity: opacity,
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* Change colors to opacity
|
|
36
|
-
*
|
|
37
|
-
* Must run SVGO optimization before running this script!
|
|
38
|
-
*
|
|
39
|
-
* @param {SVG} svg SVG object
|
|
40
|
-
* @param {string|function} setColor:
|
|
41
|
-
* If string, color will be changed to value, opacity will be set to color lightness (black = 1, white = 0)
|
|
42
|
-
* If callback, callback takes color as argument and should return object: {color: color string, opacity: opacity number}
|
|
43
|
-
* @return {Promise}
|
|
44
|
-
*/
|
|
45
|
-
module.exports = (svg, setColor) => {
|
|
46
|
-
return new Promise((fulfill, reject) => {
|
|
47
|
-
let $root = svg.$svg(':root');
|
|
48
|
-
|
|
49
|
-
if (typeof setColor !== 'function') {
|
|
50
|
-
let defaultColor = typeof setColor === 'string' ? setColor : '#000';
|
|
51
|
-
setColor = color => defaultCallback(color, defaultColor);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* Check if value equals 'none'
|
|
56
|
-
*
|
|
57
|
-
* @param {string} value
|
|
58
|
-
* @returns {boolean}
|
|
59
|
-
*/
|
|
60
|
-
function isNone(value) {
|
|
61
|
-
return value.toLowerCase().trim() === 'none';
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/**
|
|
65
|
-
* Parse style
|
|
66
|
-
*
|
|
67
|
-
* @param {string} style
|
|
68
|
-
* @returns {string}
|
|
69
|
-
*/
|
|
70
|
-
function parseStyle(style) {
|
|
71
|
-
if (typeof style !== 'string') {
|
|
72
|
-
return '';
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
let oldTokens = new Tokenizer({
|
|
76
|
-
splitRules: true,
|
|
77
|
-
}).tokenize(style),
|
|
78
|
-
newTokens = [],
|
|
79
|
-
opacity = null;
|
|
80
|
-
|
|
81
|
-
oldTokens.forEach(token => {
|
|
82
|
-
if (token.token === 'rule') {
|
|
83
|
-
let key = token.key.toLowerCase();
|
|
84
|
-
switch (key) {
|
|
85
|
-
case 'fill':
|
|
86
|
-
case 'stroke':
|
|
87
|
-
if (isNone(token.value)) {
|
|
88
|
-
newTokens.push(token);
|
|
89
|
-
return;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
let changes = setColor(token.value);
|
|
93
|
-
|
|
94
|
-
// Change color
|
|
95
|
-
token.value = changes.color;
|
|
96
|
-
newTokens.push(token);
|
|
97
|
-
|
|
98
|
-
// Save opacity
|
|
99
|
-
if (!opacity) {
|
|
100
|
-
opacity = {};
|
|
101
|
-
}
|
|
102
|
-
opacity[key] =
|
|
103
|
-
opacity[key] === void 0
|
|
104
|
-
? changes.opacity
|
|
105
|
-
: changes.opacity * opacity[key];
|
|
106
|
-
break;
|
|
107
|
-
|
|
108
|
-
case 'fill-opacity':
|
|
109
|
-
case 'stroke-opacity':
|
|
110
|
-
key = key.split('-').shift();
|
|
111
|
-
|
|
112
|
-
// Save opacity
|
|
113
|
-
if (!opacity) {
|
|
114
|
-
opacity = {};
|
|
115
|
-
}
|
|
116
|
-
opacity[key] =
|
|
117
|
-
opacity[key] === void 0
|
|
118
|
-
? token.value
|
|
119
|
-
: token.value * opacity[key];
|
|
120
|
-
break;
|
|
121
|
-
}
|
|
122
|
-
} else {
|
|
123
|
-
if (opacity !== null) {
|
|
124
|
-
Object.keys(opacity).forEach(key => {
|
|
125
|
-
newTokens.push({
|
|
126
|
-
token: 'rule',
|
|
127
|
-
key: key + '-opacity',
|
|
128
|
-
value: opacity[key],
|
|
129
|
-
});
|
|
130
|
-
});
|
|
131
|
-
}
|
|
132
|
-
newTokens.push(token);
|
|
133
|
-
opacity = null;
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
|
|
137
|
-
return Tokenizer.build(newTokens, { minify: true });
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
/**
|
|
141
|
-
* Check child elements of tag
|
|
142
|
-
*
|
|
143
|
-
* @param {object} $tag
|
|
144
|
-
*/
|
|
145
|
-
function parseChildElements($tag) {
|
|
146
|
-
$tag.children().each((index, child) => {
|
|
147
|
-
let $child = cheerio(child);
|
|
148
|
-
|
|
149
|
-
switch (child.tagName) {
|
|
150
|
-
case 'style':
|
|
151
|
-
$child.text(parseStyle($child.text()));
|
|
152
|
-
return;
|
|
153
|
-
|
|
154
|
-
default:
|
|
155
|
-
if (Object.keys(child.attribs).length) {
|
|
156
|
-
let props = child.attribs;
|
|
157
|
-
|
|
158
|
-
// Check for fill and stroke
|
|
159
|
-
['fill', 'stroke'].forEach(attr => {
|
|
160
|
-
if (props[attr] !== void 0) {
|
|
161
|
-
if (isNone(props[attr])) {
|
|
162
|
-
return;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
// Change color
|
|
166
|
-
let changes = setColor(props[attr]);
|
|
167
|
-
if (!changes) {
|
|
168
|
-
return;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
$child.attr(attr, changes.color);
|
|
172
|
-
if (changes.opacity < 1) {
|
|
173
|
-
let opacity =
|
|
174
|
-
props[attr + '-opacity'] === void 0
|
|
175
|
-
? 1
|
|
176
|
-
: parseInt(props[attr + '-opacity']);
|
|
177
|
-
$child.attr(
|
|
178
|
-
attr + '-opacity',
|
|
179
|
-
changes.opacity * (isNaN(opacity) ? 1 : opacity)
|
|
180
|
-
);
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
});
|
|
184
|
-
}
|
|
185
|
-
parseChildElements($child);
|
|
186
|
-
}
|
|
187
|
-
});
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
// Do stuff
|
|
191
|
-
parseChildElements($root);
|
|
192
|
-
|
|
193
|
-
fulfill(svg);
|
|
194
|
-
});
|
|
195
|
-
};
|