From 4b4bd2cb4bbcd91d866e44f1ba21258939a3deb6 Mon Sep 17 00:00:00 2001
From: Chris Gibson <chris@chrisg.io>
Date: Tue, 6 Aug 2019 10:55:14 -0500
Subject: [PATCH] fix: invalid characters in component name (#332)

Fix #331
---
 packages/core/src/state.js      | 11 ++++++++---
 packages/core/src/state.test.js |  4 ++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/state.js b/packages/core/src/state.js
index 0db86354..ac1dbffe 100644
--- 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
index 4ced7d3d..26a304c3 100644
--- 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',
+      })
     })
   })
 })