优化自定义图标功能，修复上线后无法展示自定义图标的问题。 (#1625)

* 修改自定义图标使用方式 * 优化自定义icon功能
2026-09-21 20:35:16 +00:00 · 2024-01-16 22:07:59 +08:00
parent d41394c70a
commit a2269bcdd5
6 changed files with 113 additions and 19 deletions
@@ -0,0 +1,61 @@
+import { readFileSync, readdirSync } from 'fs'
+const svgTitle = /<svg([^>+].*?)>/
+const clearHeightWidth = /(width|height)="([^>+].*?)"/g
+const hasViewBox = /(viewBox="[^>+].*?")/g
+const clearReturn = /(\r)|(\n)/g
+function findSvgFile(dir) {
+  const svgRes = []
+  const dirents = readdirSync(dir, {
+    withFileTypes: true
+  })
+  for (const dirent of dirents) {
+    if (dirent.isDirectory()) {
+      svgRes.push(...findSvgFile(dir + dirent.name + '/'))
+    } else {
+      const svg = readFileSync(dir + dirent.name)
+        .toString()
+        .replace(clearReturn, '')
+        .replace(svgTitle, ($1, $2) => {
+          // console.log(++i)
+          // console.log(dirent.name)
+          let width = 0
+          let height = 0
+          let content = $2.replace(clearHeightWidth, (s1, s2, s3) => {
+            if (s2 === 'width') {
+              width = s3
+            } else if (s2 === 'height') {
+              height = s3
+            }
+            return ''
+          })
+          if (!hasViewBox.test($2)) {
+            content += `viewBox="0 0 ${width} ${height}"`
+          }
+          return `<symbol id="${dirent.name.replace('.svg', '')}" ${content}>`
+        })
+        .replace('</svg>', '</symbol>')
+      svgRes.push(svg)
+    }
+  }
+  return svgRes
+}
+export const svgBuilder = (path) => {
+  if (path === '') return
+  const res = findSvgFile(path)
+  // console.log(res.length)
+  // const res = []
+  return {
+    name: 'svg-transform',
+    transformIndexHtml(html) {
+      return html.replace(
+        '<body>',
+        `
+          <body>
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">
+              ${res.join('')}
+            </svg>
+        `
+      )
+    }
+  }
+}