Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 1x 1x | import React, { Component } from 'preact';
import PropTypes from 'prop-types';
import { StyledIcon } from './styles';
/**
* This component will render font awesome icons only, include font awesome in your project.
*
* @example ./../../docs/components/Icon.md
*/
class Icon extends Component {
static propTypes = {
/**
* The name of the icon - refer font awesome for list of supported icons
*/
name: PropTypes.string.isRequired,
/**
* Custom icon color
*/
color: PropTypes.string,
/**
* The size of the Button
*/
size: PropTypes.oneOf(['xsmall', 'small', 'normal', 'large', 'xlarge']),
/**
* Gets called when the user clicks on the button
*
* @param {SyntheticEvent} event The react `SyntheticEvent`
*/
onClick: PropTypes.func,
};
static defaultProps = {};
render() {
const { name, className } = this.props;
return (
<StyledIcon
{...this.props}
className={`fa fa-${name} ${className}`}
aria-hidden="true"
>
{}
</StyledIcon>
);
}
}
export default Icon;
|