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 ;
+ }
}
}