Rotate unread notification bell icon with CSS instead of relying on a separate icon

app/soapbox/components/primary_navigation.js

@@ -63,8 +63,11 @@ class PrimaryNavigation extends React.PureComponent {
           {account && (
             <NavLink key='notifications' className='btn grouped' to='/notifications' data-preview-title-id='column.notifications'>
               <IconWithCounter
-                src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
-                className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/notifications' })}
+                src={require('@tabler/icons/icons/bell.svg')}
+                className={classNames('primary-navigation__icon', {
+                  'svg-icon--active': location.pathname === '/notifications',
+                  'svg-icon--unread': notificationCount > 0,
+                })}
                 count={notificationCount}
               />
               <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />

app/soapbox/components/thumb_navigation.js

@@ -56,8 +56,11 @@ class ThumbNavigation extends React.PureComponent {
         {account && (
           <NavLink to='/notifications' className='thumb-navigation__link'>
             <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' })}
+              src={require('@tabler/icons/icons/bell.svg')}
+              className={classNames({
+                'svg-icon--active': location.pathname === '/notifications',
+                'svg-icon--unread': notificationCount > 0,
+              })}
               count={notificationCount}
             />
             <span>

app/styles/components/icon.scss

@@ -4,11 +4,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: 0.2s;
 
   svg {
     // Apparently this won't skew the image as long as it has a viewbox
     width: 100%;
     height: 100%;
+    transition: 0.2s;
   }
 
   &--active {
@@ -39,6 +41,12 @@
       }
     }
   }
+
+  &--unread {
+    svg.icon-tabler-bell {
+      transform: rotate(45deg);
+    }
+  }
 }
 
 .icon-button > div {