generator.js

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)
        )
    });
}

/**
 * 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 += `\t${name},\n`
    });
    exports += "}";

    fs.writeFileSync(
        "./index.tsx",
        (imports + "\n" + exports)
    );
}

/**
 * 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);

    // Generate icon components and Index
    await generateComponent(icons.icons);
    await generateIndex(icons.icons);

})();