2017-05-28 18:49:05 +00:00
|
|
|
import PropTypes from 'prop-types';
|
2016-06-17 13:48:33 +00:00
|
|
|
import React from 'react';
|
2016-02-26 21:10:54 +00:00
|
|
|
|
2017-02-12 15:29:56 +00:00
|
|
|
/**
|
|
|
|
|
* Abstracts away the actual icon implementation (font icons, SVG icons, CSS sprite).
|
|
|
|
|
* Provide a `title` as an accessible label intended for screen readers.
|
|
|
|
|
*/
|
2016-06-17 13:48:33 +00:00
|
|
|
const Icon = ({ name, className, title }) => (
|
2017-02-12 15:29:56 +00:00
|
|
|
<span>
|
2017-06-08 21:08:04 +00:00
|
|
|
<span className={`icon icon-${name} ${className || ''}`} aria-hidden></span>
|
2016-06-17 13:48:33 +00:00
|
|
|
{title ? (
|
|
|
|
|
<span className="visuallyhidden">
|
|
|
|
|
{title}
|
|
|
|
|
</span>
|
|
|
|
|
) : null}
|
|
|
|
|
</span>
|
2016-02-26 21:10:54 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
|
|
Icon.propTypes = {
|
2017-05-28 18:49:05 +00:00
|
|
|
name: PropTypes.string.isRequired,
|
|
|
|
|
className: PropTypes.string,
|
|
|
|
|
title: PropTypes.string,
|
2016-02-26 21:10:54 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Icon.defaultProps = {
|
2017-06-08 21:08:04 +00:00
|
|
|
className: null,
|
2016-06-17 13:48:33 +00:00
|
|
|
title: null,
|
2016-02-26 21:10:54 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Icon;
|