feat: add logic to generate icons and illustrations

akbarnafisa · Apr 26, 2021 · 2ad1cd2 · 2ad1cd2
1 parent 738d97e
commit 2ad1cd2
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 33 deletions.
diff --git a/packages/svgs/assets/icons/office/IconEdit.svg b/packages/svgs/assets/icons/office/IconEdit.svg
diff --git 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 }) => `
-<template>
-  ${svg}
-</template>
+  <template>
+    ${svg}
+  </template>
 
-<script>
-export default {
-  name: '${filename}',
-  props: {
-    size: {
-      type: [String, Number],
-      default: 24,
+  <script>
+  export default {
+    name: '${filename}',
+    props: {
+      size: {
+        type: [String, Number],
+        default: 24,
+      },
+      width: {
+        type: [String, Number],
+        default: '',
+      },
+      height: {
+        type: [String, Number],
+        default: '',
+      },
+      color: {
+        type: String,
+        default: '#A4A4A4',
+      },
     },
-    width: {
-      type: [String, Number],
-      default: '',
-    },
-    height: {
-      type: [String, Number],
-      default: '',
-    },
-    color: {
-      type: String,
-      default: '#A4A4A4',
-    },
-  },
-}
-</script>
+  }
+  </script>
 `
 
 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,19 +55,41 @@ 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}`)
         })
         .catch(error => {
           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
@@ -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 }) => `
 <template>
   <img
     :alt="$options.name"
     :width="width || size || null"
     :height="height || size || null"
-    src="@/${svg}"
+    src="@/${asset}"
   />
 </template>
 
@@ -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
@@ -0,0 +1,14 @@
+{
+  "iconsCount": 3,
+  "icons": [
+    {
+      "name": "IconBell"
+    },
+    {
+      "name": "IconClock"
+    },
+    {
+      "name": "IconEdit"
+    }
+  ]
+}
diff --git a/packages/svgs/components/icons/office/IconEdit.vue b/packages/svgs/components/icons/office/IconEdit.vue
@@ -0,0 +1,38 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="width || size"
+    :height="height || size"
+    viewBox="0 0 24 24"
+  >
+    <path
+      :fill="color"
+      fill-rule="evenodd"
+      d="M19 14c.414 0 .75.336.75.75v1.5h1.5c.414 0 .75.336.75.75s-.336.75-.75.75h-1.5v1.5c0 .414-.336.75-.75.75s-.75-.336-.75-.75v-1.5h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5v-1.5c0-.414.336-.75.75-.75zm1-10c1.105 0 2 .895 2 2v6.5c0 .276-.224.5-.5.5s-.5-.224-.5-.5V12H3v6c0 .552.448 1 1 1h10.5c.276 0 .5.224.5.5s-.224.5-.5.5H4c-1.105 0-2-.895-2-2V6c0-1.105.895-2 2-2h16zm-9 11c.552 0 1 .448 1 1s-.448 1-1 1H6c-.552 0-1-.448-1-1s.448-1 1-1h5zm9-10H4c-.552 0-1 .448-1 1v2h18V6c0-.552-.448-1-1-1z"
+    ></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'IconEdit',
+  props: {
+    size: {
+      type: [String, Number],
+      default: 24,
+    },
+    width: {
+      type: [String, Number],
+      default: '',
+    },
+    height: {
+      type: [String, Number],
+      default: '',
+    },
+    color: {
+      type: String,
+      default: '#A4A4A4',
+    },
+  },
+}
+</script>
diff --git a/packages/svgs/components/illustrations/illustrations.json b/packages/svgs/components/illustrations/illustrations.json
@@ -0,0 +1,11 @@
+{
+  "illustrationsCount": 2,
+  "illustrations": [
+    {
+      "name": "IllusInvoice"
+    },
+    {
+      "name": "IllusOffice"
+    }
+  ]
+}