-
Notifications
You must be signed in to change notification settings - Fork 0
/
preprocess.js
77 lines (63 loc) · 2.28 KB
/
preprocess.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { globby } from 'globby';
import { parse as parseSvg } from 'postsvg'
import { readFile, writeFile } from 'node:fs/promises'
import { parse as parsePath } from 'node:path'
import { optimize, loadConfig } from 'svgo';
import mixer from 'svg-mixer';
const SVG_WILDCARD = 'src/svg/*.svg'
const validate = (tree) => {
// TODO: validate naming convention?
const VIEWBOX_MATCH = '0 0 24 24'
// check for viewBox match
if(tree.root?.attrs?.viewBox !== VIEWBOX_MATCH) {
throw new Error(`viewBox is incorrect for ${path}. Icon svg sources must have a viewBox of ${VIEWBOX_MATCH}`)
}
// ensure no width attribute
if(!tree.root.attrs.width === false) {
throw new Error(`width is incorrect for ${path}. Icon svg sources must not have defined width attribute.`)
}
// ensure no height attribute
if(!tree.root.attrs.height === false) {
throw new Error(`height is incorrect for ${path}. Icon svg sources must not have defined height attribute.`)
}
}
const paths = await globby(SVG_WILDCARD);
const svgoConfig = await loadConfig();
const pipelines = paths.map(async (path) => {
// pipeline per file
const contents = await readFile(path, 'utf-8')
const svgAst = parseSvg(contents)
validate(svgAst)
const { data } = optimize(contents, { ...svgoConfig, path })
return writeFile(path, data)
})
const results = await Promise.allSettled(pipelines)
const errors = results
.filter(result => result.status === 'rejected')
.map(err => err.reason)
if(errors.length > 0) {
console.warn(`Encountered ${errors.length} svg errors!\n`)
console.table(errors)
process.exit(1)
} else {
console.info('SVG preprocessing complete!')
// process.exit(0)
}
const filenamesUnion = paths
.map((path) => `${JSON.stringify(parsePath(path).name)}`)
.join('\n\t| ')
// could use ts-morph but... this is simpler. its just a union of string literals.
const IconTypeSource = `export type IconName = ${filenamesUnion};`
await writeFile('src/IconName.type.ts', IconTypeSource)
const spritesheet = await mixer(SVG_WILDCARD,
{
spriteType: 'stack',
spriteConfig: {
usages: false,
usageClassName: 'icon-sprite',
},
generateSymbolId: (path, _querystring) => parsePath(path).name
}
)
await spritesheet.write('public/sprite.svg')
console.info('sprite.svg written to public/')