SidebarMenu: update X icon, caret, and plus

app/soapbox/components/icon_button.js

@@ -135,7 +135,7 @@ export default class IconButton extends React.PureComponent {
           tabIndex={tabIndex}
           disabled={disabled}
         >
-          <div style={style}>
+          <div style={src ? {} : style}>
             {emoji
               ? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
               : <Icon id={icon} src={src} fixedWidth aria-hidden='true' />}

app/soapbox/components/sidebar_menu.js

@@ -171,7 +171,7 @@ class SidebarMenu extends ImmutablePureComponent {
           <div className='sidebar-menu__content'>
 
             <div className='sidebar-menu-profile'>
-              <IconButton title='close' onClick={this.handleClose} icon='times' className='sidebar-menu__close' />
+              <IconButton title='close' onClick={this.handleClose} src={require('@tabler/icons/icons/x.svg')} className='sidebar-menu__close' />
               <div className='sidebar-menu-profile__avatar'>
                 <Link to={`/@${acct}`} title={acct} onClick={this.handleClose}>
                   <Avatar account={account} />
@@ -179,7 +179,7 @@ class SidebarMenu extends ImmutablePureComponent {
               </div>
               <a href='#' className='sidebar-menu-profile__name' onClick={this.handleSwitcherClick}>
                 <DisplayName account={account} />
-                <Icon id={switcher ? 'caret-up' : 'caret-down'} />
+                <Icon src={switcher ? require('@tabler/icons/icons/caret-up.svg') : require('@tabler/icons/icons/caret-down.svg')} className='sidebar-menu-profile__caret' />
               </a>
             </div>
 
@@ -187,7 +187,7 @@ class SidebarMenu extends ImmutablePureComponent {
               {otherAccounts.map(account => this.renderAccount(account))}
 
               <NavLink className='sidebar-menu-item' to='/auth/sign_in' onClick={this.handleClose}>
-                <Icon id='plus' />
+                <Icon src={require('@tabler/icons/icons/plus.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.add_account)}</span>
               </NavLink>
             </div>}

app/styles/components/sidebar-menu.scss

@@ -84,16 +84,16 @@
 
 .sidebar-menu__close {
   position: absolute;
-  top: 22px;
+  top: 16px;
   right: 18px;
 
-  i.fa {
-    font-size: 20px;
-  }
-
   .svg-icon {
-    width: 20px;
-    height: 20px;
+    width: 32px;
+    height: 32px;
+
+    svg {
+      stroke-width: 1px;
+    }
   }
 }
 
@@ -122,11 +122,14 @@
       margin-top: 2px;
       color: var(--primary-text-color--faint);
     }
+  }
 
-    i.fa-caret-up,
-    i.fa-caret-down {
+  &__caret {
     margin-left: auto;
     padding-left: 10px;
+
+    svg {
+      stroke-width: 1px;
     }
   }
 }