feat: use svg sprite instead svg assets

package.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"

src/components/SvgIcon.vue

@@ -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/index.js

@@ -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/components/SmartWidget.vue → src/packages/SmartWidget.vue

@@ -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/plugins/svg-icon.js

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

vue.config.js

@@ -16,6 +16,24 @@ const setChainWebpack = config => {
       .end()
     .use('babel')
     .loader('babel-loader')
+  // 设置 svg-sprite-loader
+  config.module
+    .rule('svg')
+    .exclude
+      .add(resolve('src/assets/img'))
+      .end()
+  config.module
+    .rule('icons')
+    .test(/\.svg$/)
+    .include
+      .add(resolve('src/assets/img'))
+      .end()
+    .use('svg-sprite-loader')
+    .loader('svg-sprite-loader')
+    .options({
+      symbolId: 'icon-[name]'
+    })
+    .end()
   if (isProd) {
     /**
      * 清除性能警告
@@ -50,6 +68,9 @@ module.exports = {
   productionSourceMap: false,
   chainWebpack: config => setChainWebpack(config),
   configureWebpack: config => setConfigureWebpack(config),
+  css: {
+    extract: false
+  },
   devServer: {
     port: 8181,
     open: true,