Tabler: add icons to ThumbNavigation

app/icons/dashboard-filled.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler" width="24" height="24" stroke-width="2" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11.969 3.955A9 9 0 0 0 6.4 20H17.6a9 9 0 0 0-5.631-16.045zM15.529 8.5a1 1 0 0 1 .678 1.707l-1.51 1.51c.189.391.303.823.303 1.283 0 1.645-1.355 3-3 3s-3-1.355-3-3 1.355-3 3-3c.46 0 .892.114 1.283.303l1.51-1.51a1 1 0 0 1 .736-.293zM12 12c-.564 0-1 .436-1 1s.436 1 1 1 1-.436 1-1-.436-1-1-1z"/>
+</svg>

app/icons/home-2-filled.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler" width="24" height="24" stroke-width="2" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3l-9 9h2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7h2l-9-9zm-2 9h4v4h-4v-4z"/>
+</svg>

app/soapbox/components/icon.js

@@ -13,7 +13,7 @@ import SvgIcon from './svg_icon';
 export default class Icon extends React.PureComponent {
 
   static propTypes = {
-    id: PropTypes.string.isRequired,
+    id: PropTypes.string,
     src: PropTypes.string,
     className: PropTypes.string,
   };

app/soapbox/components/icon_with_counter.js

@@ -15,7 +15,7 @@ const IconWithCounter = ({ icon, count, ...rest }) => {
 };
 
 IconWithCounter.propTypes = {
-  icon: PropTypes.string.isRequired,
+  icon: PropTypes.string,
   count: PropTypes.number.isRequired,
 };
 

app/soapbox/components/thumb_navigation.js

@@ -9,6 +9,7 @@ import IconWithCounter from 'soapbox/components/icon_with_counter';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { isStaff } from 'soapbox/utils/accounts';
 import { getFeatures } from 'soapbox/utils/features';
+import classNames from 'classnames';
 
 const mapStateToProps = state => {
   const me = state.get('me');
@@ -37,15 +38,16 @@ class ThumbNavigation extends React.PureComponent {
     notificationCount: PropTypes.number,
     chatsCount: PropTypes.number,
     features: PropTypes.object.isRequired,
+    location: PropTypes.object,
   }
 
   render() {
-    const { account, dashboardCount, features } = this.props;
+    const { account, notificationCount, dashboardCount, location, features } = this.props;
 
     return (
       <div className='thumb-navigation'>
         <NavLink to='/' exact className='thumb-navigation__link'>
-          <Icon id='home' />
+          <Icon src={location.pathname === '/' ? require('icons/home-2-filled.svg') : require('@tabler/icons/icons/home-2.svg')} />
           <span>
             <FormattedMessage id='navigation.home' defaultMessage='Home' />
           </span>
@@ -53,7 +55,11 @@ class ThumbNavigation extends React.PureComponent {
 
         {account && (
           <NavLink to='/notifications' className='thumb-navigation__link'>
-            <Icon id='bell' />
+            <IconWithCounter
+              src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
+              className={classNames({ 'svg-icon--active': location.pathname === '/notifications' })}
+              count={notificationCount}
+            />
             <span>
               <FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />
             </span>
@@ -62,7 +68,10 @@ class ThumbNavigation extends React.PureComponent {
 
         {(features.chats && account) && (
           <NavLink to='/chats' className='thumb-navigation__link'>
-            <Icon id='comment' />
+            <Icon
+              src={require('@tabler/icons/icons/messages.svg')}
+              className={classNames({ 'svg-icon--active': location.pathname === '/chats' })}
+            />
             <span>
               <FormattedMessage id='navigation.chats' defaultMessage='Chats' />
             </span>
@@ -70,7 +79,10 @@ class ThumbNavigation extends React.PureComponent {
         )}
 
         <NavLink to='/search' className='thumb-navigation__link'>
-          <Icon id='search' />
+          <Icon
+            src={require('@tabler/icons/icons/search.svg')}
+            className={classNames({ 'svg-icon--active': location.pathname === '/search' })}
+          />
           <span>
             <FormattedMessage id='navigation.search' defaultMessage='Search' />
           </span>
@@ -78,7 +90,10 @@ class ThumbNavigation extends React.PureComponent {
 
         {(account && isStaff(account)) && (
           <NavLink key='dashboard' to='/admin' className='thumb-navigation__link'>
-            <IconWithCounter icon='tachometer' count={dashboardCount} />
+            <IconWithCounter
+              src={location.pathname.startsWith('/admin') ? require('icons/dashboard-filled.svg') : require('@tabler/icons/icons/dashboard.svg')}
+              count={dashboardCount}
+            />
             <span>
               <FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />
             </span>

app/styles/navigation.scss

@@ -60,6 +60,32 @@
     span {
       display: none;
     }
+
+    .svg-icon {
+      width: 24px;
+      height: 24px;
+
+      svg {
+        stroke-width: 1px;
+      }
+
+      &--active {
+        svg.icon-tabler-search {
+          stroke-width: 2px;
+        }
+
+        svg.icon-tabler-bell,
+        svg.icon-tabler-messages {
+          path:nth-child(2) {
+            fill: var(--primary-text-color);
+          }
+        }
+      }
+    }
+
+    .icon-with-counter__counter {
+      right: -8px;
+    }
   }
 
   @media (min-width: 895px) {

app/styles/ui.scss

@@ -733,7 +733,7 @@
     @include line-height(14);
     position: absolute;
     box-sizing: border-box;
-    left: 8px;
+    right: -5px;
     top: -12px;
     min-width: 16px;
     height: 16px;

webpack/rules/assets.js

@@ -44,7 +44,7 @@ module.exports = [{
 }, {
   test: /\.svg$/,
   type: 'asset/inline',
-  include: resolve('node_modules', '@material-design-icons'),
+  include: resolve('app', 'icons'),
   generator: {
     dataUrl: content => svgToMiniDataURI(content.toString()),
   },

webpack/shared.js

@@ -110,6 +110,7 @@ module.exports = {
       // Override tabler's package.json to allow importing .svg files directly
       // https://stackoverflow.com/a/35990101/8811886
       '@tabler': resolve('node_modules', '@tabler'),
+      'icons': resolve('app', 'icons'),
     },
     fallback: {
       path: require.resolve('path-browserify'),