Optimised package bundle size and handled some more potential issues

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

@@ -24,6 +24,7 @@ Second, you can use the icons in you React application like this:
 
 ```jsx
 import React from 'react'
+import IconCached from '@aboutbits/react-material-icons/dist/IconCached'
 
 const MyCommponent = () => {
     return (

src/components/Icon360.tsx → src/Icon360.tsx

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

src/components/Icon3dRotation.tsx → src/Icon3dRotation.tsx

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

src/components/Icon4k.tsx → src/Icon4k.tsx

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

src/components/Icon5g.tsx → src/Icon5g.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/Icon6FtApart.tsx → src/Icon6FtApart.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/IconAcUnit.tsx → src/IconAcUnit.tsx

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

src/components/IconAccessAlarm.tsx → src/IconAccessAlarm.tsx

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

src/components/IconAccessAlarms.tsx → src/IconAccessAlarms.tsx

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

src/components/IconAccessTime.tsx → src/IconAccessTime.tsx

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

src/components/IconAccessibility.tsx → src/IconAccessibility.tsx

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

src/components/IconAccessibilityNew.tsx → src/IconAccessibilityNew.tsx

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

src/components/IconAccessible.tsx → src/IconAccessible.tsx

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

src/components/IconAccessibleForward.tsx → src/IconAccessibleForward.tsx

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

src/components/IconAccountBalance.tsx → src/IconAccountBalance.tsx

@@ -4,7 +4,7 @@ import { IconProps } from './types'
 const IconAccountBalance: 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}
   >
@@ -23,4 +23,4 @@ const IconAccountBalance: React.FC<IconProps> = (props) => (
   </svg>
 )
 
-export { IconAccountBalance }
+export { IconAccountBalance as default }

src/components/IconAccountBalanceWallet.tsx → src/IconAccountBalanceWallet.tsx

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

src/components/IconAccountBox.tsx → src/IconAccountBox.tsx

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

src/components/IconAccountCircle.tsx → src/IconAccountCircle.tsx

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

src/components/IconAccountTree.tsx → src/IconAccountTree.tsx

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

src/components/IconAdUnits.tsx → src/IconAdUnits.tsx

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

src/components/IconAdb.tsx → src/IconAdb.tsx

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

src/components/IconAdd.tsx → src/IconAdd.tsx

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

src/components/IconAddAPhoto.tsx → src/IconAddAPhoto.tsx

@@ -4,7 +4,7 @@ import { IconProps } from './types'
 const IconAddAPhoto: 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 IconAddAPhoto: React.FC<IconProps> = (props) => (
   </svg>
 )
 
-export { IconAddAPhoto }
+export { IconAddAPhoto as default }

src/components/IconAddAlarm.tsx → src/IconAddAlarm.tsx

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

src/components/IconAddAlert.tsx → src/IconAddAlert.tsx

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

src/components/IconAddBox.tsx → src/IconAddBox.tsx

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

src/components/IconAddBusiness.tsx → src/IconAddBusiness.tsx

@@ -4,7 +4,7 @@ import { IconProps } from './types'
 const IconAddBusiness: 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}
   >
@@ -21,4 +21,4 @@ const IconAddBusiness: React.FC<IconProps> = (props) => (
   </svg>
 )
 
-export { IconAddBusiness }
+export { IconAddBusiness as default }

src/components/IconAddCircle.tsx → src/IconAddCircle.tsx

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

src/components/IconAddCircleOutline.tsx → src/IconAddCircleOutline.tsx

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

src/components/IconAddComment.tsx → src/IconAddComment.tsx

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

src/components/IconAddIcCall.tsx → src/IconAddIcCall.tsx

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

src/components/IconAddLocation.tsx → src/IconAddLocation.tsx

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

src/components/IconAddLocationAlt.tsx → src/IconAddLocationAlt.tsx

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

src/components/IconAddPhotoAlternate.tsx → src/IconAddPhotoAlternate.tsx

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

src/components/IconAddRoad.tsx → src/IconAddRoad.tsx

@@ -4,7 +4,7 @@ import { IconProps } from './types'
 const IconAddRoad: 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}
   >
@@ -24,4 +24,4 @@ const IconAddRoad: React.FC<IconProps> = (props) => (
   </svg>
 )
 
-export { IconAddRoad }
+export { IconAddRoad as default }

src/components/IconAddShoppingCart.tsx → src/IconAddShoppingCart.tsx

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

src/components/IconAddTask.tsx → src/IconAddTask.tsx

@@ -4,7 +4,7 @@ import { IconProps } from './types'
 const IconAddTask: 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 IconAddTask: React.FC<IconProps> = (props) => (
   </svg>
 )
 
-export { IconAddTask }
+export { IconAddTask as default }

src/components/IconAddToHomeScreen.tsx → src/IconAddToHomeScreen.tsx

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

src/components/IconAddToPhotos.tsx → src/IconAddToPhotos.tsx

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

src/components/IconAddToQueue.tsx → src/IconAddToQueue.tsx

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

src/components/IconAddchart.tsx → src/IconAddchart.tsx

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