From 3bf15df7302f71fe7d6d99ece4158007dcfc78a7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 12 Sep 2021 18:54:38 -0500
Subject: [PATCH] Add SVG icon support

---
 app/soapbox/components/svg_icon.js      | 29 +++++++++++++++++++++++++
 app/styles/application.scss             |  1 +
 app/styles/components/emoji-reacts.scss |  4 ++++
 app/styles/components/icon.scss         | 18 +++++++++++++++
 app/styles/components/search.scss       |  3 ++-
 package.json                            |  1 +
 yarn.lock                               | 18 +++++++++++++++
 7 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 app/soapbox/components/svg_icon.js
 create mode 100644 app/styles/components/icon.scss

diff --git a/app/soapbox/components/svg_icon.js b/app/soapbox/components/svg_icon.js
new file mode 100644
index 000000000..c0baca595
--- /dev/null
+++ b/app/soapbox/components/svg_icon.js
@@ -0,0 +1,29 @@
+/**
+ * SvgIcon: abstact component to render SVG icons.
+ * @module soapbox/components/svg_icon
+ * @see soapbox/components/icon
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import InlineSVG from 'react-inlinesvg';
+
+export default class SvgIcon extends React.PureComponent {
+
+  static propTypes = {
+    src: PropTypes.string.isRequired,
+    className: PropTypes.string,
+  };
+
+  render() {
+    const { src, className } = this.props;
+
+    return (
+      <div className={classNames('svg-icon', className)}>
+        <InlineSVG src={src} />
+      </div>
+    );
+  }
+
+}
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 844e88a4c..c1a3e93c8 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -86,6 +86,7 @@
 @import 'components/remote-timeline';
 @import 'components/federation-restrictions';
 @import 'components/aliases';
+@import 'components/icon';
 
 // Holiday
 @import 'holiday/halloween';
diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss
index bc69b0542..847c557ea 100644
--- a/app/styles/components/emoji-reacts.scss
+++ b/app/styles/components/emoji-reacts.scss
@@ -30,6 +30,10 @@
     font-size: 20px;
     margin-right: 0.2em;
   }
+
+  .svg-icon {
+    margin-right: 0.2em;
+  }
 }
 
 .emoji-reacts {
diff --git a/app/styles/components/icon.scss b/app/styles/components/icon.scss
new file mode 100644
index 000000000..0545ae2b5
--- /dev/null
+++ b/app/styles/components/icon.scss
@@ -0,0 +1,18 @@
+.svg-icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > svg {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+
+.icon-button > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss
index cefc85b94..86179f42c 100644
--- a/app/styles/components/search.scss
+++ b/app/styles/components/search.scss
@@ -36,7 +36,8 @@
     outline: 0 !important;
   }
 
-  .fa {
+  .fa,
+  .svg-icon {
     @include font-size(16);
     cursor: default;
     display: inline-block;
diff --git a/package.json b/package.json
index 2199accba..01120a4f9 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
     "react-hotkeys": "^1.1.4",
     "react-immutable-proptypes": "^2.1.0",
     "react-immutable-pure-component": "^2.0.0",
+    "react-inlinesvg": "^2.3.0",
     "react-intl": "^5.0.0",
     "react-motion": "^0.5.2",
     "react-notification": "^6.8.4",
diff --git a/yarn.lock b/yarn.lock
index 1da4cb448..ae674a835 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5213,6 +5213,11 @@ execall@^2.0.0:
   dependencies:
     clone-regexp "^2.1.0"
 
+exenv@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
+
 exif-js@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/exif-js/-/exif-js-2.3.0.tgz#9d10819bf571f873813e7640241255ab9ce1a814"
@@ -9784,6 +9789,11 @@ react-fast-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+react-from-dom@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/react-from-dom/-/react-from-dom-0.6.1.tgz#6740f5a3d79e0c354703e5c096b8fdfe0db71b0f"
+  integrity sha512-7aAZx7LhRnmR51W5XtmTBYHGFl2n1AdEk1uoXLuzHa1OoGXrxOW/iwLcudvgp6BGX/l4Yh1rtMrIzvhlvbVddg==
+
 react-helmet@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.0.0.tgz#fcb93ebaca3ba562a686eb2f1f9d46093d83b5f8"
@@ -9815,6 +9825,14 @@ react-immutable-pure-component@^2.0.0:
   resolved "https://registry.yarnpkg.com/react-immutable-pure-component/-/react-immutable-pure-component-2.2.2.tgz#3014d3e20cd5a7a4db73b81f1f1464f4d351684b"
   integrity sha512-vkgoMJUDqHZfXXnjVlG3keCxSO/U6WeDQ5/Sl0GK2cH8TOxEzQ5jXqDXHEL/jqk6fsNxV05oH5kD7VNMUE2k+A==
 
+react-inlinesvg@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-inlinesvg/-/react-inlinesvg-2.3.0.tgz#62283c0ce7e9d11d8190ec3e89589102288830fd"
+  integrity sha512-fEGOdDf4k4bcveArbEpj01pJcH8pOCKLxmSj2POFdGvEk5YK0NZVnH6BXpW/PzACHPRsuh1YKAhNZyFnD28oxg==
+  dependencies:
+    exenv "^1.2.2"
+    react-from-dom "^0.6.0"
+
 react-intl-translations-manager@^5.0.3:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/react-intl-translations-manager/-/react-intl-translations-manager-5.0.3.tgz#aee010ecf35975673e033ca5d7d3f4147894324d"