From 2d11a3bd109a66e1fefb63345a00c09f681a1a31 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 26 Aug 2021 14:15:34 -0700
Subject: [PATCH] Refactor Icon components, add specific ForkAwesomeIcon
 component

---
 app/soapbox/components/fork_awesome_icon.js | 39 +++++++++++++++++++++
 app/soapbox/components/icon.js              | 24 +++++++------
 2 files changed, 53 insertions(+), 10 deletions(-)
 create mode 100644 app/soapbox/components/fork_awesome_icon.js

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 (
+      <i
+        role='img'
+        alt={alt}
+        className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
+        {...other}
+      />
+    );
+  }
+
+}
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 (
-      <i role='img' alt={alt_id} className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />
-    );
+    const { iconset, ...rest } = this.props;
+
+    switch(iconset) {
+    default:
+      return <ForkAwesomeIcon {...rest} />;
+    }
   }
 
 }