/
build.js
55 lines (46 loc) · 1.39 KB
/
build.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
const glob = require('glob');
const path = require('path');
const fs = require('fs-extra');
const svgr = require('@svgr/core').default;
const camelCase = require('lodash.camelcase');
const upperFirst = require('lodash.upperfirst');
const svgPaths = glob.sync('./svg/*');
const outputDir = './dist';
fs.ensureDirSync(outputDir);
/** Create dist/index.tsx */
const code = [
`
// This component is generated by the build script 🤖
// Please don't modify this file.
import React from 'react'
`,
];
function template(
{ template },
opts,
{ imports, componentName, props, jsx, exports }
) {
const typeScriptTpl = template.smart({ plugins: ['typescript'] });
return typeScriptTpl.ast`
export const ${componentName} = (props: React.SVGProps<SVGSVGElement>) => ${jsx};
`;
}
svgPaths.forEach((filepath, index) => {
const source = fs.readFileSync(filepath, 'utf8');
const { name } = path.parse(filepath);
const componentCode = svgr.sync(
source,
{
template,
svgProps: { height: 32, width: 32, viewBox: '0 0 32 32' },
plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
svgoConfig: { plugins: [{ convertColors: { currentColor: true } }] },
},
{
componentName: upperFirst(camelCase(name)),
}
);
code.push(componentCode);
});
const contents = code.join('\n');
fs.writeFileSync(path.join(outputDir, 'index.tsx'), contents, 'utf8');