fix: invalid characters in component name (#332)

Fix #331
gregberge · Aug 6, 2019 · 4b4bd2c · 4b4bd2c · vercel · Aug 6, 2019
1 parent 28f5285
commit 4b4bd2c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/core/src/state.js b/packages/core/src/state.js
@@ -1,11 +1,16 @@
 import path from 'path'
 import camelcase from 'camelcase'
 
+const validCharacters = /[^a-zA-Z0-9_-]/g
+
 function getComponentName(state) {
   if (!state.filePath) return 'SvgComponent'
-  const pascalCaseFileName = camelcase(path.parse(state.filePath).name, {
-    pascalCase: true,
-  })
+  const pascalCaseFileName = camelcase(
+    path.parse(state.filePath).name.replace(validCharacters, ''),
+    {
+      pascalCase: true,
+    },
+  )
   return `Svg${pascalCaseFileName}`
 }
 

diff --git a/packages/core/src/state.test.js b/packages/core/src/state.test.js
@@ -20,6 +20,10 @@ describe('state', () => {
         filePath: '1_big_svg.svg',
         componentName: 'Svg1BigSvg',
       })
+      expect(expandState({ filePath: 'a&b~c-d_e.svg' })).toEqual({
+        filePath: 'a&b~c-d_e.svg',
+        componentName: 'SvgAbcDE',
+      })
     })
   })
 })