fix: when componentName is kebabCase, the svg will be shaked

Jevon617 · May 29, 2023 · cc95fa3 · cc95fa3
1 parent febf086
commit cc95fa3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/examples/vue3-vite/App.vue b/examples/vue3-vite/App.vue
@@ -3,8 +3,14 @@
 
 <template>
   <div>
-    <MySvgIcon name="icon-common-logo" style="margin-right: 20px;" />
-    <MySvgIcon name="icon-icon-addUser" style="margin-right: 20px;" />
+    <MySvgIcon
+      name="icon-common-logo"
+      style="margin-right: 20px;"
+    />
+    <my-svg-icon
+      name="icon-icon-addUser"
+      style="margin-right: 20px;"
+    />
     <MySvgIcon name="icon-icon-card2" style="margin-right: 20px;" />
   </div>
 </template>

diff --git a/src/core/scan.ts b/src/core/scan.ts
@@ -2,6 +2,7 @@ import fs from 'node:fs/promises'
 import path from 'node:path'
 import fg from 'fast-glob'
 import type { Options } from '../types'
+import { tranfromToKebabCase } from './utils'
 
 export default async function scanUsedSvgNames(options: Options) {
   const { componentName, scanGlob, iconDir, scanStrategy, symbolIdFormatter, prefix } = options
@@ -27,10 +28,10 @@ export default async function scanUsedSvgNames(options: Options) {
 
     if (scanStrategy === 'component') {
       const svgCompnentRE = new RegExp(
-        `\\<\\s*${componentName}[^\\<]+name=[\\"\\'](\\S+)[\\"\\'][^\\<]*\\/\\>`, 'g',
+        `\\<\\s*(${tranfromToKebabCase(componentName!)}|${componentName})[^\\<]+name=[\\"\\'](\\S+)[\\"\\'][^\\<]*\\/\\>`, 'g',
       )
       svgNameMatches = code.map((c) => {
-        return Array.from(c.matchAll(svgCompnentRE)).map(match => match[1])
+        return Array.from(c.matchAll(svgCompnentRE)).map(match => match[2])
       })
     }
     else {

diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -67,3 +67,16 @@ export function transformStyleStrToObject(styleStr: string): Record<string, stri
     return ruleMap
   }, {})
 }
+
+export function tranfromToKebabCase(str: string) {
+  const arr = str.trim().split('')
+  const result = arr.map((item, index) => {
+    if (index === 0)
+      return `${item.toLowerCase()}`
+    else if (item.toUpperCase() === item)
+      return `-${item.toLowerCase()}`
+    else
+      return item
+  }).join('')
+  return result
+}