Dashboard: add custom Gavel icon

app/icons/COPYING.md

@@ -0,0 +1,11 @@
+# Custom icons
+
+- dashboard-filled.svg - Modified from Tabler icons, MIT  
+- fediverse.svg - Modified from Wikipedia, CC0  
+- gavel.svg - Created by ramsha61 for this project, MIT
+- home-2-filled.svg - Modified from Tabler icons, MIT  
+
+Tabler: https://tabler-icons.io/  
+Feather: https://feathericons.com/  
+Fediverse logo: https://en.wikipedia.org/wiki/Fediverse#/media/File:Fediverse_logo_proposal.svg  
+ramsha61: https://www.fiverr.com/ramsha61  

app/icons/gavel.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor">
+  <path d="M10 9.07l-.1.1a.87.87 0 0 1-.59.24.82.82 0 0 1-.59-.24l-.83-.82a.86.86 0 0 1 0-1.19l4-4a.82.82 0 0 1 .59-.25.83.83 0 0 1 .59.25l.82.82a.83.83 0 0 1 .25.59.82.82 0 0 1-.25.59l-.1.11h0a14.27 14.27 0 0 0 4.6 4.61l.11-.11a.87.87 0 0 1 .59-.24.82.82 0 0 1 .59.24l.83.83a.85.85 0 0 1 0 1.18l-4 4a.85.85 0 0 1-1.18 0l-.8-.78a.81.81 0 0 1 0-1.16h0l.1-.11m-1.49-1.37l-8 8.4-.14.16a1 1 0 0 1-.48.16h-.11a.88.88 0 0 1-.63-.26l-.9-.9a.92.92 0 0 1-.1-1.17 1 1 0 0 1 .16-.2l8.39-8"/>
+  <path d="M13.91 5.17l-.1.11-.37.37-3.71 3.71A14.69 14.69 0 0 1 14.34 14l4.18-4.19"/>
+  <path d="M11.36,10.57,2.78,18.75a.92.92,0,0,0,.1,1.17l.9.9a.88.88,0,0,0,.63.26h.06A1,1,0,0,0,5,20.92l8.18-8.58"/>
+  <path d="M21.37,20.75a.31.31,0,0,1,0,.23.26.26,0,0,1-.2.1H12.74a.28.28,0,0,1-.21-.1.31.31,0,0,1,0-.23L13,19.23a.85.85,0,0,1,.81-.6h6.37a.83.83,0,0,1,.8.6l.45,1.52Z" stroke-linejoin="round"/>
+</svg>

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

@@ -34,7 +34,7 @@ class AdminNav extends React.PureComponent {
               <FormattedMessage id='admin_nav.dashboard' defaultMessage='Dashboard' />
             </NavLink>
             <NavLink className='promo-panel-item' to='/admin/reports'>
-              <IconWithCounter src={require('line-awesome/svg/gavel-solid.svg')} count={reportsCount} className='lineawesome--gavel' />
+              <IconWithCounter src={require('icons/gavel.svg')} count={reportsCount} />
               <FormattedMessage id='admin_nav.reports' defaultMessage='Reports' />
             </NavLink>
             {((instance.get('registrations') && instance.get('approval_required')) || approvalCount > 0) && (

app/styles/components/icon.scss

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

app/styles/components/promo-panel.scss

@@ -38,10 +38,14 @@
   .svg-icon {
     width: 24px;
     height: 24px;
-    margin-right: 12px;
 
     svg {
       stroke-width: 1.3px;
     }
   }
+
+  > .svg-icon,
+  > .icon-with-counter {
+    margin-right: 12px;
+  }
 }