From 2ad1cd25b364dafabbe92b1bcef0098678bb5982 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Akbar=20Nafisa=20Ja=E2=80=99far?= Date: Mon, 26 Apr 2021 21:43:48 +0700 Subject: [PATCH] feat: add logic to generate icons and illustrations --- .../svgs/assets/icons/office/IconEdit.svg | 1 + packages/svgs/build/build-icon.js | 78 ++++++++++++------- packages/svgs/build/build-illustration.js | 33 ++++++-- packages/svgs/components/icons/icons.json | 14 ++++ .../svgs/components/icons/office/IconEdit.vue | 38 +++++++++ .../illustrations/illustrations.json | 11 +++ 6 files changed, 142 insertions(+), 33 deletions(-) create mode 100644 packages/svgs/assets/icons/office/IconEdit.svg create mode 100644 packages/svgs/components/icons/icons.json create mode 100644 packages/svgs/components/icons/office/IconEdit.vue create mode 100644 packages/svgs/components/illustrations/illustrations.json diff --git a/packages/svgs/assets/icons/office/IconEdit.svg b/packages/svgs/assets/icons/office/IconEdit.svg new file mode 100644 index 0000000..c2c42a8 --- /dev/null +++ b/packages/svgs/assets/icons/office/IconEdit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/svgs/build/build-icon.js b/packages/svgs/build/build-icon.js index 14a63f7..bf78c40 100644 --- a/packages/svgs/build/build-icon.js +++ b/packages/svgs/build/build-icon.js @@ -4,39 +4,41 @@ const config = require('./config.js').icon const chalk = require('chalk') const generateVue = ({ svg, filename }) => ` - + - + } + ` console.log(chalk.black.bgGreen.bold('Generate Icon')) globby([config.input]).then(icon => { try { + const iconsFiles = [] + icon.forEach(v => { let filename = v.match(/([^\/]+)(?=\.\w+$)/)[0] const svgString = fse.readFileSync(v).toString() @@ -53,9 +55,12 @@ globby([config.input]).then(icon => { ':fill="color"' ) + // generate .vue file const svgVueFile = generateVue({ filename, svg: svgReplaceFill }) + const outputPath = v.match('assets/icons(.*).svg')[1] + fse - .outputFile(`${config.output}/${filename}.vue`, svgVueFile) + .outputFile(`${config.output}${outputPath}.vue`, svgVueFile) .then(() => { console.log(` ${chalk.green('√')} ${filename}`) }) @@ -63,9 +68,28 @@ globby([config.input]).then(icon => { console.log(` ${chalk.red('X')} ${filename}`) console.log(error) }) + + iconsFiles.push({ + name: filename, + }) }) + + const iconsInfo = { + iconsCount: iconsFiles.length, + icons: iconsFiles.sort((a, b) => { + if (a.name === b.name) { + return 0 + } + return a.name < b.name ? -1 : 1 + }), + } + // generate icons.json + fse.outputFile( + `${config.output}/icons.json`, + JSON.stringify(iconsInfo, null, 2) + ) } catch (error) { - console.log(` ${chalk.red('X')} failed`) + console.log(` ${chalk.red('X')} Failed`) console.log(error) } }) diff --git a/packages/svgs/build/build-illustration.js b/packages/svgs/build/build-illustration.js index a024cac..90a22e9 100644 --- a/packages/svgs/build/build-illustration.js +++ b/packages/svgs/build/build-illustration.js @@ -3,13 +3,13 @@ const fse = require('fs-extra') const config = require('./config.js').illustration const chalk = require('chalk') -const generateVue = ({ svg, filename }) => ` +const generateVue = ({ asset, filename }) => ` @@ -37,21 +37,42 @@ console.log(chalk.black.bgGreen.bold('Generate Illustration')) globby([config.input]).then(icon => { try { + const illustrationsFiles = [] + icon.forEach(v => { let filename = v.match(/([^\/]+)(?=\.\w+$)/)[0] - const svgVueFile = generateVue({ filename, svg: v }) - const outputPath = v.match('assets/illustrations(.*).svg')[1] + const assetVueFile = generateVue({ filename, asset: v }) + const outputPath = v.match('assets/illustrations(.*).(svg|png)')[1] fse - .outputFile(`${config.output}${outputPath}.vue`, svgVueFile) + .outputFile(`${config.output}${outputPath}.vue`, assetVueFile) .then(() => { console.log(` ${chalk.green('√')} ${filename}`) }) - .catch((error) => { + .catch(error => { console.log(` ${chalk.red('X')} ${filename}`) console.log(error) }) + illustrationsFiles.push({ + name: filename, + }) }) + + const illustrationsInfo = { + illustrationsCount: illustrationsFiles.length, + illustrations: illustrationsFiles.sort((a, b) => { + if (a.name === b.name) { + return 0 + } + return a.name < b.name ? -1 : 1 + }), + } + + // generate illustrations.json + fse.outputFile( + `${config.output}/illustrations.json`, + JSON.stringify(illustrationsInfo, null, 2) + ) } catch (error) { console.log(` ${chalk.red('X')} Failed`) console.log(error) diff --git a/packages/svgs/components/icons/icons.json b/packages/svgs/components/icons/icons.json new file mode 100644 index 0000000..ca116c7 --- /dev/null +++ b/packages/svgs/components/icons/icons.json @@ -0,0 +1,14 @@ +{ + "iconsCount": 3, + "icons": [ + { + "name": "IconBell" + }, + { + "name": "IconClock" + }, + { + "name": "IconEdit" + } + ] +} \ No newline at end of file diff --git a/packages/svgs/components/icons/office/IconEdit.vue b/packages/svgs/components/icons/office/IconEdit.vue new file mode 100644 index 0000000..026b93b --- /dev/null +++ b/packages/svgs/components/icons/office/IconEdit.vue @@ -0,0 +1,38 @@ + + + diff --git a/packages/svgs/components/illustrations/illustrations.json b/packages/svgs/components/illustrations/illustrations.json new file mode 100644 index 0000000..f81c0ec --- /dev/null +++ b/packages/svgs/components/illustrations/illustrations.json @@ -0,0 +1,11 @@ +{ + "illustrationsCount": 2, + "illustrations": [ + { + "name": "IllusInvoice" + }, + { + "name": "IllusOffice" + } + ] +} \ No newline at end of file