Icon.js

import React from 'react';
import PropTypes from 'prop-types';
import {Parser, ProcessNodeDefinitions} from 'html-to-react';

function Icon(props) {
    const {name, size, color} = props;

    //https://webpack.js.org/guides/dependency-management/#require-with-expression
    const rawSvgContent = require(`../../icons/svg/${glyph}.svg`);

    const processSvgAttributes = [
        {
            shouldProcessNode: () => true,
            processNode: (node, children, index) => {

                if(node.name === 'svg'){
                    node.attribs = Object.assign(node.attribs, {
                            width: size,
                            height: size
                        }
                    );
                }else if(node.type === 'tag'){
                    node.attribs = Object.assign(node.attribs,
                        (() => color ? {fill: color} : {})()
                    );
                }

                return  new ProcessNodeDefinitions(React).processDefaultNode(node, children, index);
            }
        }];

    //https://www.npmjs.com/package/html-to-react#with-custom-processing-instructions
    const icon = new Parser().parseWithInstructions(rawSvgContent, () => true, processSvgAttributes);

    return <span className="icon">{icon}</span>;
}