Merge branch 'tmaiaroto-master'

MMF-FE · Mar 27, 2017 · 01fceee · 01fceee
2 parents eb7959d + d673cdc
commit 01fceee
Show file tree

Hide file tree

Showing 14 changed files with 4,492 additions and 121 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # vue-svgicon
 
-[![Build Status](https://img.shields.io/travis/MMF-FE/vue-svgicon.svg?style=flat-square)](https://travis-ci.org/MMF-FE/vue-svgicon) 
+[![Build Status](https://img.shields.io/travis/MMF-FE/vue-svgicon.svg?style=flat-square)](https://travis-ci.org/MMF-FE/vue-svgicon)
 [![Coverage Status](https://img.shields.io/coveralls/MMF-FE/vue-svgicon.svg?style=flat-square)](https://coveralls.io/r/MMF-FE/vue-svgicon?branch=master)
 
 
@@ -174,3 +174,22 @@ Use gradient
     <svgicon icon="vue" width="15rem" height="15rem" color="url(#gradient-1) url(#gradient-2)"></svgicon>
 </template>
 ```
+
+### Multiple directory (Namespace)
+You can use multiple directory to discriminate the icons which has the same name.
+```txt
+|-- src
+    arrow.svg
+    |-- sora
+        arrow.svg
+        |-- fit
+            arrow.svg
+
+```
+
+```html
+<svgicon icon="arrow" width="50" height="50"></svgicon>
+<svgicon icon="sora/arrow" width="50" height="50"></svgicon>
+<svgicon icon="sora/fit/arrow" width="50" height="50"></svgicon>
+
+```
diff --git a/bin/svg.js b/bin/svg.js
@@ -11,13 +11,13 @@ const path = require('path')
 const Svgo = require('svgo')
 const golb = require('glob')
 const args = require('yargs')
-    .usage('Usage: $0 -s svgSourcePath -t targetPath')
-    .demandOption(['s', 't'])
-    .describe('s', 'svg file path')
-    .describe('t', 'generate icon path')
-    .help('help')
-    .alias('h', 'help')
-    .argv
+  .usage('Usage: $0 -s svgSourcePath -t targetPath')
+  .demandOption(['s', 't'])
+  .describe('s', 'svg file path')
+  .describe('t', 'generate icon path')
+  .help('help')
+  .alias('h', 'help')
+  .argv
 
 // svg fle path
 let filepath = path.join(process.cwd(), args.s, '**/*.svg')
@@ -28,104 +28,116 @@ let targetPath = path.join(process.cwd(), args.t)
 fs.removeSync(targetPath)
 
 let svgo = new Svgo({
-    plugins: [
-        {
-            removeAttrs: {
-                attrs: ['(path|rect|circle|polygon|line|polyline|g):(fill|stroke)']
-            }
-        },
-        {
-            removeTitle: true
-        },
-        {
-            removeStyleElement: true
-        },
-        {
-            removeComments: true
-        },
-        {
-            removeDesc: true
-        },
-        {
-            removeUselessDefs: true
-        },
-        {
-            cleanupIDs: {
-                remove: true,
-                prefix: 'svgicon-'
-            }
-        },
-        {
-            convertShapeToPath: true
-        }
-    ]
+  plugins: [
+    {
+      removeAttrs: {
+        attrs: ['(path|rect|circle|polygon|line|polyline|g):(fill|stroke)']
+      }
+    },
+    {
+      removeTitle: true
+    },
+    {
+      removeStyleElement: true
+    },
+    {
+      removeComments: true
+    },
+    {
+      removeDesc: true
+    },
+    {
+      removeUselessDefs: true
+    },
+    {
+      cleanupIDs: {
+        remove: true,
+        prefix: 'svgicon-'
+      }
+    },
+    {
+      convertShapeToPath: true
+    }
+  ]
 })
 
-// generate index.js, which import all icons
-function generateIndex (files) {
-    let content = ''
-    files.forEach((filename) => {
-        let name = path.basename(filename).split('.')[0]
-        content += `require('./${name}')\n`
-    })
+// get file path by filename
+function getFilePath (filename) {
+  let filePath = filename.replace(path.resolve(args.s), '').replace(path.basename(filename), '')
+  if (filePath.indexOf('/') === 0) {
+    filePath = filePath.substr(1)
+  }
 
-    fs.writeFile(path.join(targetPath, 'index.js'), content, 'utf-8', (err) => {
-        if (err) {
-            console.log(err)
-            return false
-        }
-
-        console.log('Generated index.js')
-    })
+  return filePath
 }
 
-golb(filepath, function(err, files) {
+// generate index.js, which import all icons
+function generateIndex(files) {
+  let content = ''
+  files.forEach((filename) => {
+    let name = path.basename(filename).split('.')[0]
+    const filePath = getFilePath(filename)
+    content += `require('./${filePath}${name}')\n`
+  })
+
+  fs.writeFile(path.join(targetPath, 'index.js'), content, 'utf-8', (err) => {
     if (err) {
-        console.log(err)
-        return false
+      console.log(err)
+      return false
     }
 
-    files.forEach((filename, ix) => {
-        let name = path.basename(filename).split('.')[0]
-        let content = fs.readFileSync(filename, 'utf-8')
-
-        svgo.optimize(content, (result) => {
-            let data = result.data.replace(/<svg[^>]+>/gi, '').replace(/<\/svg>/gi, '')
-            let viewBox = result.data.match(/viewBox="(\d+\s\d+\s\d+\s\d+)"/)
-
-            if (viewBox && viewBox.length > 1) {
-                viewBox = viewBox[1]
-            }
-
-            // add pid attr, for css
-            let reg = /<(path|rect|circle|polygon|line|polyline)\s/gi
-            let id = 0
-            data = data.replace(reg, function (match) {
-              return match + `pid="${id++}" `
-            })
+    console.log('Generated index.js')
+  })
+}
 
-            let content = `
+golb(filepath, function (err, files) {
+  if (err) {
+    console.log(err)
+    return false
+  }
+
+  files.forEach((filename, ix) => {
+    let name = path.basename(filename).split('.')[0]
+    let content = fs.readFileSync(filename, 'utf-8')
+    let filePath = getFilePath(filename)
+
+    svgo.optimize(content, (result) => {
+      let data = result.data.replace(/<svg[^>]+>/gi, '').replace(/<\/svg>/gi, '')
+      let viewBox = result.data.match(/viewBox="([\d\.]+\s[\d\.]+\s[\d\.]+\s[\d\.]+)"/)
+
+      if (viewBox && viewBox.length > 1) {
+        viewBox = `'${viewBox[1]}'`
+      }
+
+      // add pid attr, for css
+      let reg = /<(path|rect|circle|polygon|line|polyline)\s/gi
+      let id = 0
+      data = data.replace(reg, function (match) {
+        return match + `pid="${id++}" `
+      })
+
+      let content = `
 var icon = require('vue-svgicon')
 icon.register({
-    '${name}': {
-        width: ${parseFloat(result.info.width) || 16},
-        height: ${parseFloat(result.info.height) || 16},
-        viewBox: '${viewBox}',
-        data: '${data}'
-    }
+  '${filePath}${name}': {
+    width: ${parseFloat(result.info.width) || 16},
+    height: ${parseFloat(result.info.height) || 16},
+    viewBox: ${viewBox},
+    data: '${data}'
+  }
 })`
-            fs.writeFile(path.join(targetPath, name + '.js'), content, 'utf-8', function (err) {
-                if (ix === files.length - 1) {
-                    generateIndex(files)
-                }
-                if (err) {
-                    console.log(err)
-                    return false
-                }
-
-                console.log(`Generated icon: ${name}`)
-            })
-        })
+      fs.writeFile(path.join(targetPath, filePath, name + '.js'), content, 'utf-8', function (err) {
+        if (ix === files.length - 1) {
+          generateIndex(files)
+        }
+        if (err) {
+          console.log(err)
+          return false
+        }
+
+        console.log(`Generated icon: ${filePath}${name}`)
+      })
     })
+  })
 })
 
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -58,6 +58,12 @@
       <p>
         <svgicon icon="vue" width="15rem" height="15rem" color="url(#gradient-1) url(#gradient-2)"></svgicon>
       </p>
+      <h2>Namespace</h2>
+      <p>
+        <svgicon icon="arrow" width="50" height="50"></svgicon>
+        <svgicon icon="sora/arrow" width="50" height="50"></svgicon>
+        <svgicon icon="sora/fit/arrow" width="50" height="50"></svgicon>
+      </p>
     </div>
   </div>
 </template>

diff --git a/demo/src/icons/arrow.js b/demo/src/icons/arrow.js
@@ -1,10 +1,10 @@
 
 var icon = require('vue-svgicon')
 icon.register({
-    'arrow': {
-        width: 4,
-        height: 7,
-        viewBox: '0 0 4 7',
-        data: '<path pid="0" d="M.702 1.006C.51.813.354.888.354 1.154v5.08c0 .275.163.334.348.149l2.34-2.34a.5.5 0 0 0 0-.697l-2.34-2.34z" fill-rule="evenodd"/>'
-    }
+  'arrow': {
+    width: 4,
+    height: 7,
+    viewBox: '0 0 4 7',
+    data: '<path pid="0" d="M.702 1.006C.51.813.354.888.354 1.154v5.08c0 .275.163.334.348.149l2.34-2.34a.5.5 0 0 0 0-.697l-2.34-2.34z" fill-rule="evenodd"/>'
+  }
 })
diff --git a/demo/src/icons/clock.js b/demo/src/icons/clock.js
@@ -1,10 +1,10 @@
 
 var icon = require('vue-svgicon')
 icon.register({
-    'clock': {
-        width: 16,
-        height: 16,
-        viewBox: '0 0 16 16',
-        data: '<g fill-rule="evenodd"><circle pid="0" cx="8" cy="8" r="8"/><g stroke-linecap="round"><path pid="1" d="M7.257 3.625V9.04M7.262 9.128h4.782"/></g></g>'
-    }
+  'clock': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    data: '<g fill-rule="evenodd"><circle pid="0" cx="8" cy="8" r="8"/><g stroke-linecap="round"><path pid="1" d="M7.257 3.625V9.04M7.262 9.128h4.782"/></g></g>'
+  }
 })
diff --git a/demo/src/icons/colorwheel.js b/demo/src/icons/colorwheel.js
diff --git a/demo/src/icons/index.js b/demo/src/icons/index.js
@@ -1,4 +1,6 @@
 require('./arrow')
 require('./clock')
 require('./colorwheel')
+require('./sora/arrow')
+require('./sora/fit/arrow')
 require('./vue')
diff --git a/demo/src/icons/sora/arrow.js b/demo/src/icons/sora/arrow.js
@@ -0,0 +1,10 @@
+
+var icon = require('vue-svgicon')
+icon.register({
+  'sora/arrow': {
+    width: 200,
+    height: 200,
+    viewBox: '0 0 1024 1024',
+    data: '<defs/><path pid="0" d="M165.39 594.774h287.782v263.292l430.622-359.694-430.62-359.706v230.242H165.39v225.866z"/>'
+  }
+})
diff --git a/demo/src/icons/sora/fit/arrow.js b/demo/src/icons/sora/fit/arrow.js
@@ -0,0 +1,10 @@
+
+var icon = require('vue-svgicon')
+icon.register({
+  'sora/fit/arrow': {
+    width: 254.688,
+    height: 200,
+    viewBox: '0 0 1304 1024',
+    data: '<defs/><path pid="0" d="M552.588 0h88.622c137.03 128.838 268.102 264.378 401.408 396.94v20.852C913.036 557.056 778.985 691.107 638.976 819.2h-87.878C654.615 689.617 764.09 564.503 881.012 446.836c-293.422 1.49-587.59-.744-881.012.745v-75.217c293.423 0 586.845-1.49 880.268 0C763.345 255.44 655.36 129.583 552.588 0z"/>'
+  }
+})
diff --git a/demo/src/icons/vue.js b/demo/src/icons/vue.js
@@ -1,10 +1,10 @@
 
 var icon = require('vue-svgicon')
 icon.register({
-    'vue': {
-        width: 2500,
-        height: 2158,
-        viewBox: '0 0 256 221',
-        data: '<path pid="0" d="M0 0l128 220.8L256 0h-51.2L128 132.48 50.56 0H0z"/><path pid="1" d="M50.56 0L128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56z"/>'
-    }
+  'vue': {
+    width: 2500,
+    height: 2158,
+    viewBox: '0 0 256 221',
+    data: '<path pid="0" d="M0 0l128 220.8L256 0h-51.2L128 132.48 50.56 0H0z"/><path pid="1" d="M50.56 0L128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56z"/>'
+  }
 })
diff --git a/demo/svg/sora/arrow.svg b/demo/svg/sora/arrow.svg
diff --git a/demo/svg/sora/fit/arrow.svg b/demo/svg/sora/fit/arrow.svg
diff --git a/test/component.test.js b/test/component.test.js
@@ -1,7 +1,7 @@
 /**
- * 
+ *
  * @author vfasky<[email protected]>
- * 
+ *
  **/
 'use strict'
 
@@ -55,4 +55,4 @@ describe('vue-svgion Test Case', () => {
 
     })
 
-})
+})