Use SVG icons in more places

app/soapbox/components/account.js

@@ -100,7 +100,7 @@ class Account extends ImmutablePureComponent {
     let emoji;
 
     if (onActionClick && actionIcon) {
-      buttons = <IconButton icon={actionIcon} title={actionTitle} onClick={this.handleAction} />;
+      buttons = <IconButton src={actionIcon} title={actionTitle} onClick={this.handleAction} />;
     } else if (account.get('id') !== me && account.get('relationship', null) !== null) {
       const following = account.getIn(['relationship', 'following']);
       const requested = account.getIn(['relationship', 'requested']);
@@ -127,7 +127,7 @@ class Account extends ImmutablePureComponent {
           </Fragment>
         );
       } else if (!account.get('moved') || following) {
-        buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
+        buttons = <IconButton src={following ? require('@tabler/icons/icons/user-x.svg') : require('@tabler/icons/icons/user-plus.svg')} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
       }
     }
 
@@ -144,7 +144,7 @@ class Account extends ImmutablePureComponent {
 
     const joinedAt = createdAt ? (
       <div className='account__joined-at'>
-        <Icon id='calendar' />
+        <Icon src={require('@tabler/icons/icons/clock.svg')} />
         <RelativeTimestamp timestamp={createdAt} />
       </div>
     ) : null;

app/soapbox/components/display_name.js

@@ -41,7 +41,7 @@ class DisplayName extends React.PureComponent {
 
     const joinedAt = createdAt ? (
       <div className='account__joined-at'>
-        <Icon id='calendar' />
+        <Icon src={require('@tabler/icons/icons/clock.svg')} />
         <RelativeTimestamp timestamp={createdAt} />
       </div>
     ) : null;

app/soapbox/components/status.js

@@ -346,7 +346,9 @@ class Status extends ImmutablePureComponent {
     if (featured) {
       prepend = (
         <div className='status__prepend'>
-          <div className='status__prepend-icon-wrapper'><Icon id='thumbtack' className='status__prepend-icon' fixedWidth /></div>
+          <div className='status__prepend-icon-wrapper'>
+            <Icon src={require('@tabler/icons/icons/pin.svg')} className='status__prepend-icon' />
+          </div>
           <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
         </div>
       );
@@ -355,7 +357,9 @@ class Status extends ImmutablePureComponent {
 
       prepend = (
         <div className='status__prepend'>
-          <div className='status__prepend-icon-wrapper'><Icon id='retweet' className='status__prepend-icon' fixedWidth /></div>
+          <div className='status__prepend-icon-wrapper'>
+            <Icon src={require('feather-icons/dist/icons/repeat.svg')} className='status__prepend-icon' />
+          </div>
           <FormattedMessage
             id='status.reblogged_by' defaultMessage='{name} reposted' values={{
               name: <NavLink to={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'>

app/soapbox/features/admin/components/admin_nav.js

@@ -30,16 +30,16 @@ class AdminNav extends React.PureComponent {
         <div className='wtf-panel promo-panel'>
           <div className='promo-panel__container'>
             <NavLink className='promo-panel-item' to='/admin'>
-              <Icon id='tachometer' className='promo-panel-item__icon' fixedWidth />
+              <Icon src={require('@tabler/icons/icons/dashboard.svg')} className='promo-panel-item__icon' />
               <FormattedMessage id='admin_nav.dashboard' defaultMessage='Dashboard' />
             </NavLink>
             <NavLink className='promo-panel-item' to='/admin/reports'>
-              <IconWithCounter icon='gavel' count={reportsCount} fixedWidth />
+              <IconWithCounter src={require('line-awesome/svg/gavel-solid.svg')} count={reportsCount} className='lineawesome--gavel' />
               <FormattedMessage id='admin_nav.reports' defaultMessage='Reports' />
             </NavLink>
             {((instance.get('registrations') && instance.get('approval_required')) || approvalCount > 0) && (
               <NavLink className='promo-panel-item' to='/admin/approval'>
-                <IconWithCounter icon='user' count={approvalCount} fixedWidth />
+                <IconWithCounter src={require('@tabler/icons/icons/user.svg')} count={approvalCount} />
                 <FormattedMessage id='admin_nav.awaiting_approval' defaultMessage='Awaiting Approval' />
               </NavLink>
             )}

app/soapbox/features/admin/components/latest_accounts_panel.js

@@ -69,7 +69,7 @@ class LatestAccountsPanel extends ImmutablePureComponent {
 
     return (
       <AccountListPanel
-        icon='users'
+        icon={require('@tabler/icons/icons/users.svg')}
         title={intl.formatMessage(messages.title)}
         accountIds={accountIds}
         limit={limit}

app/soapbox/features/admin/components/unapproved_account.js

@@ -67,8 +67,8 @@ class UnapprovedAccount extends ImmutablePureComponent {
           <blockquote className='md'>{account.getIn(['pleroma', 'admin', 'registration_reason'])}</blockquote>
         </div>
         <div className='unapproved-account__actions'>
-          <IconButton icon='check' size={22} onClick={this.handleApprove} />
-          <IconButton icon='times' size={22} onClick={this.handleReject} />
+          <IconButton src={require('@tabler/icons/icons/check.svg')} onClick={this.handleApprove} />
+          <IconButton src={require('@tabler/icons/icons/x.svg')} onClick={this.handleReject} />
         </div>
       </div>
     );

app/soapbox/features/crypto_donate/components/crypto_address.js

@@ -39,10 +39,10 @@ class CryptoAddress extends ImmutablePureComponent {
           <div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
           <div className='crypto-address__actions'>
             <a href='' onClick={this.handleModalClick}>
-              <Icon id='qrcode' />
+              <Icon src={require('@tabler/icons/icons/qrcode.svg')} />
             </a>
             {explorerUrl && <a href={explorerUrl} target='_blank'>
-              <Icon id='external-link-alt' />
+              <Icon src={require('@tabler/icons/icons/external-link.svg')} />
             </a>}
           </div>
         </div>

app/soapbox/features/crypto_donate/components/detailed_crypto_address.js

@@ -32,7 +32,7 @@ export default class DetailedCryptoAddress extends ImmutablePureComponent {
           <div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
           <div className='crypto-address__actions'>
             {explorerUrl && <a href={explorerUrl} target='_blank'>
-              <Icon id='external-link-alt' />
+              <Icon src={require('@tabler/icons/icons/external-link.svg')} />
             </a>}
           </div>
         </div>

app/soapbox/features/groups/removed_accounts/index.js

@@ -81,7 +81,7 @@ class GroupRemovedAccounts extends ImmutablePureComponent {
           {accountIds.map(id => (<AccountContainer
             key={id}
             id={id}
-            actionIcon='remove'
+            actionIcon={require('@tabler/icons/icons/x.svg')}
             onActionClick={this.handleOnActionClick(group, id)}
             actionTitle={intl.formatMessage(messages.remove)}
           />))}

app/soapbox/features/notifications/components/notification.js

@@ -265,7 +265,7 @@ class Notification extends ImmutablePureComponent {
         <div className='notification notification-reblog focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.reblog', defaultMessage: '{name} reposted your post' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
           <div className='notification__message'>
             <div className='notification__favourite-icon-wrapper'>
-              <Icon id='retweet' fixedWidth />
+              <Icon src={require('feather-icons/dist/icons/repeat.svg')} />
             </div>
 
             <span title={notification.get('created_at')}>

app/soapbox/features/status/components/status_interaction_bar.js

@@ -47,7 +47,7 @@ class StatusInteractionBar extends ImmutablePureComponent {
     if (status.get('reblogs_count')) {
       return (
         <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='emoji-react emoji-react--reblogs'>
-          <Icon id='retweet' />
+          <Icon src={require('feather-icons/dist/icons/repeat.svg')} />
           <span className='emoji-reacts__count'>
             <FormattedNumber value={status.get('reblogs_count')} />
           </span>

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

@@ -34,7 +34,7 @@ export default class AccountListPanel extends ImmutablePureComponent {
     return (
       <div className='wtf-panel'>
         <div className='wtf-panel-header'>
-          <Icon id={icon} className='wtf-panel-header__icon' />
+          <Icon src={icon} className='wtf-panel-header__icon' />
           <span className='wtf-panel-header__label'>
             {title}
           </span>

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

@@ -136,7 +136,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
           }
 
           {isLocal(account) && <div className='profile-info-panel-content__join-date'>
-            <Icon id='calendar' />
+            <Icon src={require('@tabler/icons/icons/calendar.svg')} />
             <FormattedMessage
               id='account.member_since' defaultMessage='Joined {date}' values={{
                 date: memberSinceDate,

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

@@ -43,7 +43,7 @@ class ProfileMediaPanel extends ImmutablePureComponent {
     return (
       <div className='media-panel'>
         <div className='media-panel-header'>
-          <Icon id='camera' className='media-panel-header__icon' />
+          <Icon src={require('@tabler/icons/icons/camera.svg')} className='media-panel-header__icon' />
           <span className='media-panel-header__label'>
             <FormattedMessage id='media_panel.title' defaultMessage='Media' />
           </span>

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

@@ -36,7 +36,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
     return (
       <div className='wtf-panel'>
         <div className='wtf-panel-header'>
-          <Icon id='users' className='wtf-panel-header__icon' />
+          <Icon src={require('@tabler/icons/icons/users.svg')} className='wtf-panel-header__icon' />
           <span className='wtf-panel-header__label'>
             <FormattedMessage id='who_to_follow.title' defaultMessage='Who To Follow' />
           </span>
@@ -47,7 +47,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
               <AccountContainer
                 key={suggestion.get('account')}
                 id={suggestion.get('account')}
-                actionIcon='times'
+                actionIcon={require('@tabler/icons/icons/x.svg')}
                 actionTitle={intl.formatMessage(messages.dismissSuggestion)}
                 onActionClick={dismissSuggestion}
               />

app/soapbox/features/video/index.js

@@ -469,8 +469,8 @@ class Video extends React.PureComponent {
 
           <div className='video-player__buttons-bar'>
             <div className='video-player__buttons left'>
-              <button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay} autoFocus={detailed}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
-              <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
+              <button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay} autoFocus={detailed}><Icon src={paused ? require('@tabler/icons/icons/player-play.svg') : require('@tabler/icons/icons/player-pause.svg')} /></button>
+              <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon src={muted ? require('@tabler/icons/icons/volume-3.svg') : require('@tabler/icons/icons/volume.svg')} /></button>
 
               <div className={classNames('video-player__volume', { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
                 <div className='video-player__volume__current' style={{ width: `${volume * 100}%` }} />
@@ -493,10 +493,10 @@ class Video extends React.PureComponent {
             </div>
 
             <div className='video-player__buttons right'>
-              {!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
-              {(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon id='expand' fixedWidth /></button>}
-              {onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon id='compress' fixedWidth /></button>}
-              <button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon id={fullscreen ? 'compress' : 'arrows-alt'} fixedWidth /></button>
+              {!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon src={require('@tabler/icons/icons/eye-off.svg')} /></button>}
+              {(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon src={require('@tabler/icons/icons/maximize.svg')} /></button>}
+              {onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon src={require('@tabler/icons/icons/minimize.svg')} /></button>}
+              <button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon src={fullscreen ? require('@tabler/icons/icons/minimize.svg') : require('@tabler/icons/icons/arrows-maximize.svg')} /></button>
             </div>
           </div>
         </div>

app/styles/accounts.scss

@@ -286,10 +286,13 @@ a .account__avatar {
   height: auto;
   padding: 0 0 0 5px;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  .dismiss-account-btn {
-    display: block;
-    margin-bottom: 5px;
+  .svg-icon {
+    width: 20px;
+    height: 20px;
   }
 }
 
@@ -546,7 +549,7 @@ a .account__avatar {
   flex-shrink: 0;
   color: var(--primary-text-color--faint);
 
-  i.fa-calendar {
-    padding-right: 5px;
+  .svg-icon {
+    padding-right: 3px;
   }
 }

app/styles/components/crypto-donate.scss

@@ -35,11 +35,12 @@
 
     a {
       color: var(--primary-text-color--faint);
-      margin-left: 10px;
+      margin-left: 8px;
     }
 
-    i.fa {
-      font-size: 20px;
+    .svg-icon {
+      width: 18px;
+      height: 18px;
     }
   }
 
@@ -69,6 +70,11 @@
   background: var(--foreground-color);
   border-radius: 8px;
   padding-bottom: 13px;
+
+  .crypto-address__actions .svg-icon {
+    width: 22px;
+    height: 22px;
+  }
 }
 
 .profile-info-panel-content__fields {

app/styles/components/icon.scss

@@ -37,3 +37,7 @@
   align-items: center;
   justify-content: center;
 }
+
+.lineawesome--gavel path {
+  fill: currentColor;
+}

app/styles/components/profile-info-panel.scss

@@ -29,9 +29,11 @@
       align-items: center;
       line-height: normal;
 
-      .fa {
-        margin-right: 8px;
-        font-size: 20px;
+      .svg-icon {
+        width: 22px;
+        height: 22px;
+        margin-right: 5px;
+        transform: translateY(-1px);
       }
     }
 

app/styles/components/profile-media-panel.scss

@@ -18,13 +18,18 @@
 
   .media-panel-header {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     margin-bottom: 10px;
     padding: 15px 15px 0;
 
     &__icon {
       margin-right: 10px;
       font-size: 20px;
+
+      &.svg-icon {
+        width: 20px;
+        height: 20px;
+      }
     }
 
     &__label {

app/styles/components/promo-panel.scss

@@ -30,6 +30,11 @@
     }
   }
 
+  i.fa {
+    font-size: 22px;
+    margin-right: 10px;
+  }
+
   .svg-icon {
     width: 24px;
     height: 24px;

app/styles/components/video-player.scss

@@ -211,11 +211,16 @@
       outline: 0;
       flex: 0 0 auto;
       background: transparent;
-      padding: 5px;
+      padding: 5px 6px;
       font-size: 16px;
       border: 0;
       color: rgba(#fff, 0.75);
 
+      .svg-icon {
+        width: 20px;
+        height: 20px;
+      }
+
       &:active,
       &:hover,
       &:focus {