diff --git a/app/soapbox/components/fork_awesome_icon.js b/app/soapbox/components/fork_awesome_icon.js new file mode 100644 index 000000000..adca2cbd6 --- /dev/null +++ b/app/soapbox/components/fork_awesome_icon.js @@ -0,0 +1,39 @@ +/** + * ForkAwesomeIcon: renders a ForkAwesome icon. + * Full list: https://forkaweso.me/Fork-Awesome/icons/ + * @module soapbox/components/fork_awesome_icon + * @see soapbox/components/icon + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export default class ForkAwesomeIcon extends React.PureComponent { + + static propTypes = { + id: PropTypes.string.isRequired, + className: PropTypes.string, + fixedWidth: PropTypes.bool, + }; + + render() { + const { id, className, fixedWidth, ...other } = this.props; + + // Use the Fork Awesome retweet icon, but change its alt + // tag. There is a common adblocker rule which hides elements with + // alt='retweet' unless the domain is twitter.com. This should + // change what screenreaders call it as well. + const alt = (id === 'retweet') ? 'repost' : id; + + return ( + + ); + } + +} diff --git a/app/soapbox/components/icon.js b/app/soapbox/components/icon.js index 8081aac12..d97c7739d 100644 --- a/app/soapbox/components/icon.js +++ b/app/soapbox/components/icon.js @@ -1,25 +1,29 @@ +/** + * Icon: abstract icon class that can render icons from multiple sets. + * @module soapbox/components/icon + * @see soapbox/components/fork_awesome_icon + */ + import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import ForkAwesomeIcon from './fork_awesome_icon'; export default class Icon extends React.PureComponent { static propTypes = { id: PropTypes.string.isRequired, + iconset: PropTypes.string, className: PropTypes.string, fixedWidth: PropTypes.bool, }; render() { - const { id, className, fixedWidth, ...other } = this.props; - // Use the Fork Awesome retweet icon, but change its alt - // tag. There is a common adblocker rule which hides elements with - // alt='retweet' unless the domain is twitter.com. This should - // change what screenreaders call it as well. - const alt_id = (id === 'retweet') ? 'repost' : id; - return ( - - ); + const { iconset, ...rest } = this.props; + + switch(iconset) { + default: + return ; + } } }