Add component generator

Author: Simon Planinschek

generator.js

@@ -0,0 +1,98 @@
+const axios = require('axios');
+const fs = require('fs');
+const path = require('path');
+
+// Base url for icons
+const iconURL = "https://fonts.google.com/metadata/icons";
+
+/**
+ * Format name.
+ * Covert from snake case to camel case and prevent numbers at the beginning
+ *
+ * @param string - String to format
+ * @returns {string} - Formatted string
+ */
+function formatName(string) {
+    const formattedString = string
+        .replace(/_/g, ' ')
+        .replace(/\w\S*/g, (txt) => {
+            return txt
+                .charAt(0)
+                .toUpperCase() + txt.substr(1)
+                .toLowerCase();
+        })
+        .replace(/ /g, '');
+    return 'Icon' + formattedString;
+}
+
+
+/**
+ * Component template for functional react icon component
+ *
+ * @param name - Component name
+ * @param svg - Icon SVG
+ * @returns {string} - Component
+ */
+function componentTemplate(name, svg) {
+    let component = "import React from 'react'\n";
+    component += "import { IconProps } from './types'\n";
+    component += `const ${name}: React.FC<IconProps> = (props) => (`;
+    component += svg + "\n\n";
+    component += `export { ${name} }`;
+
+    return component;
+
+}
+
+/**
+ * Generate React Icon components
+ *
+ * @param icon - Icon object
+ */
+function generateComponent(icon) {
+    icon.forEach(async c => {
+        const name = formatName(c.name);
+        const svg = await getSVGFile(c.name, c.version);
+
+        fs.writeFileSync(
+            path.join(__dirname, './components', `${name}.tsx`),
+            componentTemplate(name, svg)
+        )
+    });
+}
+
+/**
+ * Get SVG data form google static fonts api
+ *
+ * @param icon - Icon name
+ * @param version - Icon Version
+ * @returns {Promise<any>} - SVG Data
+ */
+async function getSVGFile(icon, version) {
+    const svg = await axios.get(`https://fonts.gstatic.com/s/i/materialicons/${icon}/v${version}/24px.svg`);
+
+    return svg
+        .data
+        .replace('height="24"', '')
+        .replace('width="24"', '{...props}');
+}
+
+
+(async () => {
+    // Get icon information from google fonts
+    const res = await axios.get(iconURL);
+    // remove )]}' from the response
+    const data = res.data.substring(4);
+
+    // Parse response from json to js object
+    const icons = await JSON.parse(data);
+
+    // Used form development only
+    const icr = [];
+    for(let i = 0; i < 2; i++) {
+        icr.push(icons.icons[i])
+    }
+
+    await generateComponent(icr);
+
+})();