refactor icons

Author: PanJiaChen

build/webpack.base.conf.js

@@ -56,9 +56,18 @@ module.exports = {
         loader: 'babel-loader?cacheDirectory',
         include: [resolve('src'), resolve('test')]
       },
+      {
+        test: /\.svg$/,
+        loader: 'svg-sprite-loader',
+        include: [resolve('src/icons')],
+        options: {
+          symbolId: 'icon-[name]'
+        }
+      },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'url-loader',
+        exclude: [resolve('src/icons')],
         query: {
           limit: 10000,
           name: utils.assetsPath('img/[name].[hash:7].[ext]')

package.json

@@ -75,6 +75,7 @@
     "script-loader": "0.7.0",
     "semver": "5.3.0",
     "style-loader": "0.17.0",
+    "svg-sprite-loader": "3.2.4",
     "url-loader": "0.5.8",
     "vue-loader": "13.0.4",
     "vue-style-loader": "3.0.1",

src/assets/iconfont/iconfont.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import IconSvg from '@/components/Icon-svg'// svg组件
+
+// register globally
+Vue.component('icon-svg', IconSvg)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./svg', false, /\.svg$/)
+
+requireAll(req)
+