feat: use external svg file

build/build.icon.js

@@ -0,0 +1,10 @@
+var fs = require('fs')
+var path = require('path')
+var feather = require('feather-icons')
+
+var icons = Object.keys(feather.icons)
+  .map(key => `<symbol viewBox="${feather.icons[key].attrs.viewBox}" width="${feather.icons[key].attrs.width}" height="${feather.icons[key].attrs.height}" id="${key}">${feather.icons[key].toString()}</symbol>`);
+
+fs.writeFileSync(path.resolve(__dirname, '../static/icons.svg'), `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>${icons.join('')}</defs></svg>`);
+
+console.log(Object.keys(feather.icons).length + ' icon generated.')

package.json

@@ -15,6 +15,7 @@
     "unit": "jest --config test/unit/jest.conf.js --coverage",
     "test": "npm run unit",
     "lint": "eslint --ext .js,.vue src test/unit/specs",
+    "icon": "node build/build.icon.js",
     "build": "node build/build.js",
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
@@ -25,7 +26,6 @@
   },
   "author": "fireyy <fireyy@gmail.com>",
   "dependencies": {
-    "feather-icons": "^4.0.1",
     "nanoid": "^1.0.1",
     "spectre.css": "^0.5.0",
     "vue": "^2.5.11"
@@ -57,6 +57,7 @@
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^3.0.1",
     "extract-text-webpack-plugin": "^3.0.0",
+    "feather-icons": "^4.5.0",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "gh-pages": "^1.0.0",

src/App.vue

@@ -27,6 +27,7 @@ import navbar from './components/navbar.vue'
 import toolbar from './components/toolbar.vue'
 import panel from './components/panel/index.vue'
 import viewport from './components/viewport/index.vue'
+import loadSprite from './utils/load-sprite'
 
 export default {
   name: 'vue-page-designer',
@@ -49,6 +50,9 @@ export default {
       }
     }
   },
+  beforeCreate () {
+    loadSprite('http://p1cu7wuzw.bkt.clouddn.com/icons.svg', 'svgspriteit')
+  },
   created () {
     // 注册 widgets
     Vue.use(widget, {
@@ -137,4 +141,9 @@ export default {
   top: 4px;
   left: -36px;
 }
+#svgspriteit {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
 </style>

src/components/icon.vue

@@ -2,9 +2,6 @@
   <i :title="title" class="icon svg-icon" v-html="icon" @click="handleClick"></i>
 </template>
 <script>
-// TODO: feather-icons size
-import feather from 'feather-icons'
-
 export default {
   name: 'icon',
   props: {
@@ -15,7 +12,8 @@ export default {
   },
   computed: {
     icon () {
-      return this.svg || feather.icons[this.name].toSvg(this.options)
+      // <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smartphone"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12" y2="18"></line></svg>
+      return this.svg || `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use xlink:href="#${this.name}"></svg>`
     }
   },
   methods: {

src/components/uploader.vue

@@ -56,7 +56,7 @@ export default {
 
       files = Array.prototype.slice.call(this.uploader.files)
 
-      // TODO: 默认图片上传函数
+      // TODO: 默认图片上传函数 use fetch
       this.upload(files).then(res => {
         console.log('status: ', res.status)
         // 图片下载队列完成后执行回调

src/utils/load-sprite.js

@@ -0,0 +1,29 @@
+// Load a sprite
+export default function (url, id) {
+  var x = new XMLHttpRequest()
+
+  // If the id is set and sprite exists, bail
+  if (document.querySelector('#' + id)) {
+    return
+  }
+
+  // Create placeholder (to prevent loading twice)
+  var container = document.createElement('div')
+  container.setAttribute('hidden', '')
+  container.setAttribute('id', id)
+  document.body.insertBefore(container, document.body.childNodes[0])
+
+  // Check for CORS support
+  if ('withCredentials' in x) {
+    x.open('GET', url, true)
+  } else {
+    return
+  }
+
+  // Inject hidden div with sprite on load
+  x.onload = function () {
+    container.innerHTML = x.responseText
+  }
+
+  x.send()
+}

yarn.lock

@@ -2729,9 +2729,9 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-feather-icons@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.0.1.tgz#98f06032c08d5d01d4bd7e6188c60578118fbd7d"
+feather-icons@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.5.0.tgz#5c0a38fe4633e88a14cc8d7aa822e2591828027d"
   dependencies:
     classnames "^2.2.5"