-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbuild.js
72 lines (61 loc) · 2.15 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
const path = require('path')
const sailor = require('sailor-icons')
const pascalCase = require('pascal-case')
const fs = require('fs-extra')
const { JSDOM } = require("jsdom");
const defaultIconColor = '#000';
const componentTemplate = (name, svg) => `
export default {
name: '${name}',
props: {
size: {
type: String,
default: '24',
validator: (s) => (!isNaN(s) || s.length >= 2 && !isNaN(s.slice(0, s.length -1)) && s.slice(-1) === 'x' )
},
color: {
type: String,
default: '${defaultIconColor}'
}
},
functional: true,
render(h, ctx) {
const size = ctx.props.size.slice(-1) === 'x'
? ctx.props.size.slice(0, ctx.props.size.length -1) + 'em'
: parseInt(ctx.props.size) + 'px';
const attrs = ctx.data.attrs || {}
attrs.width = attrs.width || size
attrs.height = attrs.height || size
ctx.data.attrs = attrs
return ${svg.replace(/<svg([^>]+)>/, '<svg$1 {...ctx.data}>').replace(/fill="#000"/g, 'fill={ctx.props.color}')}
}
}
`.trim()
const handleComponentName = name => name.replace(/\-(\d+)/, '$1')
const withFill = svg => {
const dom = new JSDOM(`<!DOCTYPE html>${svg}`);
const newSvg = dom.window.document.querySelector("svg");
const svgChildrenElems = newSvg.children
Array.from(svgChildrenElems).forEach(el => {
el.setAttribute('fill', defaultIconColor)
})
const newSvgString = newSvg.outerHTML
return newSvgString
}
const icons = Object.keys(sailor.icons).map(name => ({
name,
pascalCasedComponentName: pascalCase(`${handleComponentName(name)}-icon`)
}))
Promise.all(icons.map((icon, idx) => {
const svg = sailor.icons[icon.name].toSvg()
const newSvg = withFill(svg)
const component = componentTemplate(icon.pascalCasedComponentName, newSvg)
const filepath = `./src/components/${icon.pascalCasedComponentName}.js`
return fs.ensureDir(path.dirname(filepath))
.then(() => fs.writeFile(filepath, component, 'utf8'))
})).then(() => {
const main = icons
.map(icon => `export { default as ${icon.pascalCasedComponentName} } from '../icons/${icon.pascalCasedComponentName}'`)
.join('\n\n')
return fs.outputFile('./src/index.js', main, 'utf8')
})