refactor: use svg-sprite-loader

gulpfile.js

@@ -3,7 +3,6 @@ const gulp = require('gulp');
 const gutil = require('gulp-util');
 const gulpFilter = require('gulp-filter');
 const uglify = require('gulp-uglify');
-const svgSprite = require('gulp-svg-sprite');
 const plumber = require('gulp-plumber');
 const yaml = require('js-yaml');
 const webpack = require('webpack');
@@ -51,13 +50,13 @@ gulp.task('clean', () => del(['dist']));
 
 gulp.task('pack', ['manifest', 'copy-files', 'copy-i18n']);
 
-gulp.task('watch', ['pack', 'js-dev', 'svg'], () => {
+gulp.task('watch', ['pack', 'js-dev'], () => {
   gulp.watch(paths.manifest, ['manifest']);
   gulp.watch(paths.copy, ['copy-files']);
   gulp.watch(paths.locales.concat(paths.templates), ['copy-i18n']);
 });
 
-gulp.task('build', ['pack', 'js-prd', 'svg']);
+gulp.task('build', ['pack', 'js-prd']);
 
 gulp.task('js-dev', () => {
   webpack(webpackConfig).watch({}, webpackCallback);
@@ -109,19 +108,6 @@ gulp.task('copy-i18n', () => (
   .pipe(gulp.dest('dist/_locales'))
 ));
 
-gulp.task('svg', () => (
-  gulp.src('src/resources/icons/*.svg')
-  .pipe(svgSprite({
-    mode: {
-      symbol: {
-        dest: '',
-        sprite: 'sprite.svg',
-      },
-    },
-  }))
-  .pipe(gulp.dest('dist/public'))
-));
-
 /**
  * Load locale files (src/_locales/<lang>/message.[json|yml]), and
  * update them with keys in template files, then store in `message.yml`.

package.json

@@ -37,7 +37,6 @@
     "gulp": "^3.9.1",
     "gulp-filter": "^5.0.1",
     "gulp-plumber": "^1.1.0",
-    "gulp-svg-sprite": "^1.3.7",
     "gulp-uglify": "^3.0.0",
     "gulp-util": "^3.0.7",
     "html-webpack-plugin": "^2.30.1",
@@ -46,6 +45,7 @@
     "postcss-loader": "^2.0.6",
     "postcss-scss": "^1.0.2",
     "precss": "^2.0.0",
+    "svg-sprite-loader": "^3.5.1",
     "svgo": "^0.7.2",
     "tape": "^4.8.0",
     "through2": "^2.0.3",

scripts/webpack.base.conf.js

@@ -1,12 +1,9 @@
 const path = require('path');
 const webpack = require('webpack');
 const MinifyPlugin = require('babel-minify-webpack-plugin');
-const minifyPreset = require('babel-preset-minify');
 const vueLoaderConfig = require('./vue-loader.conf');
 const { IS_DEV, styleRule, definitions } = require('./utils');
 
-// const { MINIFY } = process.env;
-const MINIFY = true;
 const DIST = 'dist';
 const definePlugin = new webpack.DefinePlugin(definitions);
 
@@ -49,6 +46,11 @@ module.exports = {
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test')]
       },
+      {
+        test: /\.svg$/,
+        loader: 'svg-sprite-loader',
+        include: [resolve('src/resources/icons')],
+      },
       styleRule({
         fallback: 'vue-style-loader',
         loaders: ['postcss-loader'],
@@ -59,13 +61,6 @@ module.exports = {
   devtool: IS_DEV ? '#inline-source-map' : false,
   plugins: [
     definePlugin,
-    !IS_DEV && new MinifyPlugin({
-      mangle: !!MINIFY,
-    }, {
-      babili: (...args) => Object.assign(minifyPreset(...args), {
-        minified: !!MINIFY,
-        compact: !!MINIFY,
-      }),
-    }),
+    !IS_DEV && new MinifyPlugin(),
   ].filter(Boolean),
 };

src/common/sprite.js

@@ -1,9 +0,0 @@
-import { request } from '.';
-
-request('/public/sprite.svg')
-.then(({ data }) => {
-  const div = document.createElement('div');
-  div.style.display = 'none';
-  div.innerHTML = data;
-  document.body.insertBefore(div, document.body.firstChild);
-});

src/common/ui/icon.vue

@@ -3,6 +3,9 @@
 </template>
 
 <script>
+const requireIcon = require.context('src/resources/icons', false, /\.svg$/);
+requireIcon.keys().map(key => requireIcon(key));
+
 export default {
   props: ['name'],
 };

src/options/app.js

@@ -1,5 +1,4 @@
 import 'src/common/browser';
-import 'src/common/sprite';
 import Vue from 'vue';
 import { sendMessage, i18n, getLocaleString } from 'src/common';
 import options from 'src/common/options';

src/popup/app.js

@@ -1,5 +1,4 @@
 import 'src/common/browser';
-import 'src/common/sprite';
 import Vue from 'vue';
 import { i18n, sendMessage } from 'src/common';
 import handlers from 'src/common/handlers';