feat: add build icon and illustration

packages/svgs/build/build-icon.js

@@ -0,0 +1,71 @@
+const globby = require('globby')
+const fse = require('fs-extra')
+const config = require('./config.js').icon
+const chalk = require('chalk')
+
+const generateVue = ({ svg, filename }) => `
+<template>
+  ${svg}
+</template>
+
+<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',
+    },
+  },
+}
+</script>
+`
+
+console.log(chalk.black.bgGreen.bold('Generate Icon'))
+
+globby([config.input]).then(icon => {
+  try {
+    icon.forEach(v => {
+      let filename = v.match(/([^\/]+)(?=\.\w+$)/)[0]
+      const svgString = fse.readFileSync(v).toString()
+      const svgReplaceWidth = svgString.replace(
+        /(width)=\".*?\"/,
+        ':width="width || size"'
+      )
+      const svgReplaceHeight = svgReplaceWidth.replace(
+        /(height)=\".*?\"/,
+        ':height="height || size"'
+      )
+      const svgReplaceFill = svgReplaceHeight.replace(
+        /(fill)=\".*?\"/,
+        ':fill="color"'
+      )
+
+      const svgVueFile = generateVue({ filename, svg: svgReplaceFill })
+      fse
+        .outputFile(`${config.output}/${filename}.vue`, svgVueFile)
+        .then(() => {
+          console.log(`    ${chalk.green('√')} ${filename}`)
+        })
+        .catch(error => {
+          console.log(`    ${chalk.red('X')} ${filename}`)
+          console.log(error)
+        })
+    })
+  } catch (error) {
+    console.log(`    ${chalk.red('X')} failed`)
+    console.log(error)
+  }
+})

packages/svgs/build/build-illustration.js

@@ -0,0 +1,59 @@
+const globby = require('globby')
+const fse = require('fs-extra')
+const config = require('./config.js').illustration
+const chalk = require('chalk')
+
+const generateVue = ({ svg, filename }) => `
+<template>
+  <img
+    :alt="$options.name"
+    :width="width || size || null"
+    :height="height || size || null"
+    src="@/${svg}"
+  />
+</template>
+
+<script>
+export default {
+  name: '${filename}',
+  props: {
+    size: {
+      type: [String, Number],
+      default: 128,
+    },
+    width: {
+      type: [String, Number],
+      default: '',
+    },
+    height: {
+      type: [String, Number],
+      default: '',
+    },
+  },
+}
+</script>
+`
+console.log(chalk.black.bgGreen.bold('Generate Illustration'))
+
+globby([config.input]).then(icon => {
+  try {
+    icon.forEach(v => {
+      let filename = v.match(/([^\/]+)(?=\.\w+$)/)[0]
+      const svgVueFile = generateVue({ filename, svg: v })
+      const outputPath = v.match('assets/illustrations(.*).svg')[1]
+
+      fse
+        .outputFile(`${config.output}${outputPath}.vue`, svgVueFile)
+        .then(() => {
+          console.log(`    ${chalk.green('√')} ${filename}`)
+        })
+        .catch((error) => {
+          console.log(`    ${chalk.red('X')} ${filename}`)
+          console.log(error)
+        })
+    })
+  } catch (error) {
+    console.log(`    ${chalk.red('X')} Failed`)
+    console.log(error)
+  }
+})

packages/svgs/build/config.js

@@ -0,0 +1,13 @@
+const path = require('path')
+module.exports = {
+  icon: {
+    input: 'assets/icons/**/*.svg',
+    output: path.resolve(__dirname, '../components/icons'),
+    optimize: true,
+  },
+  illustration: {
+    input: 'assets/illustrations/**/*.svg',
+    output: path.resolve(__dirname, '../components/illustrations'),
+    optimize: true,
+  },
+}

packages/svgs/components/icons.js

@@ -0,0 +1,2 @@
+export { default as IconBell } from './icons/IconBell.vue'
+export { default as IconClock } from './icons/IconClock.vue'

packages/svgs/components/icons/IconBell.vue

@@ -9,7 +9,7 @@
       :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>
 

packages/svgs/components/icons/IconClock.vue

@@ -9,7 +9,7 @@
       :fill="color"
       fill-rule="evenodd"
       d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm1-10V6c0-.552-.448-1-1-1s-1 .448-1 1v5.573l-2.42 2.42c-.391.391-.391 1.025 0 1.415.39.39 1.023.39 1.413 0l2.825-2.833c.115-.162.182-.36.182-.575z"
-    />
+    ></path>
   </svg>
 </template>
 

packages/svgs/components/illustrations.js

@@ -0,0 +1,2 @@
+export { default as IllusInvoice } from './illustrations/IllusInvoice.vue'
+export { default as illusOffice } from './illustrations/office/IllusOffice.vue'

packages/svgs/components/illustrations/IllusInvoice.vue

@@ -3,7 +3,7 @@
     :alt="$options.name"
     :width="width || size || null"
     :height="height || size || null"
-    src="../../assets/illustrations/IllusInvoice.svg"
+    src="@/assets/illustrations/IllusInvoice.svg"
   />
 </template>
 

packages/svgs/components/illustrations/office/IllusOffice.vue

@@ -0,0 +1,28 @@
+<template>
+  <img
+    :alt="$options.name"
+    :width="width || size || null"
+    :height="height || size || null"
+    src="@/assets/illustrations/office/IllusOffice.svg"
+  />
+</template>
+
+<script>
+export default {
+  name: 'IllusOffice',
+  props: {
+    size: {
+      type: [String, Number],
+      default: 128,
+    },
+    width: {
+      type: [String, Number],
+      default: '',
+    },
+    height: {
+      type: [String, Number],
+      default: '',
+    },
+  },
+}
+</script>

packages/svgs/index.js

@@ -1,6 +1,2 @@
-// Icon
-export { default as IconBell } from './components/icon/IconBell.vue'
-export { default as IconClock } from './components/icon/IconClock.vue'
-
-// Illustration
-export { default as IllusInvoice } from './components/illustration/IllusInvoice.vue'
+export * from './components/icons'
+export * from './components/illustrations'