inline-svg + use

icon.jsx

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 }) {
    // eslint-disable-next-line
    const classNames = classnames('bloko-icon', {
        'bloko-icon_loading': loading,
        [`bloko-icon_${color}`]: color,
        [`bloko-icon_highlight-${highlight}`]: highlight,
        [`bloko-icon_disabled`]: disabledColor,
    });

    return (
        <svg width={width} height={height} className={classNames}>
            <use href={`#${id}`} />
        </svg>
    );
}

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;