react-icon-loader

loader.js

const fs = require('fs');
const { getOptions } = require('loader-utils');

module.exports = function(source) {
    if (this.cacheable) {
        this.cacheable();
    }
    const options = getOptions(this);
    const template = fs.readFileSync(options.template, 'utf8');

    return template.replace(
        '<icon />',
        source
            .replace('{width}', 'width={width}')
            .replace('{height}', 'height={height}')
            .replace('class="{class}"', 'className={classNames}');
    );
};

template.js

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { colors } from './config';

function Icon({ id, color, loading, width = 16, height = 16, highlight, disabledColor }) {
    const classNames = classnames('bloko-icon', {
        'bloko-icon_loading': loading,
        [`bloko-icon_${color}`]: color,
        [`bloko-icon_highlight-${highlight}`]: highlight,
        [`bloko-icon_disabled`]: disabledColor,
    });

    return (
       <icon />
    );
}

Icon.propTypes = {
    id: PropTypes.string,
    /** Цвет иконки */
    color: PropTypes.oneOf(colors.map(({ name }) => name)),
    /** Цвет иконки active */
    highlight: PropTypes.oneOf(colors.map(({ name }) => name)),
    /** Цвет иконки disabled */
    disabledColor: PropTypes.oneOf(colors.map(({ name }) => name)),
    /** Должна ли быть иконка индикатором загрузки */
    loading: PropTypes.bool,
    /** Ширина иконки */
    width: PropTypes.number,
    /** Ширина иконки */
    height: PropTypes.number,
};

module.exports = Icon;