@bigfishtv/cockpit/src/components/Icon.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { get } from '../iconRegistry'

/**
 * Icon simply displays an icon stored in the iconRegistry with various styling options
 * It listens to the global plupload instance to know if its 'asset' prop is currently uploading and reflects that state accordingly.
 */
export default class Icon extends Component {
	static propTypes = {
		/** Name of icon to retrieve from iconRegistry */
		name: PropTypes.string.isRequired,
		/** Size of icon in px, default 24 */
		size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
		/** Style object to apply to svg */
		style: PropTypes.object,
		/** className to apply to svg */
		className: PropTypes.string,
	}

	static defaultProps = {
		name: '',
		size: 24,
		style: {},
		className: '',
	}

	render() {
		const { name, size, style, ...rest } = this.props
		const styles = {
			fill: 'currentcolor',
			verticalAlign: 'middle',
			width: parseInt(size),
			height: parseInt(size),
			...style,
		}

		return (
			<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" style={styles} {...rest}>
				{get(name)}
			</svg>
		)
	}
}