Add SVG icon support

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

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';

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 {

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

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;