Better remove file icon, without clipping in Safari

packages/@uppy/dashboard/src/components/FileItem.js

@@ -180,9 +180,9 @@ module.exports = function fileItem (props) {
           aria-label={props.i18n('removeFile')}
           title={props.i18n('removeFile')}
           onclick={() => props.removeFile(file.id)}>
-          <svg aria-hidden="true" class="UppyIcon" width="60" height="60" viewBox="0 0 60 60">
-            <path stroke="#FFF" stroke-width="1" fill-rule="nonzero" vector-effect="non-scaling-stroke" d="M30 1C14 1 1 14 1 30s13 29 29 29 29-13 29-29S46 1 30 1z" />
-            <path fill="#FFF" vector-effect="non-scaling-stroke" d="M42 39.667L39.667 42 30 32.333 20.333 42 18 39.667 27.667 30 18 20.333 20.333 18 30 27.667 39.667 18 42 20.333 32.333 30z" />
+          <svg aria-hidden="true" class="UppyIcon" width="18" height="18" viewBox="0 0 18 18">
+            <path d="M9 0C4.034 0 0 4.034 0 9s4.034 9 9 9 9-4.034 9-9-4.034-9-9-9z" />
+            <path fill="#FFF" d="M13 12.222l-.778.778L9 9.778 5.778 13 5 12.222 8.222 9 5 5.778 5.778 5 9 8.222 12.222 5l.778.778L9.778 9z" />
           </svg>
         </button>
       }

packages/@uppy/dashboard/src/style.scss

@@ -885,14 +885,14 @@ a.uppy-Dashboard-poweredBy {
 .uppy-DashboardItem-remove {
   @include reset-button;
   cursor: pointer;
-  color: #111;
-  width: 18px;
-  height: 18px;
+  color: $gray-900;
+  width: 20px;
+  height: 20px;
+  padding: 1px;
   opacity: 0.9;
 
-  .uppy-size--md & {
-    width: 20px;
-    height: 20px;
+  &:hover {
+    opacity: 1;
   }
 }