Switch to using the feather icon set (#2809)

In implementing #2758, we realised that there's no citation of the
source of the icons. It's quite likely that they were custom made at the
time, but if they weren't then this was a mistaken license violation.
Most practically though, it's a problem when we need to add further
icons, as we'd want to use a set which has plenty of options for new
features.

Feather is a nice set of icons, covering everything we could ever likely
need, is MIT licensed and fits well with our current style.

This replaces the existing icons in place with the new set, using
`currentColor` to provide a path to override the colour in a standard
manner (this means that you set the CSS `color` properly and don't need
to change `fill` or `stroke`.)

https://feathericons.com/
https://github.com/feathericons/feather

Author: nickcharlton

CONTRIBUTING.md

@@ -82,6 +82,12 @@ This project uses:
 [stylelint]: https://stylelint.io
 [stylelint-config]: https://github.com/thoughtbot/stylelint-config
 
+## Icons
+
+We use [Feather][] for icons.
+
+[Feather]: https://feathericons.com
+
 ## Labels
 
 Issues and PRs are split into two levels of labels, at the higher level:

app/assets/builds/administrate/application.css

@@ -3,7 +3,7 @@
   margin-left: 5px;
 
   svg {
-    fill: $hint-grey;
+    color: $hint-grey;
     height: 13px;
     transition: transform $base-duration $base-timing;
     width: 13px;

app/assets/builds/administrate/application.css.map

@@ -15,7 +15,6 @@ $search-icon-size: 1rem;
 }
 
 .search__eyeglass-icon {
-  fill: $grey-7;
   height: $search-icon-size;
   left: $search-icon-size;
   position: absolute;
@@ -34,13 +33,13 @@ $search-icon-size: 1rem;
 }
 
 .search__clear-icon {
-  fill: $grey-5;
+  color: $grey-5;
   height: $search-icon-size;
   position: absolute;
   transition: fill $base-duration $base-timing;
   width: $search-icon-size;
 
   &:hover {
-    fill: $action-color;
+    color: $action-color;
   }
 }

app/assets/stylesheets/administrate/components/_cells.scss

@@ -1,13 +1,15 @@
 <svg hidden xmlns="http://www.w3.org/2000/svg">
-  <symbol id="icon-cancel" viewBox="0 0 48 48">
-    <path fill-rule="evenodd" d="M24 19.757l-8.485-8.485c-.784-.783-2.047-.782-2.827 0l-1.417 1.416c-.777.777-.78 2.046.002 2.827L19.757 24l-8.485 8.485c-.783.784-.782 2.047 0 2.827l1.416 1.417c.777.777 2.046.78 2.827-.002L24 28.243l8.485 8.485c.784.783 2.047.782 2.827 0l1.417-1.416c.777-.777.78-2.046-.002-2.827L28.243 24l8.485-8.485c.783-.784.782-2.047 0-2.827l-1.416-1.417c-.777-.777-2.046-.78-2.827.002L24 19.757zM24 47c12.703 0 23-10.297 23-23S36.703 1 24 1 1 11.297 1 24s10.297 23 23 23z" />
+  <symbol id="icon-cancel" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"></circle>
+    <line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line>
   </symbol>
 
-  <symbol id="icon-eyeglass" viewBox="0 0 48 48">
-    <path d="M27.885 32.515c-2.864 1.966-6.333 3.116-10.07 3.116C7.976 35.63 0 27.656 0 17.817 0 7.976 7.976 0 17.816 0S35.63 7.976 35.63 17.816c0 3.736-1.15 7.205-3.115 10.07l14.53 14.53c1.278 1.277 1.275 3.352 0 4.628-1.28 1.278-3.353 1.278-4.63 0l-14.53-14.53zm-10.07-3.736c6.056 0 10.964-4.91 10.964-10.964 0-6.055-4.91-10.964-10.964-10.964-6.055 0-10.964 4.91-10.964 10.964 0 6.055 4.91 10.963 10.964 10.963z" />
+  <symbol id="icon-eyeglass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="11" cy="11" r="8"></circle>
+    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
   </symbol>
 
-  <symbol id="icon-up-caret" viewBox="0 0 48 48">
-    <path d="M2.988 33.02c-1.66 0-1.943-.81-.618-1.824l20-15.28c.878-.672 2.31-.67 3.188 0l20.075 15.288c1.316 1.003 1.048 1.816-.62 1.816H2.987z" />
+  <symbol id="icon-up-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="18 15 12 9 6 15"></polyline>
   </symbol>
 </svg>