v2.0.0 move to Ionicons branch 4.0

Author: Irfan Maulana

.gitmodules

@@ -1,4 +1,5 @@
 [submodule "ionicons"]
 	path = ionicons
-	# url = [email protected]:ionic-team/ionicons.git
-	url = https://github.com:ionic-team/ionicons.git
+	url = [email protected]:ionic-team/ionicons.git
+	# url = https://github.com:ionic-team/ionicons.git
+  branch = 4.0

README.md

@@ -7,6 +7,8 @@
 Design icons sourced from the
 [Ionicons](https://github.com/ionic-team/ionicons) project.
 
+> Warning!!! Vue-Ionicons v2.0.0 we will move to ionicons branch [4.0](https://github.com/ionic-team/ionicons/tree/4.0) for better icons naming
+
 ## 🎉 Demo
 
 https://mazipan.github.io/vue-ionicons
@@ -60,7 +62,7 @@ https://mazipan.github.io/vue-ionicons
     <AlertIcon />
     ```
 
-1. You can add props for height and width icon
+1. You can add props
 
     ```html
     <AlertIcon w="30px" h="30px"/>
@@ -75,7 +77,7 @@ Checkout with submodule :
 ```bash
 git clone [email protected]:mazipan/vue-ionicons.git
 git submodule init
-git submodule update
+git submodule update --remote
 ```
 
 Run demo

demo/App.vue

@@ -7,7 +7,7 @@ const ora = require('ora')
 const SVGO = require('svgo/lib/svgo')
 
 const dist = path.resolve(__dirname, 'dist')
-const svgPath = path.resolve(__dirname, 'ionicons/src')
+const svgPath = path.resolve(__dirname, 'ionicons/src/svg')
 
 const svgs = fs.readdirSync(svgPath)
 const svgo = new SVGO()
@@ -21,59 +21,77 @@ shell.config.silent = false
 shell.rm('-rf', dist)
 shell.rm('-rf', path.resolve(__dirname, 'demo/dist'))
 
+shell.exec(`svgo ${svgPath}/*.svg`, {silent:true});
+
 const getSVGString = (svg) => {
   return new Promise((resolve, reject) => {
+
     let filepath = path.join(svgPath, svg)
-    fs.readFile(filepath, { encoding: 'utf8'}, (err, stream) => {
-      svgo.optimize(stream, { path: filepath })
-        .then(function(result) {
-          resolve(result.data);
-      })
+    console.log(chalk.yellow(`proccess ${svg}...`))
+    fs.readFile(filepath, { encoding: 'utf8' }, (err, stream) => {
+      try {
+        let newStream = sanitizeSVG(stream)
+        resolve(newStream)
+      } catch (error) {
+        reject(newStream)
+      }
     })
   })
 }
 
-const makeHumanReadable = (name) => {
-  let array = name.split('-')
-  let tempArray = array.map(elm => {
-    return elm.charAt(0).toUpperCase() + elm.slice(1)
-  })
-  return tempArray.join(' ')
-}
-
 const sanitizeSVG = (stream) => {
+
   let newStream = stream
+    .replace('<?xml version="1.0" encoding="utf-8"?>', '')
+    .replace('<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->', '')
+    .replace('<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->', '')
+    .replace('<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->', '')
     .replace(' xmlns="http://www.w3.org/2000/svg"', '')
-    .replace('width=', ':width=')
-    .replace('height=', ':height=')
-    .replace('512', 'w')
-    .replace('512', 'h')
     .replace('<style>.st0{fill:#010101}</style>', '')
     .replace('<style>', '<data-style>')
     .replace('</style>', '</data-style>')
-    .replace('<svg', '<svg viewBox="0 0 512 512" class="ion__svg"')
+    .replace('width="512" height="512"', '')
+    .replace('<svg', '<svg :width="w" :height="h" class="ion__svg"')
+
+  if (newStream.indexOf('viewBox="0 0 512 512"') < 0){
+      newStream = newStream.replace('<svg', '<svg viewBox="0 0 512 512" ')
+  }
 
   return newStream
 }
 
+const makeHumanReadable = (name) => {
+  let array = name.split('-')
+  let tempArray = array.map(elm => {
+    return elm.charAt(0).toUpperCase() + elm.slice(1)
+  })
+  return tempArray.join(' ')
+}
+
 const generateTemplateData = () => {
   let templateData = [];
   let promises = svgs.map(svgPath => {
-    let name = svgPath.slice(0, -4)
-    let readableName = makeHumanReadable(name)
-    let libraryName = readableName.split(' ').join('')
-
-    return new Promise((resolve, reject) => {
-      getSVGString(svgPath).then((result) => {
-        templateData.push({
-          name: name,
-          readableName: readableName,
-          libraryName: libraryName + 'Icon',
-          svg: sanitizeSVG(result)
+    if (svgPath.indexOf('.svg') >= 0) {
+      return new Promise((resolve, reject) => {
+        getSVGString(svgPath).then((result) => {
+          try {
+            let name = svgPath.slice(0, -4)
+            let readableName = makeHumanReadable(name)
+            let libraryName = readableName.split(' ').join('')
+
+            templateData.push({
+              name: name,
+              readableName: readableName,
+              libraryName: libraryName + 'Icon',
+              svg: result
+            })
+            resolve(templateData);
+          } catch (error) {
+            reject(templateData)
+          }
         })
-        resolve(templateData);
       })
-    })
+    }
   })
 
   return new Promise((resolve, reject) => {
@@ -85,12 +103,12 @@ const generateTemplateData = () => {
 
 const generateBuildFile = (template, extension, templateData) => {
   return new Promise((resolve, reject) => {
-    fs.readFile(template, { encoding: 'utf8'}, (err, componentFile) => {
+    fs.readFile(template, { encoding: 'utf8' }, (err, componentFile) => {
       for (data of templateData) {
         let component = mustache.render(componentFile, data)
         let filename = data.name + "." + extension
         fs.writeFile(path.resolve(dist, filename), component, (err) => {
-          if(err) {
+          if (err) {
             reject(err)
           }
           resolve()
@@ -105,7 +123,7 @@ const generatePluginFile = (template, templateData) => {
     spinner.stop()
     console.log(chalk.yellow('Generating plugin file...'))
     spinner.start()
-    fs.readFile(template, { encoding: 'utf8'}, (err, componentFile) => {
+    fs.readFile(template, { encoding: 'utf8' }, (err, componentFile) => {
       let data = {
         data: []
       };
@@ -114,7 +132,7 @@ const generatePluginFile = (template, templateData) => {
       let component = mustache.render(componentFile, data)
       let filename = "ionicons.js"
       fs.writeFile(path.resolve(dist, filename), component, (err) => {
-        if(err) {
+        if (err) {
           reject(err)
         }
         spinner.stop()
@@ -131,7 +149,7 @@ const generateDemoAppFile = (template, templateData) => {
     spinner.stop()
     console.log(chalk.yellow('Generating demo App.vue file...'))
     spinner.start()
-    fs.readFile(template, { encoding: 'utf8'}, (err, componentFile) => {
+    fs.readFile(template, { encoding: 'utf8' }, (err, componentFile) => {
       let data = {
         data: []
       };
@@ -140,7 +158,7 @@ const generateDemoAppFile = (template, templateData) => {
       let component = mustache.render(componentFile, data)
       let filename = "App.vue"
       fs.writeFile(path.resolve('demo', filename), component, (err) => {
-        if(err) {
+        if (err) {
           reject(err)
         }
         spinner.stop()
@@ -158,7 +176,7 @@ const generateVersionFile = () => {
   spinner.start()
   return new Promise((resolve, reject) => {
     fs.writeFile(path.resolve('dist', `VERSION-${VERSION}`), `VERSION: ${VERSION}`, (err) => {
-      if(err) {
+      if (err) {
         reject(err)
       }
       spinner.stop()
@@ -186,5 +204,8 @@ generateTemplateData().then((templateData) => {
   ]).then(() => {
     spinner.stop()
     console.log(chalk.green('Build completed: ' + templateData.length + ' icons'))
+  }).catch(() => {
+    spinner.stop()
+    console.log(chalk.red('Error when build templateData'))
   })
 })

dist.js

@@ -0,0 +1 @@
+VERSION: 2.0.0