feat: always prefix component name with "Svg"

Closes #190
gregberge · Sep 30, 2018 · f71aa7a · f71aa7a
1 parent 461492b
commit f71aa7a
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 64 deletions.
diff --git a/packages/cli/src/__snapshots__/index.test.js.snap b/packages/cli/src/__snapshots__/index.test.js.snap
@@ -3,7 +3,7 @@
 exports[`cli should not override config with cli defaults 1`] = `
 "import React from 'react'
 
-const File = () => <svg viewBox=\\"0 0 48 1\\" version={1.1} xmlnsXlink=\\"http://www.w3.org/1999/xlink\\">
+const SvgFile = () => <svg viewBox=\\"0 0 48 1\\" version={1.1} xmlnsXlink=\\"http://www.w3.org/1999/xlink\\">
   <title>
     Rectangle 5
   </title>
@@ -27,64 +27,64 @@ const File = () => <svg viewBox=\\"0 0 48 1\\" version={1.1} xmlnsXlink=\\"http:
 </svg>
 
 
-export default File
+export default SvgFile
 "
 `;
 
 exports[`cli should support --prettier-config as file 1`] = `
 "import React from 'react'
 
-const File = props => (
+const SvgFile = props => (
      <svg width={48} height={1} {...props}>
           <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
      </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support --prettier-config as json 1`] = `
 "import React from 'react'
 
-const File = props => (
+const SvgFile = props => (
      <svg width={48} height={1} {...props}>
           <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
      </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support --svgo-config as file 1`] = `
 "import React from 'react'
 
-const File = props => (
+const SvgFile = props => (
   <svg width={48} height={1} {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support --svgo-config as json 1`] = `
 "import React from 'react'
 
-const File = props => (
+const SvgFile = props => (
   <svg width={48} height={1} {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
@@ -134,117 +134,117 @@ Array [
 exports[`cli should support various args: --icon 1`] = `
 "import React from 'react'
 
-const File = props => (
+const SvgFile = props => (
   <svg viewBox=\\"0 0 48 1\\" width=\\"1em\\" height=\\"1em\\" {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support various args: --native --icon 1`] = `
 "import React from 'react'
 import Svg, { Path } from 'react-native-svg'
-const File = props => (
+const SvgFile = props => (
   <Svg viewBox=\\"0 0 48 1\\" width=\\"1em\\" height=\\"1em\\" {...props}>
     <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </Svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support various args: --native --no-expand-props 1`] = `
 "import React from 'react'
 import Svg, { Path } from 'react-native-svg'
-const File = () => (
+const SvgFile = () => (
   <Svg width={48} height={1}>
     <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </Svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support various args: --native --ref 1`] = `
 "import React from 'react'
 import Svg, { Path } from 'react-native-svg'
-const File = ({ svgRef, ...props }) => (
+const SvgFile = ({ svgRef, ...props }) => (
   <Svg width={48} height={1} ref={svgRef} {...props}>
     <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </Svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support various args: --native 1`] = `
 "import React from 'react'
 import Svg, { Path } from 'react-native-svg'
-const File = props => (
+const SvgFile = props => (
   <Svg width={48} height={1} {...props}>
     <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </Svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support various args: --no-dimensions 1`] = `
 "import React from 'react'
 
-const File = props => (
+const SvgFile = props => (
   <svg {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support various args: --no-expand-props 1`] = `
 "import React from 'react'
 
-const File = () => (
+const SvgFile = () => (
   <svg width={48} height={1}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support various args: --no-prettier 1`] = `
 "import React from 'react'
 
-const File = props => <svg width={48} height={1} {...props}>
+const SvgFile = props => <svg width={48} height={1} {...props}>
   <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
 </svg>
 
 
-export default File
+export default SvgFile
 "
 `;
 
 exports[`cli should support various args: --no-svgo 1`] = `
 "import React from 'react'
 
-const File = props => (
+const SvgFile = props => (
   <svg
     width=\\"48px\\"
     height=\\"1px\\"
@@ -276,92 +276,92 @@ const File = props => (
   </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support various args: --ref 1`] = `
 "import React from 'react'
 
-const File = ({ svgRef, ...props }) => (
+const SvgFile = ({ svgRef, ...props }) => (
   <svg width={48} height={1} ref={svgRef} {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support various args: --replace-attr-values "#063855=currentColor" 1`] = `
 "import React from 'react'
 
-const File = props => (
+const SvgFile = props => (
   <svg width={48} height={1} {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"currentColor\\" fillRule=\\"evenodd\\" />
   </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support various args: --svg-attributes "focusable=false" 1`] = `
 "import React from 'react'
 
-const File = props => (
+const SvgFile = props => (
   <svg focusable=\\"false\\" width={48} height={1} {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support various args: --svg-props "hidden={true}" 1`] = `
 "import React from 'react'
 
-const File = props => (
+const SvgFile = props => (
   <svg hidden={true} width={48} height={1} {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should support various args: --title-prop 1`] = `
 "import React from 'react'
 
-const File = ({ title, ...props }) => (
+const SvgFile = ({ title, ...props }) => (
   <svg width={48} height={1} {...props}>
     <title>{title}</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;
 
 exports[`cli should work with a simple file 1`] = `
 "import React from 'react'
 
-const File = props => (
+const SvgFile = props => (
   <svg width={48} height={1} {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
 
-export default File
+export default SvgFile
 
 "
 `;

diff --git a/packages/cli/src/__snapshots__/util.test.js.snap b/packages/cli/src/__snapshots__/util.test.js.snap
@@ -3,25 +3,25 @@
 exports[`util #convertFile should convert a file 1`] = `
 "import React from 'react'
 
-const File = props => (
+const SvgFile = props => (
   <svg width={48} height={1} {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
 
-export default File
+export default SvgFile
 "
 `;
 
 exports[`util #convertFile should support a custom config path 1`] = `
 "import React from 'react'
 
-const File = props => (
+const SvgFile = props => (
   <svg viewBox=\\"0 0 48 1\\" width=\\"1em\\" height=\\"1em\\" {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
 
-export default File
+export default SvgFile
 "
 `;
diff --git a/packages/core/src/util.js b/packages/core/src/util.js
@@ -3,11 +3,10 @@ import camelcase from 'camelcase'
 
 export function getComponentName(state) {
   if (!state.filePath) return 'SvgComponent'
-  const componentName = camelcase(path.parse(state.filePath).name, {
+  const pascalCaseFileName = camelcase(path.parse(state.filePath).name, {
     pascalCase: true,
   })
-  if (Number.isNaN(parseInt(componentName[0], 10))) return componentName
-  return `Svg${componentName}`
+  return `Svg${pascalCaseFileName}`
 }
 
 export function expandState(state) {

diff --git a/packages/core/src/util.test.js b/packages/core/src/util.test.js
@@ -4,9 +4,13 @@ describe('util', () => {
   describe('#getComponentName', () => {
     it('should transform filePath into a component name', () => {
       expect(getComponentName({})).toBe('SvgComponent')
-      expect(getComponentName({ filePath: 'hello.svg' })).toBe('Hello')
-      expect(getComponentName({ filePath: 'hello-you.svg' })).toBe('HelloYou')
-      expect(getComponentName({ filePath: 'hello_you.svg' })).toBe('HelloYou')
+      expect(getComponentName({ filePath: 'hello.svg' })).toBe('SvgHello')
+      expect(getComponentName({ filePath: 'hello-you.svg' })).toBe(
+        'SvgHelloYou',
+      )
+      expect(getComponentName({ filePath: 'hello_you.svg' })).toBe(
+        'SvgHelloYou',
+      )
       expect(getComponentName({ filePath: '1_big_svg.svg' })).toBe('Svg1BigSvg')
     })
   })