Merge pull request #7 from aboutbits/optional_title

Optional title

Author: Simon Planinschek

generator.js

@@ -6,11 +6,12 @@ const axios = require('axios')
 const iconURL = 'https://fonts.google.com/metadata/icons'
 
 function setup() {
-  let typesFile = "import React from 'react'\n\n"
-  typesFile +=
-    'export interface IconProps extends React.SVGProps<SVGSVGElement> {\n'
-  typesFile += '\ttitle?: string\n'
-  typesFile += '}\n'
+  const typesFile = `
+    import React from 'react'
+    export interface IconProps extends React.SVGProps<SVGSVGElement> {
+        title?: string
+    }
+    `
 
   // Create types file
   fs.writeFileSync(path.join(__dirname, 'src', 'types.ts'), typesFile)
@@ -41,13 +42,16 @@ function formatName(string) {
  * @returns {string} - Component
  */
 function componentTemplate(name, svg) {
-  let component = "import React from 'react'\n"
-  component += "import { IconProps } from './types'\n\n"
-  component += `const ${name}: React.FC<IconProps> = ({ title = '${name}', ...props }) => (`
-  component += svg + ')\n\n'
-  component += `export { ${name} as default }`
-
-  return component
+  return `
+    import React from 'react'
+    import { IconProps } from './types'
+    
+    const ${name}: React.FC<IconProps> = ({ ...props }) => (
+        ${svg}
+    )
+    
+    export { ${name} as default } 
+  `
 }
 
 /**
@@ -86,7 +90,7 @@ async function getSVGFile(icon, version) {
     .replace(/enable-background/g, 'enableBackground')
     .replace(/clip-rule/g, 'clipRule')
     .replace(/fill-rule/g, 'fillRule')
-    .replace('>', '><title>{title}</title>')
+    .replace('>', '>{props.title && <title>{props.title}</title>}')
 }
 
 /**

package-lock.json

@@ -40,18 +40,18 @@
   "devDependencies": {
     "@types/jest": "^26.0.14",
     "@types/react": "^16.9.50",
-    "@typescript-eslint/parser": "^4.3.0",
     "@typescript-eslint/eslint-plugin": "^4.3.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "axios": "^0.20.0",
-    "jest": "^26.4.2",
+    "@typescript-eslint/parser": "^4.3.0",
+    "axios": "^0.21.1",
     "eslint": "^7.10.0",
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.0.2",
     "eslint-plugin-prettier": "^3.1.4",
+    "jest": "^26.4.2",
     "prettier": "^2.1.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "ts-jest": "^26.4.1",
     "typescript": "^4.0.3"
   },

package.json

@@ -0,0 +1,12 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon10k: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M10 10.5h1.5v3H10zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM7.5 15H6v-4.5H4.5V9h3v6zm5.5-1c0 .55-.45 1-1 1H9.5c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1H12c.55 0 1 .45 1 1v4zm6.5 1h-1.75L16 12.75V15h-1.5V9H16v2.25L17.75 9h1.75l-2.25 3 2.25 3z" />
+  </svg>
+)
+
+export { Icon10k as default }

src/Icon10k.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon10mp: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M13.5 7H15v3h-1.5zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 15.5h-1.5V14h-1v3H8v-3H7v4.5H5.5v-5c0-.55.45-1 1-1H11c.55 0 1 .45 1 1v5zm3.5 0H14v-6h3.5c.55 0 1 .45 1 1V16c0 .55-.45 1-1 1h-2v1.5zM10 5.5v6H8.5V7H7V5.5h3zm6.5 5c0 .55-.45 1-1 1H13c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h2.5c.55 0 1 .45 1 1v4zm-1 3.5H17v1.5h-1.5z" />
+  </svg>
+)
+
+export { Icon10mp as default }

src/Icon10mp.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon11mp: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 15.5h-1.5V14h-1v3H8v-3H7v4.5H5.5v-5c0-.55.45-1 1-1H11c.55 0 1 .45 1 1v5zm3.5 0H14v-6h3.5c.55 0 1 .45 1 1V16c0 .55-.45 1-1 1h-2v1.5zM11 5.5v6H9.5V7H8V5.5h3zm5 0v6h-1.5V7H13V5.5h3zm-.5 8.5H17v1.5h-1.5z" />
+  </svg>
+)
+
+export { Icon11mp as default }

src/Icon11mp.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon12mp: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 15.5h-1.5V14h-1v3H8v-3H7v4.5H5.5v-5c0-.55.45-1 1-1H11c.55 0 1 .45 1 1v5zm3.5 0H14v-6h3.5c.55 0 1 .45 1 1V16c0 .55-.45 1-1 1h-2v1.5zM10 5.5v6H8.5V7H7V5.5h3zM15.5 9h-2v1h3v1.5H12V9c0-.55.45-1 1-1h2V7h-3V5.5h3.5c.55 0 1 .45 1 1V8c0 .55-.45 1-1 1zm0 5H17v1.5h-1.5z" />
+  </svg>
+)
+
+export { Icon12mp as default }

src/Icon12mp.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon13mp: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 15.5h-1.5V14h-1v3H8v-3H7v4.5H5.5v-5c0-.55.45-1 1-1H11c.55 0 1 .45 1 1v5zm3.5 0H14v-6h3.5c.55 0 1 .45 1 1V16c0 .55-.45 1-1 1h-2v1.5zM10 5.5v6H8.5V7H7V5.5h3zm6.5 5c0 .55-.45 1-1 1H12V10h3V9h-2V8h2V7h-3V5.5h3.5c.55 0 1 .45 1 1v4zm-1 3.5H17v1.5h-1.5z" />
+  </svg>
+)
+
+export { Icon13mp as default }

src/Icon13mp.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon14mp: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 15.5h-1.5V14h-1v3H8v-3H7v4.5H5.5v-5c0-.55.45-1 1-1H11c.55 0 1 .45 1 1v5zm3.5 0H14v-6h3.5c.55 0 1 .45 1 1V16c0 .55-.45 1-1 1h-2v1.5zM10 5.5v6H8.5V7H7V5.5h3zm7.5 4.5h-1v1.5H15V10h-3V5.5h1.5v3H15v-3h1.5v3h1V10zm-2 4H17v1.5h-1.5z" />
+  </svg>
+)
+
+export { Icon14mp as default }

src/Icon14mp.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon15mp: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 15.5h-1.5V14h-1v3H8v-3H7v4.5H5.5v-5c0-.55.45-1 1-1H11c.55 0 1 .45 1 1v5zm3.5 0H14v-6h3.5c.55 0 1 .45 1 1V16c0 .55-.45 1-1 1h-2v1.5zM10 5.5v6H8.5V7H7V5.5h3zM16.5 7h-3v1h2c.55 0 1 .45 1 1v1.5c0 .55-.45 1-1 1H12V10h3V9h-3V5.5h4.5V7zm-1 7H17v1.5h-1.5z" />
+  </svg>
+)
+
+export { Icon15mp as default }