feat: use svg sprite instead svg assets

Author: xiaoluoboding

package-lock.json

@@ -21,11 +21,11 @@
     "lint": "vue-cli-service lint"
   },
   "peerDependencies": {
-    "vue": "^2.5.0",
-    "vue-grid-layout": "^2.1.13"
+    "vue": "^2.5.0"
   },
   "dependencies": {
-    "screenfull": "^4.2.1"
+    "screenfull": "^4.2.1",
+    "vue-grid-layout": "^2.3.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.9.0",
@@ -42,10 +42,10 @@
     "less-loader": "^4.1.0",
     "postcss-import": "^12.0.1",
     "postcss-url": "^8.0.0",
+    "svg-sprite-loader": "^4.1.6",
     "v-tooltip": "^2.0.2",
     "ve-charts": "^0.8.1",
     "vue": "^2.6.10",
-    "vue-grid-layout": "^2.3.4",
     "vue-router": "^3.0.3",
     "vue-template-compiler": "^2.6.10",
     "vuex": "^3.0.1"

package.json

@@ -0,0 +1,43 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconClass" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconName: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    iconClass () {
+      return `#icon-${this.iconName}`
+    },
+    svgClass () {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

src/assets/img/fullscreen.svg

@@ -1,5 +1,6 @@
-import SmartWidgetGrid from './components/SmartWidgetGrid'
-import SmartWidget from './components/SmartWidget'
+import './plugins/svg-icon'
+import SmartWidgetGrid from './packages/SmartWidgetGrid'
+import SmartWidget from './packages/SmartWidget'
 
 const components = [
   SmartWidgetGrid,

src/assets/img/refresh.svg

@@ -20,15 +20,15 @@
       <div class="widget-header__toolbar">
         <!-- collapse icon -->
         <a href="#" v-if="!isHasGroup && collapse && !isFullScreen" @click="isCollapsed=!isCollapsed">
-          <img :src="isCollapsed ? require('../assets/img/expand.svg') : require('../assets/img/collapse.svg')">
+          <svg-icon :icon-name="isCollapsed ? 'expand' : 'collapse'" />
         </a>
         <!-- fullscreen icon -->
         <a href="#" v-if="fullscreen" @click="onChooseAction">
-          <img :src="isFullScreen ? require('../assets/img/unfullscreen.svg') : require('../assets/img/fullscreen.svg')">
+          <svg-icon :icon-name="isFullScreen ? 'unfullscreen' : 'fullscreen'" />
         </a>
         <!-- refresh icon -->
         <a href="#" v-if="refresh && !isFullScreen" @click="$emit('on-refresh')">
-          <img :src="require('../assets/img/refresh.svg')" alt="">
+          <svg-icon icon-name="refresh" />
         </a>
         <slot name="toolbar"></slot>
       </div>
@@ -76,15 +76,18 @@ import screenfull from 'screenfull'
 import { generateUUID } from '../utils'
 
 // loading mask
-import LoadingMask from './LoadingMask'
+import LoadingMask from '../components/LoadingMask'
 // collapse transition
-import CollapseTransition from './collapse-transition'
+import CollapseTransition from '../components/collapse-transition'
+// svg icon
+import SvgIcon from '../components/SvgIcon'
 
 export default {
   name: 'SmartWidget',
   components: {
     LoadingMask,
-    CollapseTransition
+    CollapseTransition,
+    SvgIcon
   },
   inject: {
     layout: {

src/assets/img/unfullscreen.svg

@@ -0,0 +1,3 @@
+const req = require.context('../assets/img', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)