refactor: Replace element ui icons with inhouse SVGs

build/webpack.config.js

@@ -3,8 +3,10 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const fs = require('fs');
+const SvgSpritePlugin = require('../tool/plugin-svg-sprite');
 
 const distPath = path.resolve(__dirname, '../public');
+const svgPath = path.resolve(__dirname, '../src/asset/icon');
 
 
 module.exports = (env, argv) => {
@@ -77,7 +79,11 @@ module.exports = (env, argv) => {
             ]
           },
           {
-            test: /\.(svg|html)$/,
+            test: /\.svg$/,
+            type: 'asset/source'
+          },
+          {
+            test: /\.html$/,
             use: [
               {
                 loader: 'html-loader',
@@ -114,6 +120,10 @@ module.exports = (env, argv) => {
         vue: 'Vue'
       },
       plugins: [
+        new SvgSpritePlugin({
+          spriteFilename: '../asset/sprite.svg',
+          svgPath: svgPath
+        }),
         new webpack.DefinePlugin({
           // It can be used in the code directly.
           CONFIG_LOCAL: JSON.stringify(configLocal),

src/common/SVGIcon.vue

@@ -0,0 +1,35 @@
+<template>
+  <svg
+    role="img"
+    class="svg-icon"
+    :class="className"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    <use :href="symbolHref"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SVGIcon',
+  props: {
+    name: { type: String, required: true },
+    size: { type: [Number, String], default: 12 },
+    className: { type: [String, Array, Object], default: '' }
+  },
+  computed: {
+    symbolHref() {
+      return `../asset/sprite.svg#${this.name}`;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.svg-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

src/editor/Editor.vue

@@ -51,50 +51,22 @@
                     'editor.pr.tooltip'
                   )}`"
                 >
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <path
-                      fill="currentColor"
-                      d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"
-                    />
-                  </svg>
+                  <SVGIcon name="github" />
                   <span>#{{ shared.prNumber }}</span>
                 </a>
                 <a
                   class="btn btn-sm codepen"
                   @click="toExternalEditor('CodePen')"
                   :title="$t('editor.openWithCodePen')"
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="none"
-                  >
-                    <path
-                      d="M21.838 8.445c0-.001-.001-.001 0 0l-.003-.004l-.001-.001v-.001a.809.809 0 0 0-.235-.228l-9.164-6.08a.834.834 0 0 0-.898 0L2.371 8.214A.786.786 0 0 0 2 8.897v6.16a.789.789 0 0 0 .131.448v.001l.002.002l.01.015v.002h.001l.001.001l.001.001c.063.088.14.16.226.215l9.165 6.082a.787.787 0 0 0 .448.139a.784.784 0 0 0 .45-.139l9.165-6.082a.794.794 0 0 0 .371-.685v-6.16a.793.793 0 0 0-.133-.452zm-9.057-4.172l6.953 4.613l-3.183 2.112l-3.771-2.536V4.273zm-1.592 0v4.189l-3.771 2.536l-3.181-2.111l6.952-4.614zm-7.595 6.098l2.395 1.59l-2.395 1.611v-3.201zm7.595 9.311l-6.96-4.617l3.195-2.15l3.765 2.498v4.269zm.795-5.653l-3.128-2.078l3.128-2.105l3.131 2.105l-3.131 2.078zm.797 5.653v-4.27l3.766-2.498l3.193 2.15l-6.959 4.618zm7.597-6.11l-2.396-1.611l2.396-1.59v3.201z"
-                      fill="currentColor"
-                    ></path>
-                  </svg>
+                  <SVGIcon name="codepen" />
                 </a>
                 <a
                   class="btn btn-sm codesandbox"
                   @click="toExternalEditor('CodeSandbox')"
                   :title="$t('editor.openWithCodeSandbox')"
                 >
-                  <svg
-                    viewBox="0 0 512 512"
-                    fill="none"
-                    stroke="currentColor"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M69 153.99L256 263.99M256 263.99L443 153.99M256 263.99V463.99M448 341.37V170.61C447.993 165.021 446.523 159.531 443.735 154.687C440.947 149.843 436.939 145.814 432.11 143L280.11 54.54C272.787 50.2765 264.464 48.0303 255.99 48.0303C247.516 48.0303 239.193 50.2765 231.87 54.54L79.89 143C75.0609 145.814 71.053 149.843 68.2652 154.687C65.4773 159.531 64.0068 165.021 64 170.61V341.37C64.0033 346.962 65.4722 352.456 68.2602 357.304C71.0482 362.152 75.058 366.185 79.89 369L231.89 457.46C239.215 461.718 247.537 463.96 256.01 463.96C264.483 463.96 272.805 461.718 280.13 457.46L432.13 369C436.958 366.182 440.964 362.148 443.748 357.301C446.533 352.453 447.999 346.96 448 341.37Z"
-                      stroke="currentColor"
-                      stroke-width="38"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    ></path>
-                  </svg>
+                  <SVGIcon name="codesandbox" class="fill-none" />
                 </a>
                 <a
                   class="btn btn-sm format"
@@ -103,40 +75,10 @@
                   :style="{ cursor: formatterReady ? '' : 'progress' }"
                   @click="format"
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
-                    />
-                  </svg>
+                  <SVGIcon name="format" class="stroke-current fill-none" />
                 </a>
                 <a class="btn btn-default btn-sm run" @click="disposeAndRun">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-                    />
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
+                  <SVGIcon name="play" class="stroke-current fill-none" />
                   <span>{{ $t('editor.run') }}</span>
                 </a>
               </div>
@@ -312,11 +254,14 @@
               <el-descriptions-item :span="4">
                 <span slot="label">
                   {{ $t('editor.prPreview.review') }}
-                  <i
+                  <svg
+                    role="img"
                     v-if="isPRReviewLoading"
-                    class="el-icon-loading"
+                    class="icon"
                     style="margin-left: 5px"
-                  ></i>
+                  >
+                    <use href="/asset/sprite.svg#loading"></use>
+                  </svg>
                 </span>
                 <span v-if="isPRReviewLoading">{{
                   $t('editor.prPreview.loadingReview')
@@ -378,11 +323,14 @@
                 <details @toggle="$event.target.open && loadPRDiff()">
                   <summary style="display: revert; cursor: pointer">
                     {{ $t('editor.prPreview.viewDiff') }}
-                    <i
+                    <svg
+                      role="img"
                       v-if="isPRDiffLoading"
-                      class="el-icon-loading"
+                      class="icon"
                       style="margin-left: 5px"
-                    ></i>
+                    >
+                      <use href="/asset/sprite.svg#loading"></use>
+                    </svg>
                   </summary>
                   <pre
                     class="pr-diff"
@@ -436,13 +384,15 @@ import { getScriptURLs, URL_PARAMS } from '../common/config';
 import { formatCode, loadScriptsAsync } from '../common/helper';
 import openWithCodePen from './sandbox/openwith/codepen';
 import openWithCodeSandbox from './sandbox/openwith/codesandbox';
+import SVGIcon from '../common/SVGIcon.vue';
 
 export default {
   components: {
     CodeAce,
     CodeMonaco,
     FullCodePreview,
-    Preview
+    Preview,
+    SVGIcon
   },
 
   data() {
@@ -481,13 +431,24 @@ export default {
     },
 
     hasVersionSince() {
-      return this.exampleConfig && this.exampleConfig.since
-        && compareVersions(this.shared.echartsFullVersion, this.exampleConfig.since) >= 0;
+      return (
+        this.exampleConfig &&
+        this.exampleConfig.since &&
+        compareVersions(
+          this.shared.echartsFullVersion,
+          this.exampleConfig.since
+        ) >= 0
+      );
     },
 
     versionSinceBanner() {
-      return this.$t('editor.bannerVersionRequire') + ' v' + this.exampleConfig.since + '+';
-    },
+      return (
+        this.$t('editor.bannerVersionRequire') +
+        ' v' +
+        this.exampleConfig.since +
+        '+'
+      );
+    }
   },
 
   mounted() {
@@ -642,7 +603,7 @@ export default {
               )}`;
           return !isObjOrArray
             ? `<a href="${link}" target="_blank" title="${tipTitle}">${name}</a>`
-            : `${name}<a href="${link}" target="_blank" title="${tipTitle}"><i class="el-icon-document"></i></a>`;
+            : `${name}<a href="${link}" target="_blank" title="${tipTitle}"><svg role="img" class="icon icon-document"><use href="/asset/sprite.svg#document"></use></svg></a>`;
         },
         expandOnCreatedAndUpdated(path) {
           return (
@@ -968,7 +929,7 @@ $handler-width: 15px;
   font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas',
     monospace;
 
-  .el-icon-document {
+  .icon-document {
     margin-left: 5px;
     font-size: 1rem;
 
@@ -1173,4 +1134,11 @@ $handler-width: 15px;
 
   background: $clr-bg;
 }
+.fill-none {
+  fill: none;
+}
+
+.stroke-current {
+  stroke: currentColor;
+}
 </style>