@getkist/action-svg 1.0.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/LICENSE +21 -0
- package/README.md +329 -0
- package/dist/actions/SvgPackagerAction/SvgPackagerAction.d.ts +122 -0
- package/dist/actions/SvgPackagerAction/SvgPackagerAction.d.ts.map +1 -0
- package/dist/actions/SvgPackagerAction/SvgPackagerAction.js +167 -0
- package/dist/actions/SvgPackagerAction/SvgPackagerAction.js.map +1 -0
- package/dist/actions/SvgPackagerAction/index.d.ts +3 -0
- package/dist/actions/SvgPackagerAction/index.d.ts.map +1 -0
- package/dist/actions/SvgPackagerAction/index.js +5 -0
- package/dist/actions/SvgPackagerAction/index.js.map +1 -0
- package/dist/actions/SvgReaderAction/SvgReaderAction.d.ts +61 -0
- package/dist/actions/SvgReaderAction/SvgReaderAction.d.ts.map +1 -0
- package/dist/actions/SvgReaderAction/SvgReaderAction.js +89 -0
- package/dist/actions/SvgReaderAction/SvgReaderAction.js.map +1 -0
- package/dist/actions/SvgReaderAction/index.d.ts +3 -0
- package/dist/actions/SvgReaderAction/index.d.ts.map +1 -0
- package/dist/actions/SvgReaderAction/index.js +5 -0
- package/dist/actions/SvgReaderAction/index.js.map +1 -0
- package/dist/actions/SvgSpriteAction/SvgSpriteAction.d.ts +71 -0
- package/dist/actions/SvgSpriteAction/SvgSpriteAction.d.ts.map +1 -0
- package/dist/actions/SvgSpriteAction/SvgSpriteAction.js +199 -0
- package/dist/actions/SvgSpriteAction/SvgSpriteAction.js.map +1 -0
- package/dist/actions/SvgSpriteAction/index.d.ts +3 -0
- package/dist/actions/SvgSpriteAction/index.d.ts.map +1 -0
- package/dist/actions/SvgSpriteAction/index.js +5 -0
- package/dist/actions/SvgSpriteAction/index.js.map +1 -0
- package/dist/actions/SvgToPngAction/SvgToPngAction.d.ts +72 -0
- package/dist/actions/SvgToPngAction/SvgToPngAction.d.ts.map +1 -0
- package/dist/actions/SvgToPngAction/SvgToPngAction.js +136 -0
- package/dist/actions/SvgToPngAction/SvgToPngAction.js.map +1 -0
- package/dist/actions/SvgToPngAction/index.d.ts +3 -0
- package/dist/actions/SvgToPngAction/index.d.ts.map +1 -0
- package/dist/actions/SvgToPngAction/index.js +5 -0
- package/dist/actions/SvgToPngAction/index.js.map +1 -0
- package/dist/index.d.ts +24 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +63 -0
- package/dist/index.js.map +1 -0
- package/dist/types/Action.d.ts +70 -0
- package/dist/types/Action.d.ts.map +1 -0
- package/dist/types/Action.js +56 -0
- package/dist/types/Action.js.map +1 -0
- package/package.json +78 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 kist
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
# @getkist/action-svg
|
|
2
|
+
|
|
3
|
+
SVG processing actions for [kist](https://github.com/getkist/kist) build tool.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@getkist/action-svg)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- **SVG Sprite Generation** - Combine multiple SVG files into optimized sprite sheets
|
|
11
|
+
- **Multiple Sprite Modes** - Symbol, stack, CSS, view, and defs modes
|
|
12
|
+
- **Automatic Optimization** - Built-in SVGO integration
|
|
13
|
+
- **CSS Generation** - Automatic stylesheet generation for sprites
|
|
14
|
+
- **Highly Configurable** - Customize sprite generation with svg-sprite options
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install --save-dev @getkist/action-svg
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
### Basic Sprite Generation
|
|
25
|
+
|
|
26
|
+
Add to your `kist.yml`:
|
|
27
|
+
|
|
28
|
+
```yaml
|
|
29
|
+
pipeline:
|
|
30
|
+
stages:
|
|
31
|
+
- name: assets
|
|
32
|
+
steps:
|
|
33
|
+
- name: generate-icon-sprite
|
|
34
|
+
action: SvgSpriteAction
|
|
35
|
+
options:
|
|
36
|
+
sourceDir: ./src/icons
|
|
37
|
+
outputDir: ./dist/sprites
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Custom Configuration
|
|
41
|
+
|
|
42
|
+
```yaml
|
|
43
|
+
pipeline:
|
|
44
|
+
stages:
|
|
45
|
+
- name: assets
|
|
46
|
+
steps:
|
|
47
|
+
- name: custom-sprite
|
|
48
|
+
action: SvgSpriteAction
|
|
49
|
+
options:
|
|
50
|
+
sourceDir: ./assets/svg
|
|
51
|
+
outputDir: ./public/sprites
|
|
52
|
+
config:
|
|
53
|
+
mode:
|
|
54
|
+
symbol:
|
|
55
|
+
sprite: custom-sprite.svg
|
|
56
|
+
inline: true
|
|
57
|
+
css:
|
|
58
|
+
render:
|
|
59
|
+
css: true
|
|
60
|
+
scss: true
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Action: SvgSpriteAction
|
|
64
|
+
|
|
65
|
+
Compiles multiple SVG files into sprite sheets with various output modes.
|
|
66
|
+
|
|
67
|
+
### Options
|
|
68
|
+
|
|
69
|
+
| Option | Type | Required | Description |
|
|
70
|
+
| ----------- | ------ | -------- | ------------------------------------- |
|
|
71
|
+
| `sourceDir` | string | Yes | Directory containing source SVG files |
|
|
72
|
+
| `outputDir` | string | Yes | Directory for generated sprite files |
|
|
73
|
+
| `config` | object | No | Custom svg-sprite configuration |
|
|
74
|
+
|
|
75
|
+
### Default Configuration
|
|
76
|
+
|
|
77
|
+
```typescript
|
|
78
|
+
{
|
|
79
|
+
dest: "./dist/sprite",
|
|
80
|
+
shape: {
|
|
81
|
+
id: {
|
|
82
|
+
separator: "--",
|
|
83
|
+
generator: "icon-%s",
|
|
84
|
+
pseudo: "~"
|
|
85
|
+
},
|
|
86
|
+
dimension: {
|
|
87
|
+
maxWidth: 2000,
|
|
88
|
+
maxHeight: 2000,
|
|
89
|
+
precision: 2,
|
|
90
|
+
attributes: false
|
|
91
|
+
},
|
|
92
|
+
spacing: {
|
|
93
|
+
padding: 0,
|
|
94
|
+
box: "content"
|
|
95
|
+
},
|
|
96
|
+
transform: ["svgo"]
|
|
97
|
+
},
|
|
98
|
+
svg: {
|
|
99
|
+
xmlDeclaration: false,
|
|
100
|
+
doctypeDeclaration: true,
|
|
101
|
+
namespaceIDs: true,
|
|
102
|
+
namespaceClassnames: false,
|
|
103
|
+
dimensionAttributes: true
|
|
104
|
+
},
|
|
105
|
+
mode: {
|
|
106
|
+
css: {
|
|
107
|
+
render: {
|
|
108
|
+
css: true
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
view: true,
|
|
112
|
+
defs: true,
|
|
113
|
+
symbol: {
|
|
114
|
+
sprite: "icon.sprite.svg"
|
|
115
|
+
},
|
|
116
|
+
stack: true
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Sprite Modes
|
|
122
|
+
|
|
123
|
+
### Symbol Mode
|
|
124
|
+
|
|
125
|
+
Creates a sprite with `<symbol>` elements, ideal for inline SVG usage:
|
|
126
|
+
|
|
127
|
+
```yaml
|
|
128
|
+
config:
|
|
129
|
+
mode:
|
|
130
|
+
symbol:
|
|
131
|
+
sprite: icons.svg
|
|
132
|
+
inline: true
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Stack Mode
|
|
136
|
+
|
|
137
|
+
Creates stackable SVG sprite for CSS targeting:
|
|
138
|
+
|
|
139
|
+
```yaml
|
|
140
|
+
config:
|
|
141
|
+
mode:
|
|
142
|
+
stack:
|
|
143
|
+
sprite: stack.svg
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### CSS Mode
|
|
147
|
+
|
|
148
|
+
Generates CSS classes for background images:
|
|
149
|
+
|
|
150
|
+
```yaml
|
|
151
|
+
config:
|
|
152
|
+
mode:
|
|
153
|
+
css:
|
|
154
|
+
render:
|
|
155
|
+
css: true
|
|
156
|
+
scss: true
|
|
157
|
+
sprite: sprite.svg
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
### View Mode
|
|
161
|
+
|
|
162
|
+
Creates individual views for each icon:
|
|
163
|
+
|
|
164
|
+
```yaml
|
|
165
|
+
config:
|
|
166
|
+
mode:
|
|
167
|
+
view:
|
|
168
|
+
bust: false
|
|
169
|
+
render:
|
|
170
|
+
css: true
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
## Examples
|
|
174
|
+
|
|
175
|
+
### Multiple Sprites
|
|
176
|
+
|
|
177
|
+
Generate different sprites for different icon sets:
|
|
178
|
+
|
|
179
|
+
```yaml
|
|
180
|
+
steps:
|
|
181
|
+
- name: ui-icons
|
|
182
|
+
action: SvgSpriteAction
|
|
183
|
+
options:
|
|
184
|
+
sourceDir: ./src/icons/ui
|
|
185
|
+
outputDir: ./dist/sprites
|
|
186
|
+
config:
|
|
187
|
+
mode:
|
|
188
|
+
symbol:
|
|
189
|
+
sprite: ui-icons.svg
|
|
190
|
+
|
|
191
|
+
- name: social-icons
|
|
192
|
+
action: SvgSpriteAction
|
|
193
|
+
options:
|
|
194
|
+
sourceDir: ./src/icons/social
|
|
195
|
+
outputDir: ./dist/sprites
|
|
196
|
+
config:
|
|
197
|
+
mode:
|
|
198
|
+
symbol:
|
|
199
|
+
sprite: social-icons.svg
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
### With Custom ID Generator
|
|
203
|
+
|
|
204
|
+
```yaml
|
|
205
|
+
steps:
|
|
206
|
+
- name: custom-ids
|
|
207
|
+
action: SvgSpriteAction
|
|
208
|
+
options:
|
|
209
|
+
sourceDir: ./icons
|
|
210
|
+
outputDir: ./dist
|
|
211
|
+
config:
|
|
212
|
+
shape:
|
|
213
|
+
id:
|
|
214
|
+
generator: "custom-icon-%s"
|
|
215
|
+
separator: "__"
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
### Optimized for Production
|
|
219
|
+
|
|
220
|
+
```yaml
|
|
221
|
+
steps:
|
|
222
|
+
- name: production-sprite
|
|
223
|
+
action: SvgSpriteAction
|
|
224
|
+
options:
|
|
225
|
+
sourceDir: ./src/icons
|
|
226
|
+
outputDir: ./dist/assets
|
|
227
|
+
config:
|
|
228
|
+
shape:
|
|
229
|
+
transform:
|
|
230
|
+
- svgo:
|
|
231
|
+
multipass: true
|
|
232
|
+
plugins:
|
|
233
|
+
- removeTitle
|
|
234
|
+
- removeDesc
|
|
235
|
+
- removeViewBox: false
|
|
236
|
+
mode:
|
|
237
|
+
symbol:
|
|
238
|
+
sprite: icons.min.svg
|
|
239
|
+
inline: false
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
## Programmatic Usage
|
|
243
|
+
|
|
244
|
+
```typescript
|
|
245
|
+
import { SvgSpriteAction } from "@getkist/action-svg";
|
|
246
|
+
|
|
247
|
+
const action = new SvgSpriteAction({
|
|
248
|
+
mode: {
|
|
249
|
+
symbol: {
|
|
250
|
+
sprite: "custom.svg",
|
|
251
|
+
},
|
|
252
|
+
},
|
|
253
|
+
});
|
|
254
|
+
|
|
255
|
+
await action.execute({
|
|
256
|
+
sourceDir: "./icons",
|
|
257
|
+
outputDir: "./dist/sprites",
|
|
258
|
+
});
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
## TypeScript Support
|
|
262
|
+
|
|
263
|
+
Full TypeScript support with type definitions:
|
|
264
|
+
|
|
265
|
+
```typescript
|
|
266
|
+
import { SvgSpriteAction, SvgSpriteActionOptions } from "@getkist/action-svg";
|
|
267
|
+
|
|
268
|
+
const options: SvgSpriteActionOptions = {
|
|
269
|
+
sourceDir: "./icons",
|
|
270
|
+
outputDir: "./dist",
|
|
271
|
+
config: {
|
|
272
|
+
mode: {
|
|
273
|
+
symbol: true,
|
|
274
|
+
},
|
|
275
|
+
},
|
|
276
|
+
};
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
## Output Structure
|
|
280
|
+
|
|
281
|
+
The action generates multiple files based on configured modes:
|
|
282
|
+
|
|
283
|
+
```
|
|
284
|
+
dist/sprites/
|
|
285
|
+
├── symbol/
|
|
286
|
+
│ └── sprite.svg # Symbol sprite
|
|
287
|
+
├── stack/
|
|
288
|
+
│ └── sprite.svg # Stack sprite
|
|
289
|
+
├── css/
|
|
290
|
+
│ ├── sprite.svg # CSS sprite
|
|
291
|
+
│ └── sprite.css # Generated CSS
|
|
292
|
+
├── view/
|
|
293
|
+
│ ├── icon1.svg # Individual views
|
|
294
|
+
│ └── icon2.svg
|
|
295
|
+
└── defs/
|
|
296
|
+
└── sprite.svg # Defs sprite
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
## Requirements
|
|
300
|
+
|
|
301
|
+
- Node.js >= 18.0.0
|
|
302
|
+
- kist >= 0.1.0
|
|
303
|
+
|
|
304
|
+
## Dependencies
|
|
305
|
+
|
|
306
|
+
- `svg-sprite` - Sprite generation engine
|
|
307
|
+
- `svgo` - SVG optimization
|
|
308
|
+
- `canvas` - For PNG conversion (future)
|
|
309
|
+
- `canvg` - SVG to canvas rendering (future)
|
|
310
|
+
|
|
311
|
+
## Contributing
|
|
312
|
+
|
|
313
|
+
Contributions welcome! Please read the [contributing guidelines](CONTRIBUTING.md).
|
|
314
|
+
|
|
315
|
+
## License
|
|
316
|
+
|
|
317
|
+
MIT © kist
|
|
318
|
+
|
|
319
|
+
## Resources
|
|
320
|
+
|
|
321
|
+
- [kist Documentation](https://github.com/getkist/kist)
|
|
322
|
+
- [svg-sprite Documentation](https://github.com/svg-sprite/svg-sprite)
|
|
323
|
+
- [SVGO Documentation](https://github.com/svg/svgo)
|
|
324
|
+
- [Plugin Development Guide](https://github.com/getkist/kist/blob/main/PLUGIN_DEVELOPMENT.md)
|
|
325
|
+
|
|
326
|
+
## Support
|
|
327
|
+
|
|
328
|
+
- Issues: [GitHub Issues](https://github.com/getkist/kist-action-svg/issues)
|
|
329
|
+
- Discussions: [kist Discussions](https://github.com/getkist/kist/discussions)
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { Action, ActionOptionsType } from "../../types/Action.js";
|
|
2
|
+
/**
|
|
3
|
+
* Options for SvgPackagerAction
|
|
4
|
+
*/
|
|
5
|
+
export interface SvgPackagerActionOptions extends ActionOptionsType {
|
|
6
|
+
/**
|
|
7
|
+
* Path to SVGO configuration file
|
|
8
|
+
*/
|
|
9
|
+
svgoConfigPath?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Input directory containing SVG files
|
|
12
|
+
*/
|
|
13
|
+
inputDirectory?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Output directory for optimized SVG files
|
|
16
|
+
*/
|
|
17
|
+
outputDirectory?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Output directory for TypeScript files
|
|
20
|
+
*/
|
|
21
|
+
tsOutputDirectory?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Output directory for JSON index
|
|
24
|
+
*/
|
|
25
|
+
jsonOutputDirectory?: string;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* SvgPackagerAction optimizes and packages SVG files.
|
|
29
|
+
*
|
|
30
|
+
* Features:
|
|
31
|
+
* - SVGO-based optimization
|
|
32
|
+
* - Batch SVG processing
|
|
33
|
+
* - TypeScript export generation
|
|
34
|
+
* - JSON index creation
|
|
35
|
+
* - Configurable output directories
|
|
36
|
+
*
|
|
37
|
+
* It reads SVG files from a specified directory, optimizes them using SVGO,
|
|
38
|
+
* and outputs them as optimized SVGs, TypeScript files, and a JSON index.
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```yaml
|
|
42
|
+
* steps:
|
|
43
|
+
* - name: package-icons
|
|
44
|
+
* action: SvgPackagerAction
|
|
45
|
+
* options:
|
|
46
|
+
* inputDirectory: ./src/icons
|
|
47
|
+
* outputDirectory: ./dist/icons
|
|
48
|
+
* tsOutputDirectory: ./dist/ts
|
|
49
|
+
* jsonOutputDirectory: ./dist
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
export declare class SvgPackagerAction extends Action {
|
|
53
|
+
/**
|
|
54
|
+
* Validates the provided options before execution.
|
|
55
|
+
*
|
|
56
|
+
* @param options - The options to validate
|
|
57
|
+
* @returns true if options are valid
|
|
58
|
+
*/
|
|
59
|
+
validateOptions(options: ActionOptionsType): boolean;
|
|
60
|
+
/**
|
|
61
|
+
* Executes the SVG processing action.
|
|
62
|
+
*
|
|
63
|
+
* @param options - The options specifying input and output directories
|
|
64
|
+
* @returns A Promise that resolves when the action completes successfully
|
|
65
|
+
*/
|
|
66
|
+
execute(options: ActionOptionsType): Promise<void>;
|
|
67
|
+
/**
|
|
68
|
+
* Reads the content of an SVG file.
|
|
69
|
+
*
|
|
70
|
+
* @param filePath - The path to the SVG file
|
|
71
|
+
* @returns The content of the SVG file
|
|
72
|
+
*/
|
|
73
|
+
private readSvgFile;
|
|
74
|
+
/**
|
|
75
|
+
* Sanitizes a file name to be a valid TypeScript identifier.
|
|
76
|
+
*
|
|
77
|
+
* @param fileName - The original file name
|
|
78
|
+
* @returns A sanitized version of the file name
|
|
79
|
+
*/
|
|
80
|
+
private sanitizeFileName;
|
|
81
|
+
/**
|
|
82
|
+
* Optimizes SVG content using SVGO.
|
|
83
|
+
*
|
|
84
|
+
* @param svgoConfigPath - Path to the SVGO configuration file
|
|
85
|
+
* @param svgContent - The raw SVG content
|
|
86
|
+
* @returns The optimized SVG content
|
|
87
|
+
*/
|
|
88
|
+
private optimizeSvg;
|
|
89
|
+
/**
|
|
90
|
+
* Writes optimized SVG content to files (SVG & TypeScript).
|
|
91
|
+
*
|
|
92
|
+
* @param iconName - The name of the icon
|
|
93
|
+
* @param svgContent - The optimized SVG content
|
|
94
|
+
* @param outputDirectory - The directory for SVG output
|
|
95
|
+
* @param tsOutputDirectory - The directory for TypeScript output
|
|
96
|
+
*/
|
|
97
|
+
private writeFiles;
|
|
98
|
+
/**
|
|
99
|
+
* Writes the optimized SVG content to an output file.
|
|
100
|
+
*
|
|
101
|
+
* @param iconName - The name of the icon
|
|
102
|
+
* @param svgContent - The SVG content to be written
|
|
103
|
+
* @param outputDirectory - The directory to output the SVG file
|
|
104
|
+
*/
|
|
105
|
+
private writeSvgFile;
|
|
106
|
+
/**
|
|
107
|
+
* Creates a TypeScript file from the optimized SVG content.
|
|
108
|
+
*
|
|
109
|
+
* @param iconName - The name of the icon
|
|
110
|
+
* @param svgContent - The optimized SVG content
|
|
111
|
+
* @param tsOutputDirectory - The directory for TypeScript output
|
|
112
|
+
*/
|
|
113
|
+
private writeTypeScriptFile;
|
|
114
|
+
/**
|
|
115
|
+
* Writes a JSON file containing the names of processed icons.
|
|
116
|
+
*
|
|
117
|
+
* @param iconNames - An array of processed icon names
|
|
118
|
+
* @param jsonOutputDirectory - The directory to output the JSON file
|
|
119
|
+
*/
|
|
120
|
+
private writeIconsJson;
|
|
121
|
+
}
|
|
122
|
+
//# sourceMappingURL=SvgPackagerAction.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SvgPackagerAction.d.ts","sourceRoot":"","sources":["../../../src/actions/SvgPackagerAction/SvgPackagerAction.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAMlE;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;IACjE;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAMD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,iBAAkB,SAAQ,MAAM;IAC3C;;;;;OAKG;IACH,eAAe,CAAC,OAAO,EAAE,iBAAiB,GAAG,OAAO;IAcpD;;;;;OAKG;IACG,OAAO,CAAC,OAAO,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC;IAgDxD;;;;;OAKG;YACW,WAAW;IAIzB;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAIxB;;;;;;OAMG;YACW,WAAW;IASzB;;;;;;;OAOG;YACW,UAAU;IAUxB;;;;;;OAMG;YACW,YAAY;IAU1B;;;;;;OAMG;YACW,mBAAmB;IAWjC;;;;;OAKG;YACW,cAAc;CAS7B"}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
// ============================================================================
|
|
2
|
+
// Import
|
|
3
|
+
// ============================================================================
|
|
4
|
+
import * as fs from "fs/promises";
|
|
5
|
+
import * as glob from "glob";
|
|
6
|
+
import * as path from "path";
|
|
7
|
+
import { loadConfig, optimize } from "svgo";
|
|
8
|
+
import { Action } from "../../types/Action.js";
|
|
9
|
+
// ============================================================================
|
|
10
|
+
// Class
|
|
11
|
+
// ============================================================================
|
|
12
|
+
/**
|
|
13
|
+
* SvgPackagerAction optimizes and packages SVG files.
|
|
14
|
+
*
|
|
15
|
+
* Features:
|
|
16
|
+
* - SVGO-based optimization
|
|
17
|
+
* - Batch SVG processing
|
|
18
|
+
* - TypeScript export generation
|
|
19
|
+
* - JSON index creation
|
|
20
|
+
* - Configurable output directories
|
|
21
|
+
*
|
|
22
|
+
* It reads SVG files from a specified directory, optimizes them using SVGO,
|
|
23
|
+
* and outputs them as optimized SVGs, TypeScript files, and a JSON index.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```yaml
|
|
27
|
+
* steps:
|
|
28
|
+
* - name: package-icons
|
|
29
|
+
* action: SvgPackagerAction
|
|
30
|
+
* options:
|
|
31
|
+
* inputDirectory: ./src/icons
|
|
32
|
+
* outputDirectory: ./dist/icons
|
|
33
|
+
* tsOutputDirectory: ./dist/ts
|
|
34
|
+
* jsonOutputDirectory: ./dist
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
export class SvgPackagerAction extends Action {
|
|
38
|
+
/**
|
|
39
|
+
* Validates the provided options before execution.
|
|
40
|
+
*
|
|
41
|
+
* @param options - The options to validate
|
|
42
|
+
* @returns true if options are valid
|
|
43
|
+
*/
|
|
44
|
+
validateOptions(options) {
|
|
45
|
+
const opts = options;
|
|
46
|
+
if (opts.inputDirectory && typeof opts.inputDirectory !== "string") {
|
|
47
|
+
throw new Error("SvgPackagerAction 'inputDirectory' must be a string");
|
|
48
|
+
}
|
|
49
|
+
if (opts.outputDirectory && typeof opts.outputDirectory !== "string") {
|
|
50
|
+
throw new Error("SvgPackagerAction 'outputDirectory' must be a string");
|
|
51
|
+
}
|
|
52
|
+
return true;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Executes the SVG processing action.
|
|
56
|
+
*
|
|
57
|
+
* @param options - The options specifying input and output directories
|
|
58
|
+
* @returns A Promise that resolves when the action completes successfully
|
|
59
|
+
*/
|
|
60
|
+
async execute(options) {
|
|
61
|
+
const opts = options;
|
|
62
|
+
const { svgoConfigPath = "./config/svgo.config.js", inputDirectory = "src/icons", outputDirectory = "dist/icons", tsOutputDirectory = "dist/ts", jsonOutputDirectory = "dist", } = opts;
|
|
63
|
+
this.logInfo(`Processing SVG files from ${inputDirectory}...`);
|
|
64
|
+
const iconNames = [];
|
|
65
|
+
try {
|
|
66
|
+
const svgFiles = glob.sync(`${inputDirectory}/**/*.svg`);
|
|
67
|
+
if (svgFiles.length === 0) {
|
|
68
|
+
this.logWarning(`No SVG files found in ${inputDirectory}`);
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
for (const file of svgFiles) {
|
|
72
|
+
const iconName = this.sanitizeFileName(path.basename(file, ".svg"));
|
|
73
|
+
iconNames.push(iconName);
|
|
74
|
+
const svgContent = await this.readSvgFile(file);
|
|
75
|
+
const optimizedSvg = await this.optimizeSvg(svgoConfigPath, svgContent);
|
|
76
|
+
await this.writeFiles(iconName, optimizedSvg, outputDirectory, tsOutputDirectory);
|
|
77
|
+
}
|
|
78
|
+
await this.writeIconsJson(iconNames, jsonOutputDirectory);
|
|
79
|
+
this.logInfo(`Successfully processed ${svgFiles.length} SVG files.`);
|
|
80
|
+
}
|
|
81
|
+
catch (error) {
|
|
82
|
+
const message = error instanceof Error ? error.message : String(error);
|
|
83
|
+
this.logError("Error processing SVG files.", error);
|
|
84
|
+
throw new Error(`SVG packaging failed: ${message}`);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Reads the content of an SVG file.
|
|
89
|
+
*
|
|
90
|
+
* @param filePath - The path to the SVG file
|
|
91
|
+
* @returns The content of the SVG file
|
|
92
|
+
*/
|
|
93
|
+
async readSvgFile(filePath) {
|
|
94
|
+
return fs.readFile(filePath, "utf8");
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Sanitizes a file name to be a valid TypeScript identifier.
|
|
98
|
+
*
|
|
99
|
+
* @param fileName - The original file name
|
|
100
|
+
* @returns A sanitized version of the file name
|
|
101
|
+
*/
|
|
102
|
+
sanitizeFileName(fileName) {
|
|
103
|
+
return fileName.replace(/[^a-zA-Z0-9_]/g, "_");
|
|
104
|
+
}
|
|
105
|
+
/**
|
|
106
|
+
* Optimizes SVG content using SVGO.
|
|
107
|
+
*
|
|
108
|
+
* @param svgoConfigPath - Path to the SVGO configuration file
|
|
109
|
+
* @param svgContent - The raw SVG content
|
|
110
|
+
* @returns The optimized SVG content
|
|
111
|
+
*/
|
|
112
|
+
async optimizeSvg(svgoConfigPath, svgContent) {
|
|
113
|
+
const config = await loadConfig(svgoConfigPath);
|
|
114
|
+
const result = await optimize(svgContent, { ...config });
|
|
115
|
+
return result.data.trim();
|
|
116
|
+
}
|
|
117
|
+
/**
|
|
118
|
+
* Writes optimized SVG content to files (SVG & TypeScript).
|
|
119
|
+
*
|
|
120
|
+
* @param iconName - The name of the icon
|
|
121
|
+
* @param svgContent - The optimized SVG content
|
|
122
|
+
* @param outputDirectory - The directory for SVG output
|
|
123
|
+
* @param tsOutputDirectory - The directory for TypeScript output
|
|
124
|
+
*/
|
|
125
|
+
async writeFiles(iconName, svgContent, outputDirectory, tsOutputDirectory) {
|
|
126
|
+
await this.writeSvgFile(iconName, svgContent, outputDirectory);
|
|
127
|
+
await this.writeTypeScriptFile(iconName, svgContent, tsOutputDirectory);
|
|
128
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* Writes the optimized SVG content to an output file.
|
|
131
|
+
*
|
|
132
|
+
* @param iconName - The name of the icon
|
|
133
|
+
* @param svgContent - The SVG content to be written
|
|
134
|
+
* @param outputDirectory - The directory to output the SVG file
|
|
135
|
+
*/
|
|
136
|
+
async writeSvgFile(iconName, svgContent, outputDirectory) {
|
|
137
|
+
await fs.mkdir(outputDirectory, { recursive: true });
|
|
138
|
+
const outputPath = path.join(outputDirectory, `${iconName}.svg`);
|
|
139
|
+
await fs.writeFile(outputPath, svgContent);
|
|
140
|
+
}
|
|
141
|
+
/**
|
|
142
|
+
* Creates a TypeScript file from the optimized SVG content.
|
|
143
|
+
*
|
|
144
|
+
* @param iconName - The name of the icon
|
|
145
|
+
* @param svgContent - The optimized SVG content
|
|
146
|
+
* @param tsOutputDirectory - The directory for TypeScript output
|
|
147
|
+
*/
|
|
148
|
+
async writeTypeScriptFile(iconName, svgContent, tsOutputDirectory) {
|
|
149
|
+
await fs.mkdir(tsOutputDirectory, { recursive: true });
|
|
150
|
+
const tsContent = `export const icon_${iconName} = \`${svgContent}\`;\n`;
|
|
151
|
+
const outputPath = path.join(tsOutputDirectory, `${iconName}.ts`);
|
|
152
|
+
await fs.writeFile(outputPath, tsContent);
|
|
153
|
+
}
|
|
154
|
+
/**
|
|
155
|
+
* Writes a JSON file containing the names of processed icons.
|
|
156
|
+
*
|
|
157
|
+
* @param iconNames - An array of processed icon names
|
|
158
|
+
* @param jsonOutputDirectory - The directory to output the JSON file
|
|
159
|
+
*/
|
|
160
|
+
async writeIconsJson(iconNames, jsonOutputDirectory) {
|
|
161
|
+
await fs.mkdir(jsonOutputDirectory, { recursive: true });
|
|
162
|
+
const jsonContent = JSON.stringify(iconNames, null, 2);
|
|
163
|
+
const outputPath = path.join(jsonOutputDirectory, "icons.json");
|
|
164
|
+
await fs.writeFile(outputPath, jsonContent);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
//# sourceMappingURL=SvgPackagerAction.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SvgPackagerAction.js","sourceRoot":"","sources":["../../../src/actions/SvgPackagerAction/SvgPackagerAction.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/actions/SvgPackagerAction/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/actions/SvgPackagerAction/index.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,SAAS;AACT,+EAA+E;AAE/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}
|