fix: invalid characters in component name (#332)

Fix #331

Author: christopher-gibson

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}`
 }
 

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',
+      })
     })
   })
 })