improve sync
This commit is contained in:
Pavel
parent
78ebe7df4a
commit
e725c2d415
|
|
@ -1,10 +1,10 @@
|
||||||
import { isCancel, outro, spinner, text } from '@clack/prompts'
|
import { isCancel, log, outro, spinner, text } from '@clack/prompts'
|
||||||
import { transform } from '@svgr/core'
|
import { transform } from '@svgr/core'
|
||||||
import * as Figma from 'figma-api'
|
import * as Figma from 'figma-api'
|
||||||
import fs from 'fs-extra'
|
import fs from 'fs-extra'
|
||||||
import fetch from 'node-fetch'
|
import fetch from 'node-fetch'
|
||||||
|
import pMap from 'p-map'
|
||||||
import path from 'path'
|
import path from 'path'
|
||||||
import prettier from 'prettier'
|
|
||||||
|
|
||||||
const SVG_DIR = path.resolve(__dirname, '../svg')
|
const SVG_DIR = path.resolve(__dirname, '../svg')
|
||||||
|
|
||||||
|
|
@ -35,14 +35,26 @@ const FILE_KEY = 'qLLuMLfpGxK9OfpIavwsmK'
|
||||||
const NODE_IDS = {
|
const NODE_IDS = {
|
||||||
// currently generates only set of size 20
|
// currently generates only set of size 20
|
||||||
// https://github.com/status-im/status-web/issues/466
|
// https://github.com/status-im/status-web/issues/466
|
||||||
'3239:987': 'icons',
|
'3239:987': {
|
||||||
'3227:1083': 'social',
|
name: 'icons-20',
|
||||||
// '942:77': 'reactions',
|
folder: '20',
|
||||||
'942:218': 'love',
|
},
|
||||||
'942:217': 'thumbs-up',
|
'3239:1440': {
|
||||||
'942:216': 'thumbs-down',
|
name: 'icons-16',
|
||||||
'942:215': 'laugh',
|
folder: '16',
|
||||||
'942:213': 'angry',
|
},
|
||||||
|
'3239:3712': {
|
||||||
|
name: 'icons-12',
|
||||||
|
folder: '12',
|
||||||
|
},
|
||||||
|
'3227:1083': {
|
||||||
|
name: 'social',
|
||||||
|
folder: 'social',
|
||||||
|
},
|
||||||
|
'942:77': {
|
||||||
|
name: 'reactions',
|
||||||
|
folder: 'reactions',
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
const figma = new Figma.Api({
|
const figma = new Figma.Api({
|
||||||
|
|
@ -50,13 +62,15 @@ const figma = new Figma.Api({
|
||||||
})
|
})
|
||||||
|
|
||||||
const s1 = spinner()
|
const s1 = spinner()
|
||||||
s1.start('Fetching nodes from Figma')
|
s1.start('Fetching Figma file nodes')
|
||||||
const { nodes } = await figma.getFileNodes(FILE_KEY, Object.keys(NODE_IDS))
|
const { nodes } = await figma.getFileNodes(FILE_KEY, Object.keys(NODE_IDS))
|
||||||
|
// console.log('🚀 ~ nodes:', nodes)
|
||||||
|
|
||||||
s1.stop('Done!')
|
s1.stop('Done!')
|
||||||
|
|
||||||
for (const [nodeId, name] of Object.entries(NODE_IDS)) {
|
for (const [nodeId, { name, folder }] of Object.entries(NODE_IDS)) {
|
||||||
const s2 = spinner()
|
const s2 = spinner()
|
||||||
s2.start('Fetching nodes from Figma')
|
s2.start(`Fetching SVG images for ${name}`)
|
||||||
|
|
||||||
const { components } = nodes[nodeId]!
|
const { components } = nodes[nodeId]!
|
||||||
const nodeIds = Object.keys(components)
|
const nodeIds = Object.keys(components)
|
||||||
|
|
@ -75,73 +89,84 @@ for (const [nodeId, name] of Object.entries(NODE_IDS)) {
|
||||||
|
|
||||||
s2.stop('Done!')
|
s2.stop('Done!')
|
||||||
|
|
||||||
const s3 = spinner()
|
log.info(`Generating SVGs for ${name}`)
|
||||||
s3.start(`Generating SVGs for ${name}`)
|
|
||||||
|
|
||||||
for (const [nodeId, image] of Object.entries(images)) {
|
await pMap(
|
||||||
const icon = components[nodeId]!
|
Object.entries(images),
|
||||||
|
async ([nodeId, image]) => {
|
||||||
|
const icon = components[nodeId]!
|
||||||
|
const svgRaw = await fetch(image!)
|
||||||
|
.then(res => res.text())
|
||||||
|
.catch(() => {
|
||||||
|
log.error(`Failed to fetch SVG for ${icon.name}`)
|
||||||
|
return
|
||||||
|
})
|
||||||
|
|
||||||
const svgRaw = await fetch(image!).then(res => res.text())
|
// note: probably a wrapper layer for https://www.figma.com/file/qLLuMLfpGxK9OfpIavwsmK/Iconset?type=design&node-id=4408-955&mode=dev, thus skipping
|
||||||
|
// icon:: {
|
||||||
|
// key: 'c73f7bad669c2696c2158cef34967a20cc0f0f0f',
|
||||||
|
// name: 'Use=Default, Typo=False, Style=Gradient',
|
||||||
|
// description: '',
|
||||||
|
// remote: true,
|
||||||
|
// componentSetId: '4819:992',
|
||||||
|
// documentationLinks: []
|
||||||
|
// }
|
||||||
|
// raw::
|
||||||
|
// transform::
|
||||||
|
// icon:: {
|
||||||
|
// key: '53e1bc9f7ee455bc6cc38b90a9b7614ef64afe4e',
|
||||||
|
// name: '20/status-logo',
|
||||||
|
// description: '',
|
||||||
|
// remote: false,
|
||||||
|
// documentationLinks: []
|
||||||
|
// }
|
||||||
|
if (!svgRaw) {
|
||||||
|
log.error(`Failed to fetch SVG for ${icon.name}`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
// note: probably a wrapper layer for https://www.figma.com/file/qLLuMLfpGxK9OfpIavwsmK/Iconset?type=design&node-id=4408-955&mode=dev, thus skipping
|
const svg = await transform(svgRaw, {
|
||||||
// icon:: {
|
plugins: ['@svgr/plugin-svgo'],
|
||||||
// key: 'c73f7bad669c2696c2158cef34967a20cc0f0f0f',
|
replaceAttrValues: {
|
||||||
// name: 'Use=Default, Typo=False, Style=Gradient',
|
'#09101C': 'currentColor',
|
||||||
// description: '',
|
'#2A4AF5': 'var(--customisation-50, #2A4AF5)',
|
||||||
// remote: true,
|
},
|
||||||
// componentSetId: '4819:992',
|
svgProps: {
|
||||||
// documentationLinks: []
|
'aria-hidden': '{true}',
|
||||||
// }
|
},
|
||||||
// raw::
|
svgoConfig: {
|
||||||
// transform::
|
plugins: [
|
||||||
// icon:: {
|
{
|
||||||
// key: '53e1bc9f7ee455bc6cc38b90a9b7614ef64afe4e',
|
name: 'preset-default',
|
||||||
// name: '20/status-logo',
|
params: {
|
||||||
// description: '',
|
overrides: {
|
||||||
// remote: false,
|
cleanupIds: {
|
||||||
// documentationLinks: []
|
minify: false,
|
||||||
// }
|
},
|
||||||
if (!svgRaw) {
|
// viewBox is required to resize SVGs with CSS.
|
||||||
continue
|
// @see https://github.com/svg/svgo/issues/1128
|
||||||
}
|
removeViewBox: false,
|
||||||
|
|
||||||
const svg = await transform(svgRaw, {
|
|
||||||
plugins: ['@svgr/plugin-svgo'],
|
|
||||||
replaceAttrValues: {
|
|
||||||
// '#000': 'currentColor',
|
|
||||||
},
|
|
||||||
svgoConfig: {
|
|
||||||
plugins: [
|
|
||||||
{
|
|
||||||
name: 'preset-default',
|
|
||||||
params: {
|
|
||||||
overrides: {
|
|
||||||
cleanupIds: {
|
|
||||||
minify: false,
|
|
||||||
},
|
},
|
||||||
// viewBox is required to resize SVGs with CSS.
|
|
||||||
// @see https://github.com/svg/svgo/issues/1128
|
|
||||||
removeViewBox: false,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
'prefixIds',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const nameParts = icon.name.replace(' / ', '/').split('/')
|
const nameParts = icon.name.replace(' / ', '/').split('/')
|
||||||
const iconName = nameParts[nameParts.length - 1]
|
const iconName = nameParts.at(-1)!
|
||||||
const fileName = `${toKebabCase(iconName)}-icon.svg`
|
const fileName = `${toKebabCase(iconName)}-icon.svg`
|
||||||
const filePath = path.resolve(SVG_DIR, fileName)
|
const filePath = path.resolve(SVG_DIR, folder, fileName)
|
||||||
|
|
||||||
const prettierOptions = prettier.resolveConfig.sync(process.cwd())
|
await fs.ensureDir(path.dirname(filePath))
|
||||||
const formattedSvg = prettier.format(svg, {
|
|
||||||
...prettierOptions,
|
|
||||||
parser: 'html',
|
|
||||||
})
|
|
||||||
|
|
||||||
await fs.writeFile(filePath, formattedSvg, { encoding: 'utf8' })
|
await fs.writeFile(filePath, svg, { encoding: 'utf8' })
|
||||||
}
|
|
||||||
|
|
||||||
s3.stop(`${Object.keys(images).length} SVGs generated`)
|
log.success(filePath)
|
||||||
|
},
|
||||||
|
{ concurrency: 5 }
|
||||||
|
)
|
||||||
|
|
||||||
|
log.success(`${Object.keys(images).length} SVGs generated`)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue