fix: 所有 icon 替换为 svg, 修复 iconfont 样式影响问题 #7

examples/webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path')
 const webpack = require('webpack')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ImportHttpWebpackPlugin = require('import-http/webpack')
 
 const { debug } = require('yargs').argv
 const aliasMap = {
@@ -53,6 +54,18 @@ module.exports = {
       {
         test: /\.(css|scss)$/,
         use: ['vue-style-loader', 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.(jpe?g|png|gif)(\?.*)?$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+              name: 'static/image/[name].[hash:4].[ext]'
+            }
+          }
+        ]
       }
     ]
   },
@@ -72,6 +85,7 @@ module.exports = {
   plugins: [
     new VueLoaderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
+    new ImportHttpWebpackPlugin(),
     new HtmlWebpackPlugin({
       template: 'examples/index.html'
     })

package.json

@@ -69,6 +69,7 @@
     "file-loader": "^4.0.0",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^4.2.3",
+    "import-http": "^0.3.1",
     "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "sass": "^1.22.3",

src/ImagePreview.vue

@@ -27,18 +27,18 @@
             @wheel="wheelScale">
         </div>
         <div class="pos-tip">{{ currentPosition + 1 }} / {{ totalCount }}</div>
-        <div class="close hover-icon" @click="close"><i class="iconfont icon-guanbi" /></div>
-        <div class="arrow arrow-prev hover-icon" @click="updatePosition(-1)"><i class="iconfont icon-shangyizhang" /></div>
-        <div class="arrow arrow-next hover-icon" @click="updatePosition(1)"><i class="iconfont icon-xiayizhang" /></div>
+        <div class="close hover-icon" @click="close"><SvgIcon class="icon" name="guanbi" /></div>
+        <div class="arrow arrow-prev hover-icon" @click="updatePosition(-1)"><SvgIcon class="icon" name="shangyizhang" /></div>
+        <div class="arrow arrow-next hover-icon" @click="updatePosition(1)"><SvgIcon class="icon" name="xiayizhang" /></div>
         <div class="operate-area">
           <slot name="operate">
-            <i class="iconfont icon-actionicon hover-icon" @click="increaseScale" />
-            <i class="iconfont icon-suoxiao hover-icon" @click="decreaseScale" />
+            <SvgIcon class="icon hover-icon" name="actionicon" @click="increaseScale" />
+            <SvgIcon class="icon hover-icon" name="suoxiao" @click="decreaseScale" />
             <div class="divide" />
-            <i class="iconfont icon-xuanzhuan hover-icon" @click="leftRotate" />
-            <i class="iconfont icon-xuanzhuan-r hover-icon" @click="rightRotate" />
+            <SvgIcon class="icon hover-icon" name="xuanzhuan" @click="leftRotate" />
+            <SvgIcon class="icon hover-icon" name="xuanzhuan-r" @click="rightRotate" />
             <div class="divide" />
-            <i class="iconfont icon-zhongzhi hover-icon" @click="onResetClick" />
+            <SvgIcon class="icon hover-icon" name="zhongzhi" @click="onResetClick" />
           </slot>
         </div>
         <transition name="fade">
@@ -57,6 +57,8 @@
 
 <script>
 import Snippet from './Snippet'
+import SvgIcon from './SvgIcon'
+
 import { forbiddenBodyScroll } from './util'
 
 const DEFAULT_MAX_SCALE = 5 // 最大放大比例
@@ -77,7 +79,8 @@ const validateNumber = prop => val => {
 export default {
   name: 'ImagePreview',
   components: {
-    Snippet
+    Snippet,
+    SvgIcon
   },
   props: {
     visible: {
@@ -559,7 +562,7 @@ export default {
       background-color: rgba(0, 0, 0, 0.3);
     }
 
-    .iconfont {
+    .icon {
       font-size: 23px;
       font-weight: bold;
     }
@@ -584,7 +587,7 @@ export default {
       right: 0;
     }
 
-    .iconfont {
+    .icon {
       font-size: 32px;
       font-weight: bold;
     }
@@ -600,10 +603,10 @@ export default {
     background-color: rgba(0, 0, 0, 0.3);
     color: rgba(51, 51, 51, 0.4);
 
-    .iconfont {
+    .icon {
       font-size: 24px;
 
-      & + .iconfont {
+      & + .icon {
         margin-left: 24px;
       }
     }

src/SvgIcon.vue

@@ -0,0 +1,38 @@
+<template>
+  <svg class="svg-icon" aria-hidden="true" @click="handleClick">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+import 'https://at.alicdn.com/t/font_1239600_7r0qv8bues.js'
+export default {
+  name: 'SvgIcon',
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    iconName () {
+      return `#icon-${this.name}`
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$listeners.click && this.$listeners.click()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

webpack.config.js

@@ -5,6 +5,7 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+const ImportHttpWebpackPlugin = require('import-http/webpack')
 
 const { analysis } = require('yargs').argv
 
@@ -83,7 +84,8 @@ const webpackConfig = {
     new UglifyJsPlugin(),
     new OptimizeCssAssetsPlugin(),
     new webpack.NamedModulesPlugin(),
-    ...(analysis ? [new BundleAnalyzerPlugin()] : [])
+    ...(analysis ? [new BundleAnalyzerPlugin()] : []),
+    new ImportHttpWebpackPlugin()
   ]
 }
 module.exports = webpackConfig

yarn.lock

@@ -1404,6 +1404,11 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
+builtin-modules@^3.0.0:
+  version "3.1.0"
+  resolved "http://bnpm.byted.org/builtin-modules/download/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
+  integrity sha1-qtl8FRMet2tltQ7yCOdYTNdqdIQ=
+
 builtin-status-codes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
@@ -2631,6 +2636,11 @@ entities@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
 
+env-paths@^2.0.0:
+  version "2.2.0"
+  resolved "http://bnpm.byted.org/env-paths/download/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
+  integrity sha1-zcpVfcAJFSkX1hZuL+vh8DloXkM=
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -3761,6 +3771,16 @@ import-fresh@^3.1.0:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
+import-http@^0.3.1:
+  version "0.3.1"
+  resolved "http://bnpm.byted.org/import-http/download/import-http-0.3.1.tgz#b5af72d0ecb29b44d2881e47e8dc405195ee6a47"
+  integrity sha1-ta9y0Oyym0TSiB5H6NxAUZXuakc=
+  dependencies:
+    builtin-modules "^3.0.0"
+    env-paths "^2.0.0"
+    mkdirp "^0.5.1"
+    node-fetch "^2.3.0"
+
 import-local@2.0.0, import-local@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@@ -4796,6 +4816,11 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+node-fetch@^2.3.0:
+  version "2.6.0"
+  resolved "http://bnpm.byted.org/node-fetch/download/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
+  integrity sha1-5jNFY4bUqlWGP2dqerDaqP3ssP0=
+
 node-forge@0.7.5:
   version "0.7.5"
   resolved "https://registry.npm.taobao.org/node-forge/download/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"