Refactor Icon components, add specific ForkAwesomeIcon component

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 (
+      <i
+        role='img'
+        alt={alt}
+        className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
+        {...other}
+      />
+    );
+  }
+
+}

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;
+    const { iconset, ...rest } = this.props;
-    // Use the Fork Awesome retweet icon, but change its alt
+
-    // tag. There is a common adblocker rule which hides elements with
+    switch(iconset) {
-    // alt='retweet' unless the domain is twitter.com. This should
+    default:
-    // change what screenreaders call it as well.
+      return <ForkAwesomeIcon {...rest} />;
-    const alt_id = (id === 'retweet') ? 'repost' : id;
+    }
-    return (
-      <i role='img' alt={alt_id} className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />
-    );
   }
 
 }