Fix/escape char generate icons scripts

.eslintrc.json

@@ -16,6 +16,7 @@
     "createDefaultProgram": true
   },
   "rules": {},
+  "ignorePatterns": ["__mocks__/"],
   "overrides": [
     {
       "files": ["**/*.ts?(x)", "**/*.js?(x)"],

__mocks__/svgrMock.js

@@ -0,0 +1,7 @@
+import { forwardRef } from 'react'
+
+const SvgrMock = forwardRef((props, ref) => <span ref={ref} {...props} />)
+
+export const ReactComponent = SvgrMock
+
+export default SvgrMock

jest.config.js

@@ -48,5 +48,17 @@ const customJestConfig = {
   coverageProvider: 'v8',
 }
 
-// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
-module.exports = createJestConfig(customJestConfig)
+const jestConfig = async () => {
+  const nextJestConfig = await createJestConfig(customJestConfig)()
+
+  return {
+    ...nextJestConfig,
+    moduleNameMapper: {
+      '\\.svg': '<rootDir>/__mocks__/svgrMock.js',
+      // Workaround to put our SVG mock first
+      ...nextJestConfig.moduleNameMapper,
+    },
+  }
+}
+
+module.exports = jestConfig

scripts/utils.js

@@ -16,7 +16,7 @@ const generateIconComponentContent = (componentName, path) => {
     `
 // This file is generated using scripts/generate-icon-components/utils.js
 // Don't edit it manually
-import ${componentName} from '${path.replace('src/', '')}'
+import ${componentName} from '${path.replace(/\\/g, '/').replace('src/', '')}'
 
 export { ${componentName} };
 `,