@esri/calcite-ui-icons 4.3.0-next.4 → 4.3.0-next.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/docs/icons.json +1 -1
- package/docs/keywords.json +74 -96
- package/icons/arc-segment-16.svg +1 -1
- package/icons/arc-segment-24.svg +1 -1
- package/icons/arc-segment-32.svg +1 -1
- package/icons/arrow-curve-tool-16.svg +1 -1
- package/icons/arrow-curve-tool-24.svg +1 -1
- package/icons/arrow-curve-tool-32.svg +1 -1
- package/icons/bezier-curve-16.svg +1 -1
- package/icons/bezier-curve-24.svg +1 -1
- package/icons/bezier-curve-32.svg +1 -1
- package/icons/end-point-arc-segment-16.svg +1 -1
- package/icons/end-point-arc-segment-24.svg +1 -1
- package/icons/end-point-arc-segment-32.svg +1 -1
- package/icons/tangent-curve-16.svg +1 -1
- package/icons/tangent-curve-24.svg +1 -1
- package/icons/tangent-curve-32.svg +1 -1
- package/lib/spriter/cli.js +21 -22
- package/lib/spriter/index.js +97 -94
- package/package.json +2 -2
package/lib/spriter/cli.js
CHANGED
|
@@ -1,41 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
import spriter from "./index.js";
|
|
2
3
|
import { readFileSync } from "node:fs";
|
|
3
|
-
"use strict";
|
|
4
4
|
const args = process.argv.slice(2); // skip runtime & script args
|
|
5
5
|
function hasArg(name, shorthand) {
|
|
6
|
-
|
|
6
|
+
return getArgIndex(name, shorthand) > -1;
|
|
7
7
|
}
|
|
8
8
|
function getArgIndex(name, shorthand) {
|
|
9
|
-
|
|
9
|
+
return args.findIndex((arg) => arg === `--${name}` || arg === `-${shorthand}`);
|
|
10
10
|
}
|
|
11
11
|
function getArg(name, shorthand) {
|
|
12
|
-
|
|
12
|
+
return args[getArgIndex(name, shorthand) + 1];
|
|
13
13
|
}
|
|
14
14
|
if (hasArg("help", "h")) {
|
|
15
|
-
|
|
15
|
+
process.stdout.write(`
|
|
16
16
|
--input, -i path to configuration file
|
|
17
17
|
--output, -o output location for generated SVG sprite
|
|
18
18
|
--help, -h display this help message
|
|
19
19
|
`);
|
|
20
|
-
|
|
20
|
+
process.exit(0);
|
|
21
21
|
}
|
|
22
22
|
function getConfig() {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
process.exit(1);
|
|
32
|
-
}
|
|
23
|
+
let input = getArg("input", "i");
|
|
24
|
+
if (input) {
|
|
25
|
+
try {
|
|
26
|
+
const configFileContents = readFileSync(input);
|
|
27
|
+
input = JSON.parse(configFileContents).input;
|
|
28
|
+
} catch (error) {
|
|
29
|
+
process.stderr.write(`config - could not read input: ${error}`);
|
|
30
|
+
process.exit(1);
|
|
33
31
|
}
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
}
|
|
33
|
+
const output = getArg("output", "o");
|
|
34
|
+
return { input, output };
|
|
36
35
|
}
|
|
37
36
|
spriter(getConfig())
|
|
38
|
-
|
|
37
|
+
.then((summary) => {
|
|
39
38
|
const { ellapsed, spritesheets } = summary;
|
|
40
39
|
process.stdout.write(`Success!
|
|
41
40
|
|
|
@@ -45,8 +44,8 @@ ${spritesheets.map((spritesheet) => `* ${spritesheet.output} (${spritesheet.icon
|
|
|
45
44
|
|
|
46
45
|
`);
|
|
47
46
|
process.exit(0);
|
|
48
|
-
})
|
|
49
|
-
|
|
47
|
+
})
|
|
48
|
+
.catch((err) => {
|
|
50
49
|
process.stderr.write(`Fail! ${err}`);
|
|
51
50
|
process.exit(1);
|
|
52
|
-
});
|
|
51
|
+
});
|
package/lib/spriter/index.js
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
import fsExtra from "fs-extra";
|
|
2
3
|
import path from "node:path";
|
|
3
|
-
|
|
4
|
-
const { readdir, mkdir, writeFile, readFile, lstatSync } = fsExtra;
|
|
4
|
+
const { readdir, mkdir, writeFile, readFile } = fsExtra;
|
|
5
5
|
const ICONS = path.resolve(path.dirname(process.argv[1]), "../icons");
|
|
6
6
|
const NAME = "generated";
|
|
7
7
|
const SIZES = [16, 24, 32];
|
|
8
8
|
const OUTLINE = "outline";
|
|
9
9
|
const FILL = "fill";
|
|
10
|
-
const isDir = (file) => lstatSync(`${ICONS}/${file}`).isDirectory();
|
|
11
10
|
const readSVG = (icon) => readFile(`${ICONS}/${icon.fileName}`, { encoding: "utf-8" });
|
|
12
11
|
const has = (haystack, needle) => haystack.indexOf(needle) > -1;
|
|
13
12
|
/**
|
|
@@ -79,12 +78,12 @@ const has = (haystack, needle) => haystack.indexOf(needle) > -1;
|
|
|
79
78
|
* @return {ThenPromise<T>} - Promise that resolves when directory creation is ensured.
|
|
80
79
|
*/
|
|
81
80
|
function ensureDir(dir) {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
81
|
+
return mkdir(dir).catch((error) => {
|
|
82
|
+
const triedToCreateExisting = error.code === "EEXIST";
|
|
83
|
+
if (!triedToCreateExisting) {
|
|
84
|
+
throw error;
|
|
85
|
+
}
|
|
86
|
+
});
|
|
88
87
|
}
|
|
89
88
|
/**
|
|
90
89
|
* Builds map of requested icons.
|
|
@@ -94,19 +93,19 @@ function ensureDir(dir) {
|
|
|
94
93
|
* @return {ExportInfo} - Key-value pair where keys correspond to icon size and values are @link{IconRequest[] requested icons}.
|
|
95
94
|
*/
|
|
96
95
|
function getRequestedIcons(input) {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
96
|
+
const iconsPerSize = {};
|
|
97
|
+
SIZES.forEach((size) => (iconsPerSize[size] = []));
|
|
98
|
+
input.forEach((icon) => {
|
|
99
|
+
const { name, sizes = SIZES[0], style = OUTLINE } = icon;
|
|
100
|
+
sizes
|
|
101
|
+
.filter((size) => has(SIZES, size))
|
|
102
|
+
.forEach((size) => {
|
|
103
|
+
const fillPart = style === FILL ? "-f" : "";
|
|
104
|
+
const fileName = `${name}-${size}${fillPart}.svg`;
|
|
105
|
+
iconsPerSize[size].push({ name, size, style, fileName });
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
return iconsPerSize;
|
|
110
109
|
}
|
|
111
110
|
/**
|
|
112
111
|
* Creates spritesheet export details.
|
|
@@ -116,51 +115,51 @@ function getRequestedIcons(input) {
|
|
|
116
115
|
* @return {ThenPromise<ExportInfo>} - Promise that resolves with export info.
|
|
117
116
|
*/
|
|
118
117
|
function generateExportInfo(requested) {
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
});
|
|
131
|
-
});
|
|
132
|
-
});
|
|
133
|
-
};
|
|
134
|
-
const processAll = (icons) => {
|
|
135
|
-
icons.forEach((icon) => {
|
|
136
|
-
SIZES.forEach((size) => {
|
|
137
|
-
const fileMatchesSize = icon.indexOf(`-${size}`) > -1;
|
|
138
|
-
if (!fileMatchesSize) {
|
|
139
|
-
return;
|
|
140
|
-
}
|
|
141
|
-
const parserPattern = /(.+)-\d\d(-f)?\.svg/;
|
|
142
|
-
const [, name, filled] = parserPattern.exec(icon);
|
|
143
|
-
exportInfo[size].push({
|
|
144
|
-
name,
|
|
145
|
-
style: filled ? FILL : OUTLINE,
|
|
146
|
-
size,
|
|
147
|
-
fileName: icon,
|
|
148
|
-
});
|
|
149
|
-
});
|
|
118
|
+
const processRequested = (icons) => {
|
|
119
|
+
SIZES.forEach((size) => {
|
|
120
|
+
requested[size].forEach((icon) => {
|
|
121
|
+
if (!has(icons, icon.fileName)) {
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
exportInfo[size].push({
|
|
125
|
+
name: icon.name,
|
|
126
|
+
style: icon.style,
|
|
127
|
+
size,
|
|
128
|
+
fileName: icon.fileName,
|
|
150
129
|
});
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
130
|
+
});
|
|
131
|
+
});
|
|
132
|
+
};
|
|
133
|
+
const processAll = (icons) => {
|
|
134
|
+
icons.forEach((icon) => {
|
|
135
|
+
SIZES.forEach((size) => {
|
|
136
|
+
const fileMatchesSize = icon.indexOf(`-${size}`) > -1;
|
|
137
|
+
if (!fileMatchesSize) {
|
|
138
|
+
return;
|
|
160
139
|
}
|
|
161
|
-
|
|
140
|
+
const parserPattern = /(.+)-\d\d(-f)?\.svg/;
|
|
141
|
+
const [, name, filled] = parserPattern.exec(icon);
|
|
142
|
+
exportInfo[size].push({
|
|
143
|
+
name,
|
|
144
|
+
style: filled ? FILL : OUTLINE,
|
|
145
|
+
size,
|
|
146
|
+
fileName: icon,
|
|
147
|
+
});
|
|
148
|
+
});
|
|
149
|
+
});
|
|
150
|
+
};
|
|
151
|
+
const includeAll = SIZES.every((size) => requested[size].length === 0);
|
|
152
|
+
const exportInfo = {};
|
|
153
|
+
SIZES.forEach((size) => (exportInfo[size] = []));
|
|
154
|
+
return readdir(ICONS)
|
|
155
|
+
.then((icons) => {
|
|
156
|
+
if (includeAll) {
|
|
157
|
+
processAll(icons);
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
processRequested(icons);
|
|
162
161
|
})
|
|
163
|
-
|
|
162
|
+
.then(() => exportInfo);
|
|
164
163
|
}
|
|
165
164
|
/**
|
|
166
165
|
* Converts an SVG into a Symbol element.
|
|
@@ -170,12 +169,12 @@ function generateExportInfo(requested) {
|
|
|
170
169
|
* @return {ThenPromise<string>} - Promise that resolves with symbol element text content.
|
|
171
170
|
*/
|
|
172
171
|
function svgToSymbol(icon) {
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
172
|
+
return readSVG(icon).then((svgContent) => {
|
|
173
|
+
const svgContentCapturingPattern = /^\s*<svg[^>]*>(.+)<\/svg>\s*$/;
|
|
174
|
+
const [, innerContent] = svgContentCapturingPattern.exec(svgContent);
|
|
175
|
+
const { size } = icon;
|
|
176
|
+
return `<symbol id="${icon.name}-${size}" viewbox="0 0 ${size} ${size}">${innerContent}</symbol>`;
|
|
177
|
+
});
|
|
179
178
|
}
|
|
180
179
|
/**
|
|
181
180
|
* Creates spritesheet content.
|
|
@@ -188,9 +187,9 @@ function svgToSymbol(icon) {
|
|
|
188
187
|
* @return {ThenPromise<T>} - Promise that resolves when spritesheet is created
|
|
189
188
|
*/
|
|
190
189
|
function createSpritesheet({ icons, output, size }) {
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
190
|
+
return Promise.all(icons.map(svgToSymbol))
|
|
191
|
+
.then((symbols) => `<svg xmlns="http://www.w3.org/2000/svg">${symbols.join("")}</svg>`)
|
|
192
|
+
.then((content) => writeFile(`${output}/${`${NAME}-${size}.svg`}`, content));
|
|
194
193
|
}
|
|
195
194
|
/**
|
|
196
195
|
* Creates icon spritesheet from config.
|
|
@@ -200,28 +199,32 @@ function createSpritesheet({ icons, output, size }) {
|
|
|
200
199
|
* @return {ThenPromise<ExportSummary>} - Promise that resolves with export summary.
|
|
201
200
|
*/
|
|
202
201
|
function spriter(config) {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
202
|
+
const startTime = process.hrtime();
|
|
203
|
+
const { input = [], output = "./output" } = config;
|
|
204
|
+
return ensureDir(output)
|
|
205
|
+
.then(() => generateExportInfo(getRequestedIcons(input)))
|
|
206
|
+
.then((exportInfo) =>
|
|
207
|
+
Promise.all(
|
|
208
|
+
SIZES.map((size) => {
|
|
209
|
+
const icons = exportInfo[size];
|
|
210
|
+
if (icons.length === 0) {
|
|
210
211
|
return;
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
212
|
+
}
|
|
213
|
+
return createSpritesheet({ icons, output, size });
|
|
214
|
+
}),
|
|
215
|
+
).then(() => exportInfo),
|
|
216
|
+
)
|
|
217
|
+
.then((exportInfo) => {
|
|
218
|
+
const endTime = process.hrtime(startTime);
|
|
219
|
+
const nanoToMillis = 1000000;
|
|
220
|
+
const ellapsed = endTime[1] / nanoToMillis;
|
|
221
|
+
const spritesheets = Object.keys(exportInfo).map((size) => {
|
|
222
|
+
return {
|
|
223
|
+
output: `${output}/${NAME}-${size}.svg`,
|
|
224
|
+
icons: exportInfo[size],
|
|
225
|
+
};
|
|
226
|
+
});
|
|
227
|
+
return { ellapsed, spritesheets };
|
|
225
228
|
});
|
|
226
229
|
}
|
|
227
230
|
export default spriter;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@esri/calcite-ui-icons",
|
|
3
|
-
"version": "4.3.0-next.
|
|
3
|
+
"version": "4.3.0-next.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"description": "A collection of UI SVG icons created by Esri for applications.",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
"volta": {
|
|
81
81
|
"extends": "../../package.json"
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "49ec1cba72d4cfba6ba6f01076c23945fc760b49"
|
|
84
84
|
}
|