Replace a lot more icons with SVG icons

app/soapbox/components/media_gallery.js

@@ -582,7 +582,7 @@ class MediaGallery extends React.PureComponent {
     let spoilerButton;
 
     if (visible) {
-      spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible)} icon='eye-slash' overlay onClick={this.handleOpen} />;
+      spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible)} src={require('@tabler/icons/icons/eye-off.svg')} overlay onClick={this.handleOpen} />;
     } else {
       spoilerButton = (
         <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>

app/soapbox/features/chats/components/audio_toggle.js

@@ -50,7 +50,7 @@ class AudioToggle extends React.PureComponent {
             id={id}
             checked={checked}
             onChange={this.handleToggleAudio}
-            icons={{ checked: <Icon id='volume-up' />, unchecked: <Icon id='volume-off' /> }}
+            icons={{ checked: <Icon src={require('@tabler/icons/icons/volume.svg')} />, unchecked: <Icon src={require('@tabler/icons/icons/volume-3.svg')} /> }}
             onKeyDown={this.onKeyDown}
           />
           {showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}

app/soapbox/features/chats/components/chat_window.js

@@ -117,7 +117,7 @@ class ChatWindow extends ImmutablePureComponent {
             @{getAcct(account, displayFqn)}
           </button>
           <div className='pane__close'>
-            <IconButton icon='times' title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />
+            <IconButton src={require('@tabler/icons/icons/x.svg')} title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />
           </div>
         </div>
         <div className='pane__content'>

app/soapbox/features/compose/components/search.js

@@ -5,6 +5,7 @@ import Overlay from 'react-overlays/lib/Overlay';
 import Motion from '../../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import Icon from 'soapbox/components/icon';
+import classNames from 'classnames';
 
 const messages = defineMessages({
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
@@ -119,8 +120,8 @@ class Search extends React.PureComponent {
           />
         </label>
         <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
-          <Icon id='search' className={hasValue ? '' : 'active'} />
-          <Icon id='times-circle' className={hasValue ? 'active' : ''} aria-label={intl.formatMessage(messages.placeholder)} />
+          <Icon src={require('@tabler/icons/icons/search.svg')} className={classNames('svg-icon--search', { active: !hasValue })} />
+          <Icon src={require('@tabler/icons/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: hasValue })} aria-label={intl.formatMessage(messages.placeholder)} />
         </div>
         <Overlay show={expanded && !hasValue} placement='bottom' target={this}>
           <SearchPopout />

app/soapbox/features/ui/components/compose_modal.js

@@ -56,7 +56,12 @@ class ComposeModal extends ImmutablePureComponent {
           <h3 className='compose-modal__header__title'>
             <FormattedMessage id='navigation_bar.compose' defaultMessage='Compose new post' />
           </h3>
-          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
+          <IconButton
+            className='compose-modal__close'
+            title={intl.formatMessage(messages.close)}
+            src={require('@tabler/icons/icons/x.svg')}
+            onClick={this.onClickClose} size={20}
+          />
         </div>
         <div className='compose-modal__content compose-modal__content--scroll'>
           <ComposeFormContainer />

app/soapbox/features/ui/components/features_panel.js

@@ -53,49 +53,49 @@ class FeaturesPanel extends React.PureComponent {
         <div className='promo-panel__container'>
 
           <NavLink className='promo-panel-item' to='/settings/profile'>
-            <Icon id='user' className='promo-panel-item__icon' fixedWidth />
+            <Icon src={require('@tabler/icons/icons/user.svg')} className='promo-panel-item__icon' />
             {intl.formatMessage(messages.edit_profile)}
           </NavLink>
 
           {(isLocked || followRequestsCount > 0) && <NavLink className='promo-panel-item' to='/follow_requests'>
-            <IconWithCounter icon='user-plus' count={followRequestsCount} fixedWidth />
+            <IconWithCounter src={require('@tabler/icons/icons/user-plus.svg')} count={followRequestsCount} className='promo-panel-item__icon' />
             {intl.formatMessage(messages.follow_requests)}
           </NavLink>}
 
           {features.bookmarks && (
             <NavLink className='promo-panel-item' to='/bookmarks'>
-              <Icon id='bookmark' className='promo-panel-item__icon' fixedWidth />
+              <Icon src={require('@tabler/icons/icons/bookmark.svg')} className='promo-panel-item__icon' />
               {intl.formatMessage(messages.bookmarks)}
             </NavLink>
           )}
 
           {features.lists && (
             <NavLink className='promo-panel-item' to='/lists'>
-              <Icon id='list' className='promo-panel-item__icon' fixedWidth />
+              <Icon src={require('@tabler/icons/icons/list.svg')} className='promo-panel-item__icon' />
               {intl.formatMessage(messages.lists)}
             </NavLink>
           )}
 
           {features.securityAPI ? (
             <NavLink className='promo-panel-item' to='/auth/edit'>
-              <Icon id='lock' className='promo-panel-item__icon' fixedWidth />
+              <Icon src={require('@tabler/icons/icons/lock.svg')} className='promo-panel-item__icon' />
               {intl.formatMessage(messages.security)}
             </NavLink>
           ) : (
             <a className='promo-panel-item' href={`${baseURL}/auth/edit`}>
-              <Icon id='lock' className='promo-panel-item__icon' fixedWidth />
+              <Icon src={require('@tabler/icons/icons/lock.svg')} className='promo-panel-item__icon' />
               {intl.formatMessage(messages.security)}
             </a>
           )}
 
           {features.settingsStore ? (
             <NavLink className='promo-panel-item' to='/settings/preferences'>
-              <Icon id='cog' className='promo-panel-item__icon' fixedWidth />
+              <Icon src={require('@tabler/icons/icons/settings.svg')} className='promo-panel-item__icon' />
               {intl.formatMessage(messages.preferences)}
             </NavLink>
           ) : (
             <a className='promo-panel-item' href={`${baseURL}/settings/preferences`}>
-              <Icon id='cog' className='promo-panel-item__icon' fixedWidth />
+              <Icon src={require('@tabler/icons/icons/settings.svg')} className='promo-panel-item__icon' />
               {intl.formatMessage(messages.preferences)}
             </a>
           )}

app/soapbox/features/ui/components/funding_panel.js

@@ -5,6 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import ProgressBar from '../../../components/progress_bar';
 import { fetchPatronInstance } from 'soapbox/actions/patron';
 import { Map as ImmutableMap } from 'immutable';
+import Icon from 'soapbox/components/icon';
 
 const moneyFormat = amount => (
   new Intl
@@ -41,7 +42,7 @@ class FundingPanel extends ImmutablePureComponent {
     return (
       <div className='wtf-panel funding-panel'>
         <div className='wtf-panel-header'>
-          <i role='img' alt='users' className='fa fa-chart-line wtf-panel-header__icon' />
+          <Icon src={require('@tabler/icons/icons/chart-line.svg')} className='wtf-panel-header__icon' />
           <span className='wtf-panel-header__label'>
             <span>Funding Goal</span>
           </span>

app/soapbox/features/ui/components/theme_toggle.js

@@ -35,7 +35,7 @@ export default class ThemeToggle extends ImmutablePureComponent {
             id={id}
             checked={themeMode === 'light'}
             onChange={this.handleToggleTheme}
-            icons={{ checked: <Icon id='sun' />, unchecked: <Icon id='moon' /> }}
+            icons={{ checked: <Icon src={require('@tabler/icons/icons/sun.svg')} />, unchecked: <Icon src={require('@tabler/icons/icons/moon.svg')} /> }}
             onKeyDown={this.onKeyDown}
           />
           {showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}

app/styles/chats.scss

@@ -55,17 +55,25 @@
     }
 
     .icon-button {
-      color: #fff;
+      opacity: 0.7;
+
+      &:hover {
+        opacity: 1;
+      }
 
       > div {
-        height: auto !important;
-        width: auto !important;
         margin-right: -6px;
       }
     }
 
     .pane__close {
       margin-left: auto;
+
+      .svg-icon {
+        width: 18px;
+        height: 18px;
+        transform: translateY(2px);
+      }
     }
 
     .icon-with-badge__badge {
@@ -113,8 +121,8 @@
   }
 
   .audio-toggle .react-toggle-track-check {
-    left: 4px;
-    bottom: 4px;
+    left: 2px;
+    bottom: 5px;
   }
 
   .react-toggle--checked .react-toggle-thumb {
@@ -122,8 +130,8 @@
   }
 
   .audio-toggle .react-toggle-track-x {
-    right: 4px;
-    bottom: 4px;
+    right: 8px;
+    bottom: 5px;
   }
 
   .fa {

app/styles/components/modal.scss

@@ -708,6 +708,11 @@
     right: 10px;
     right: max(10px, env(safe-area-inset-right));
     color: var(--primary-text-color--faint);
+
+    .svg-icon {
+      width: 24px;
+      height: 24px;
+    }
   }
 
   &__content {

app/styles/components/promo-panel.scss

@@ -35,4 +35,13 @@
     margin-right: 12px;
     font-size: 20px;
   }
+
+  .svg-icon {
+    width: 24px;
+    height: 24px;
+
+    svg {
+      stroke-width: 1.3px;
+    }
+  }
 }

app/styles/components/search.scss

@@ -36,7 +36,6 @@
     outline: 0 !important;
   }
 
-  .fa,
   .svg-icon {
     @include font-size(16);
     cursor: default;
@@ -56,13 +55,21 @@
       opacity: 1;
     }
   }
-  .fa-search.active { pointer-events: none; }
 
-  .fa-times-circle {
-    @include font-size(17);
+  .svg-icon--search.active {
+    pointer-events: none;
+  }
+
+  .svg-icon--backspace {
     cursor: pointer;
     color: var(--highlight-text-color);
-    &:hover { color: var(--brand-color); }
+    width: 22px;
+    height: 22px;
+    top: 5px;
+
+    &:hover {
+      color: var(--brand-color);
+    }
   }
 }
 

app/styles/components/spoiler-button.scss

@@ -18,6 +18,11 @@
     display: none;
   }
 
+  .svg-icon {
+    width: 20px;
+    height: 20px;
+  }
+
   &__overlay {
     display: block;
     background: transparent;

app/styles/components/theme-toggle.scss

@@ -13,13 +13,22 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        height: 15px;
         color: #fff;
+        width: auto;
+      }
+
+      &-track-check {
+        left: 6px;
+      }
+
+      &-track-x {
+        right: 5px;
       }
     }
   }
 
-  i.fa {
-    font-size: 20px;
+  .svg-icon {
+    width: 18px;
+    height: 18px;
   }
 }