Merge pull request #4 from stplasim/master

Optimised package bundle size and handled some more potential issues

Author: alexlanz

generator.js

@@ -6,12 +6,9 @@ const axios = require('axios')
 const iconURL = 'https://fonts.google.com/metadata/icons'
 
 function setup() {
-  // Create components folder
-  fs.mkdirSync(path.join(__dirname, 'src', 'components'))
-
   // Create types file
   fs.writeFileSync(
-    path.join(__dirname, 'src', 'components', 'types.ts'),
+    path.join(__dirname, 'src', 'types.ts'),
     'import React from "react" \nexport type IconProps = React.SVGProps<SVGSVGElement>'
   )
 }
@@ -45,7 +42,7 @@ function componentTemplate(name, svg) {
   component += "import { IconProps } from './types'\n\n"
   component += `const ${name}: React.FC<IconProps> = (props) => (`
   component += svg + ')\n\n'
-  component += `export { ${name} }`
+  component += `export { ${name} as default }`
 
   return component
 }
@@ -61,34 +58,12 @@ function generateComponent(icon) {
     const svg = await getSVGFile(c.name, c.version)
 
     fs.writeFileSync(
-      path.join(__dirname, 'src', 'components', `${name}.tsx`),
+      path.join(__dirname, 'src', `${name}.tsx`),
       componentTemplate(name, svg)
     )
   })
 }
 
-/**
- * Generate index tsx file for easy import
- *
- * @param icons - Array of icons
- */
-function generateIndex(icons) {
-  let imports = ''
-  let exports = 'export {\n'
-
-  icons.forEach((icon) => {
-    const name = formatName(icon.name)
-    imports += `import { ${name} } from './components/${name}'\n`
-    exports += `  ${name},\n`
-  })
-  exports += '}'
-
-  fs.writeFileSync(
-    path.join(__dirname, 'src', 'index.ts'),
-    imports + '\n' + exports
-  )
-}
-
 /**
  * Get SVG data form google static fonts api
  *
@@ -105,6 +80,9 @@ async function getSVGFile(icon, version) {
     .replace('height="24"', '')
     .replace('width="24"', '{...props}')
     .replace(/class/g, 'className')
+    .replace(/enable-background/g, 'enableBackground')
+    .replace(/clip-rule/g, 'clipRule')
+    .replace(/fill-rule/g, 'fillRule')
 }
 
 /**
@@ -124,5 +102,4 @@ async function getSVGFile(icon, version) {
 
   // Generate icon components and Index
   await generateComponent(icons.icons)
-  await generateIndex(icons.icons)
 })()

package.json

@@ -2,7 +2,7 @@
   "name": "@aboutbits/react-material-icons",
   "version": "0.1.8",
   "description": "Material design icon components for React",
-  "main": "dist/index.js",
+  "main": "dist/",
   "scripts": {
     "build": "tsc",
     "generate": "rm -rf src/* && node generator.js",

readme.md

@@ -8,4 +8,4 @@ const Icon360: React.FC<IconProps> = (props) => (
   </svg>
 )
 
-export { Icon360 }
+export { Icon360 as default }

src/components/Icon360.tsx src/Icon360.tsxsrc/components/Icon360.tsx renamed to src/Icon360.tsx

@@ -8,4 +8,4 @@ const Icon3dRotation: React.FC<IconProps> = (props) => (
   </svg>
 )
 
-export { Icon3dRotation }
+export { Icon3dRotation as default }

src/components/Icon3dRotation.tsx src/Icon3dRotation.tsxsrc/components/Icon3dRotation.tsx renamed to src/Icon3dRotation.tsx

@@ -8,4 +8,4 @@ const Icon4k: React.FC<IconProps> = (props) => (
   </svg>
 )
 
-export { Icon4k }
+export { Icon4k as default }

src/components/Icon4k.tsx src/Icon4k.tsxsrc/components/Icon4k.tsx renamed to src/Icon4k.tsx

@@ -4,7 +4,7 @@ import { IconProps } from './types'
 const Icon5g: React.FC<IconProps> = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    enable-background="new 0 0 24 24"
+    enableBackground="new 0 0 24 24"
     viewBox="0 0 24 24"
     {...props}
   >
@@ -20,4 +20,4 @@ const Icon5g: React.FC<IconProps> = (props) => (
   </svg>
 )
 
-export { Icon5g }
+export { Icon5g as default }

src/components/Icon5g.tsx src/Icon5g.tsxsrc/components/Icon5g.tsx renamed to src/Icon5g.tsx

@@ -4,7 +4,7 @@ import { IconProps } from './types'
 const Icon6FtApart: React.FC<IconProps> = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    enable-background="new 0 0 24 24"
+    enableBackground="new 0 0 24 24"
     viewBox="0 0 24 24"
     {...props}
   >
@@ -13,4 +13,4 @@ const Icon6FtApart: React.FC<IconProps> = (props) => (
   </svg>
 )
 
-export { Icon6FtApart }
+export { Icon6FtApart as default }

src/components/Icon6FtApart.tsx src/Icon6FtApart.tsxsrc/components/Icon6FtApart.tsx renamed to src/Icon6FtApart.tsx

@@ -8,4 +8,4 @@ const IconAcUnit: React.FC<IconProps> = (props) => (
   </svg>
 )
 
-export { IconAcUnit }
+export { IconAcUnit as default }

src/components/IconAcUnit.tsx src/IconAcUnit.tsxsrc/components/IconAcUnit.tsx renamed to src/IconAcUnit.tsx

@@ -8,4 +8,4 @@ const IconAccessAlarm: React.FC<IconProps> = (props) => (
   </svg>
 )
 
-export { IconAccessAlarm }
+export { IconAccessAlarm as default }