feat: Add SVG sprite pipeline and switch to sprite-based icons

KapilSachdev · KapilSachdev · commit 70e2fe193af8 · 2025-11-03T10:44:46.000+05:30
- When moving from element-ui to element plus, we lost the built-in icon font. Element plus has icon library which is Vue specific. To avoid dependency, we are switching to an SVG sprite approach for icons as we only need a few icons.
- Integrate an in-house SvgSpritePlugin into build/webpack.config.js
  - Special handling for svg icons loading (include iconDir, support ?inline)
- Add UI icon SVGs in use
- update components to use sprite &lt;svg&gt;&lt;use href="/asset/sprite.svg#..."&gt;
diff --git a/build/webpack.config.js b/build/webpack.config.js
@@ -3,8 +3,10 @@ const { VueLoaderPlugin } = require('vue-loader');
 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 iconDir = path.resolve(__dirname, '../src/asset/icon');
 
 module.exports = (env, argv) => {
   const isDev = argv.mode === 'development';
@@ -78,8 +80,28 @@ module.exports = (env, argv) => {
               }
             ]
           },
+          // SVG for Sprite Generation
           {
-            test: /\.(svg|html)$/,
+            test: /\.svg$/,
+            include: iconDir,
+            resourceQuery: { not: [/inline/] }, // DOES NOT match '?inline'
+            type: 'asset/source'
+          },
+          // SVG for Raw Inline Use (Using ?inline suffix)
+          {
+            test: /\.svg$/,
+            include: iconDir,
+            resourceQuery: /inline/, // Matches imports like '...share.svg?inline'
+            type: 'asset/source'
+          },
+          // Catch-all for other SVGs (logos, etc.) outside the icon directory
+          {
+            test: /\.svg$/,
+            exclude: iconDir,
+            type: 'asset/resource'
+          },
+          {
+            test: /\.html$/,
             use: [
               {
                 loader: 'html-loader',
@@ -116,6 +138,10 @@ module.exports = (env, argv) => {
         vue: 'Vue'
       },
       plugins: [
+        new SvgSpritePlugin({
+          spriteFilename: '../asset/sprite.svg',
+          iconDir: iconDir
+        }),
         new webpack.DefinePlugin({
           // It can be used in the code directly.
           CONFIG_LOCAL: JSON.stringify(configLocal)
diff --git a/src/asset/icon/ui/camera.svg b/src/asset/icon/ui/camera.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="currentColor" d="M160 224a64 64 0 0 0-64 64v512a64 64 0 0 0 64 64h704a64 64 0 0 0 64-64V288a64 64 0 0 0-64-64H748.416l-46.464-92.672A64 64 0 0 0 644.736 96H379.328a64 64 0 0 0-57.216 35.392L275.776 224zm352 435.2a115.2 115.2 0 1 0 0-230.4 115.2 115.2 0 0 0 0 230.4m0 140.8a256 256 0 1 1 0-512 256 256 0 0 1 0 512"></path>
+</svg>
diff --git a/src/asset/icon/ui/document.svg b/src/asset/icon/ui/document.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"></path>
+</svg>
diff --git a/src/asset/icon/ui/download.svg b/src/asset/icon/ui/download.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path>
+</svg>
diff --git a/src/asset/icon/ui/loading.svg b/src/asset/icon/ui/loading.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248m452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248M828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0"></path>
+</svg>
diff --git a/src/asset/icon/ui/setting.svg b/src/asset/icon/ui/setting.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="currentColor" d="M600.704 64a32 32 0 0 1 30.464 22.208l35.2 109.376c14.784 7.232 28.928 15.36 42.432 24.512l112.384-24.192a32 32 0 0 1 34.432 15.36L944.32 364.8a32 32 0 0 1-4.032 37.504l-77.12 85.12a357 357 0 0 1 0 49.024l77.12 85.248a32 32 0 0 1 4.032 37.504l-88.704 153.6a32 32 0 0 1-34.432 15.296L708.8 803.904c-13.44 9.088-27.648 17.28-42.368 24.512l-35.264 109.376A32 32 0 0 1 600.704 960H423.296a32 32 0 0 1-30.464-22.208L357.696 828.48a352 352 0 0 1-42.56-24.64l-112.32 24.256a32 32 0 0 1-34.432-15.36L79.68 659.2a32 32 0 0 1 4.032-37.504l77.12-85.248a357 357 0 0 1 0-48.896l-77.12-85.248A32 32 0 0 1 79.68 364.8l88.704-153.6a32 32 0 0 1 34.432-15.296l112.32 24.256c13.568-9.152 27.776-17.408 42.56-24.64l35.2-109.312A32 32 0 0 1 423.232 64H600.64zm-23.424 64H446.72l-36.352 113.088-24.512 11.968a294 294 0 0 0-34.816 20.096l-22.656 15.36-116.224-25.088-65.28 113.152 79.68 88.192-1.92 27.136a293 293 0 0 0 0 40.192l1.92 27.136-79.808 88.192 65.344 113.152 116.224-25.024 22.656 15.296a294 294 0 0 0 34.816 20.096l24.512 11.968L446.72 896h130.688l36.48-113.152 24.448-11.904a288 288 0 0 0 34.752-20.096l22.592-15.296 116.288 25.024 65.28-113.152-79.744-88.192 1.92-27.136a293 293 0 0 0 0-40.256l-1.92-27.136 79.808-88.128-65.344-113.152-116.288 24.96-22.592-15.232a288 288 0 0 0-34.752-20.096l-24.448-11.904L577.344 128zM512 320a192 192 0 1 1 0 384 192 192 0 0 1 0-384m0 64a128 128 0 1 0 0 256 128 128 0 0 0 0-256"></path>
+</svg>
diff --git a/src/asset/icon/ui/share.svg b/src/asset/icon/ui/share.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="currentColor" d="m679.872 348.8-301.76 188.608a127.8 127.8 0 0 1 5.12 52.16l279.936 104.96a128 128 0 1 1-22.464 59.904l-279.872-104.96a128 128 0 1 1-16.64-166.272l301.696-188.608a128 128 0 1 1 33.92 54.272z"></path>
+</svg>
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
@@ -317,11 +317,14 @@
                 <template #label>
                   <span>
                     {{ 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>
                 </template>
                 <span v-if="isPRReviewLoading">{{
@@ -384,11 +387,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"
@@ -650,7 +656,7 @@ function updateOptionOutline() {
         : `https://echarts.apache.org/${lang}/option.html#${hash.join('.')}`;
       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}"><i><svg role="img" class="icon icon-document"><use href="/asset/sprite.svg#document"></use></svg></i></a>`;
     },
     expandOnCreatedAndUpdated(path) {
       return path.length === 0 || (path[0] === 'series' && path.length <= 1);
@@ -980,7 +986,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;
 
diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue
@@ -46,8 +46,10 @@
           <template #reference>
             <span class="render-config-trigger">
               <el-button size="small">
-                {{ t('editor.renderCfgTitle')
-                }}<i class="el-icon-setting el-icon--right"></i>
+                {{ t('editor.renderCfgTitle') }}
+                <svg role="img" class="icon ml-4">
+                  <use href="/asset/sprite.svg#setting"></use>
+                </svg>
               </el-button>
             </span>
           </template>
@@ -108,27 +110,30 @@
       <div class="left-buttons">
         <template v-if="inEditor && !shared.isMobile">
           <el-button
-            icon="el-icon-download"
             size="small"
             @click="downloadExample"
             :title="t('editor.download') + ' (HTML)'"
           >
-            {{ t('editor.download') }}
+            <svg role="img" class="icon mr-4">
+              <use href="/asset/sprite.svg#download"></use>
+            </svg>
+            <span>{{ t('editor.download') }}</span>
           </el-button>
-          <el-button
-            @click="screenshot"
-            icon="el-icon-camera-solid"
-            size="small"
-          >
-            {{ t('editor.screenshot') }}
+          <el-button @click="screenshot" size="small">
+            <svg role="img" class="icon mr-4">
+              <use href="/asset/sprite.svg#camera"></use>
+            </svg>
+            <span>{{ t('editor.screenshot') }}</span>
           </el-button>
           <el-button
             @click="share"
-            icon="el-icon-share"
             size="small"
             :title="t('editor.share.tooltip')"
           >
-            {{ t('editor.share.title') }}
+            <svg role="img" class="icon mr-4">
+              <use href="/asset/sprite.svg#share"></use>
+            </svg>
+            <span>{{ t('editor.share.title') }}</span>
           </el-button>
         </template>
       </div>
@@ -887,4 +892,17 @@ defineExpose({
     }
   }
 }
+
+.icon {
+  width: 12px;
+  height: 12px;
+}
+
+.ml-4 {
+  margin-left: 4px;
+}
+
+.mr-4 {
+  margin-right: 4px;
+}
 </style>
diff --git a/src/explore/Explore.vue b/src/explore/Explore.vue
@@ -105,10 +105,10 @@ const icons = {};
   'rich',
   'graphic'
 ].forEach(function (category) {
-  icons[category] = require('../asset/icon/' + category + '.svg');
+  icons[category] = require('../asset/icon/' + category + '.svg?inline');
 });
 
-const glIcon = require('../asset/icon/gl.svg');
+const glIcon = require('../asset/icon/gl.svg?inline');
 [
   'globe',
   'bar3D',
diff --git a/tool/plugin-svg-sprite.js b/tool/plugin-svg-sprite.js
@@ -0,0 +1,97 @@
+const { RawSource } = require('webpack-sources');
+const path = require('path');
+const fs = require('fs');
+
+class SvgSpritePlugin {
+  constructor(options = {}) {
+    this.spriteFilename = options.spriteFilename || 'sprite.svg';
+    this.iconDir = options.iconDir;
+  }
+
+  // Helper to process raw SVG string into a <symbol>
+  processSvg(filePath, rawSvg) {
+    const id = path
+      .basename(filePath, '.svg')
+      .toLowerCase()
+      .replace(/[^a-z0-9_-]/g, '-');
+
+    // Remove XML declaration and comments
+    let svg = rawSvg.replace(/<\?xml.*?\?>/g, '').replace(/<!--.*?-->/gs, '');
+
+    // Extract viewBox (crucial for icon scaling)
+    const viewBoxMatch = svg.match(/viewBox="([^"]*)"/);
+    if (!viewBoxMatch) {
+      console.warn(
+        `Warning: SVG file '${filePath}' is missing a viewBox attribute. Skipping.`
+      );
+      return null;
+    }
+    const viewBox = viewBoxMatch[1];
+
+    // WARNING: Simple regex is used here. For production, a reliable XML parser is safer.
+    const symbolContent = svg
+      .replace(/<\/?svg[^>]*>/g, '') // Remove opening/closing <svg> tags
+      .replace(/xlink:href/g, 'href') // xlink:href causes parse error and icons do not load
+      .replace(/\s+/g, ' ') // Minify: collapse whitespace
+      .replace(/>\s+</g, '><') // Minify: remove spaces between tags
+      .trim();
+
+    return `<symbol id="${id}" viewBox="${viewBox}">${symbolContent}</symbol>`;
+  }
+
+  // Recursively get all .svg files
+  getSvgFiles(dir) {
+    let files = [];
+    const items = fs.readdirSync(dir);
+    for (const item of items) {
+      const fullPath = path.join(dir, item);
+      const stat = fs.statSync(fullPath);
+      if (stat.isDirectory()) {
+        files = files.concat(this.getSvgFiles(fullPath));
+      } else if (item.endsWith('.svg')) {
+        files.push(fullPath);
+      }
+    }
+    return files;
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap('SvgSpritePlugin', (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: 'SvgSpritePlugin',
+          stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+        },
+        (assets) => {
+          if (!this.iconDir || !fs.existsSync(this.iconDir)) {
+            return;
+          }
+
+          const svgFiles = this.getSvgFiles(this.iconDir);
+          let symbols = [];
+
+          for (const filePath of svgFiles) {
+            const rawSvg = fs.readFileSync(filePath, 'utf-8');
+            const symbol = this.processSvg(filePath, rawSvg);
+            if (symbol) {
+              symbols.push(symbol);
+            }
+          }
+
+          // 4. Assemble the final sprite content
+          const spriteContent = `<svg xmlns="http://www.w3.org/2000/svg" style="display:none">${symbols.join(
+            '\n'
+          )}</svg>`;
+
+          // 5. Emit the single sprite file to the build directory
+          compilation.emitAsset(
+            this.spriteFilename,
+            new RawSource(spriteContent)
+          );
+        }
+      );
+    });
+  }
+}
+
+module.exports = SvgSpritePlugin;
