From 130e62455dcbc199c4c9910345d408b4e4f2fb5e Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Wed, 22 Aug 2018 17:33:07 +0700
Subject: [PATCH] replaced icons with masked rects

---
 src/components/panels/Icon.jsx |  7 ++++++-
 src/sprites/icon.svg           | 37 ++++++++++++++++++----------------
 src/styles/panel.less          |  6 ++++++
 3 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/components/panels/Icon.jsx b/src/components/panels/Icon.jsx
index 81f731d..56dc4a4 100644
--- a/src/components/panels/Icon.jsx
+++ b/src/components/panels/Icon.jsx
@@ -3,7 +3,12 @@ import sprite from '$sprites/icon.svg';
 
 export const Icon = ({ icon, size = 32 }) => (
   <svg width={size} height={size} viewBox="0 0 32 32">
-    <use xlinkHref={`${sprite}#${icon}`} x={0} y={0} />
+    <defs>
+      <mask id={`icon-mask-${icon}`}>
+        <use xlinkHref={`${sprite}#${icon}`} x={0} y={0} />
+      </mask>
+    </defs>
+    <rect x="0" y="0" width="32" height="32" stroke="none" mask={`url(#icon-mask-${icon})`} />
   </svg>
 );
 
diff --git a/src/sprites/icon.svg b/src/sprites/icon.svg
index 726cdc9..d54d719 100644
--- a/src/sprites/icon.svg
+++ b/src/sprites/icon.svg
@@ -1,39 +1,42 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
     <defs>
         <g id="icon-router">
-            <rect x="0" y="0" width="32" height="32" fill="none" stroke="none" />
-            <g transform="translate(-680 -226)">
-                <path d="M693.047 229.072c-2.105-.003-3.587 1.238-4.3 2.354a6.454 6.454 0 0 0-.888 2.226l-.02.123v12.137h3v-11.814c.01-.045.098-.531.434-1.057.352-.549.722-.97 1.77-.969 1.073.001 1.547.446 1.945.983.367.493.47.894.49.966v12.45s-.003 1.326.624 2.723c.626 1.396 2.196 3.019 4.627 3.068 2.45.05 4.063-1.603 4.689-3.022.626-1.418.621-2.77.621-2.77v-10.949h-3v10.913s-.032.84-.365 1.595c-.334.756-.61 1.259-1.885 1.233-1.295-.027-1.617-.557-1.95-1.297a4.623 4.623 0 0 1-.36-1.526v-12.873l-.045-.177s-.256-1.071-1.035-2.121c-.78-1.05-2.273-2.193-4.352-2.196z" stroke="none" />
-                <path d="M704.367 229.072a2.795 2.795 0 0 0-2.781 2.782 2.795 2.795 0 0 0 2.781 2.78 2.795 2.795 0 0 0 2.781-2.78 2.795 2.795 0 0 0-2.78-2.782zm0 1.782c.563 0 .998.437.998 1a.984.984 0 0 1-.998.998c-.562 0-1-.436-1-.998 0-.563.438-1 1-1z" stroke="none" />
-                <path d="M689.34 246.7a2.796 2.796 0 0 0-2.781 2.782 2.795 2.795 0 0 0 2.78 2.782 2.796 2.796 0 0 0 2.784-2.782 2.798 2.798 0 0 0-2.783-2.783zm0 1.782c.562 0 1 .438 1 1a.986.986 0 0 1-1 .998.984.984 0 0 1-.998-.998c0-.562.435-1 .998-1z" stroke="none" />
-
-                <path d="M693.047 229.072c-2.105-.003-3.587 1.238-4.3 2.354a6.454 6.454 0 0 0-.888 2.226l-.02.123v12.137h3v-11.814c.01-.045.098-.531.434-1.057.352-.549.722-.97 1.77-.969 1.073.001 1.547.446 1.945.983.367.493.47.894.49.966v12.45s-.003 1.326.624 2.723c.626 1.396 2.196 3.019 4.627 3.068 2.45.05 4.063-1.603 4.689-3.022.626-1.418.621-2.77.621-2.77v-10.949h-3v10.913s-.032.84-.365 1.595c-.334.756-.61 1.259-1.885 1.233-1.295-.027-1.617-.557-1.95-1.297a4.623 4.623 0 0 1-.36-1.526v-12.873l-.045-.177s-.256-1.071-1.035-2.121c-.78-1.05-2.273-2.193-4.352-2.196z" stroke="none" />
-                <path d="M704.367 229.072a2.795 2.795 0 0 0-2.781 2.782 2.795 2.795 0 0 0 2.781 2.78 2.795 2.795 0 0 0 2.781-2.78 2.795 2.795 0 0 0-2.78-2.782zm0 1.782c.563 0 .998.437.998 1a.984.984 0 0 1-.998.998c-.562 0-1-.436-1-.998 0-.563.438-1 1-1z" id="path1471" overflow="visible" stroke="none" />
-                <path d="M689.34 246.7a2.796 2.796 0 0 0-2.781 2.782 2.795 2.795 0 0 0 2.78 2.782 2.796 2.796 0 0 0 2.784-2.782 2.798 2.798 0 0 0-2.783-2.783zm0 1.782c.562 0 1 .438 1 1a.986.986 0 0 1-1 .998.984.984 0 0 1-.998-.998c0-.562.435-1 .998-1z" id="path1473" overflow="visible" stroke="none" />
+            <rect x="0" y="0" width="32" height="32" fill="black" stroke="none" />
+            <g transform="translate(0 0)">
+                <path d="M12 5c-2.105-.003-3.587 1.238-4.3 2.354a6.454 6.454 0 0 0-.888 2.226l-.02.123v12.137h3v-11.814c.01-.045.098-.531.434-1.057.352-.549.722-.97 1.77-.969 1.073.001 1.547.446 1.945.983.367.493.47.894.49.966v12.45s-.003 1.326.624 2.723c.626 1.396 2.196 3.019 4.627 3.068 2.45.05 4.063-1.603 4.689-3.022.626-1.418.621-2.77.621-2.77v-10.949h-3v10.913s-.032.84-.365 1.595c-.334.756-.61 1.259-1.885 1.233-1.295-.027-1.617-.557-1.95-1.297a4.623 4.623 0 0 1-.36-1.526v-12.873l-.045-.177s-.256-1.071-1.035-2.121c-.78-1.05-2.273-2.193-4.352-2.196z" stroke="none" fill="white" />
+                <circle cx="8.5" cy="24" r="2" fill="none" stroke-width="2" stroke="white" />
+                <circle cx="23.5" cy="9" r="2" fill="none" stroke-width="2" stroke="white" />
             </g>
         </g>
 
         <g id="icon-sticker">
             <rect x="0" y="0" width="32" height="32" fill="none" stroke="none" />
             <g transform="translate(-680 -285)">
-                <path d="M690.764 306.811l5.71 7.913 5.014-7.694z" stroke="none" />
-                <path transform="matrix(.88332 0 0 .88132 81.246 35.954)" d="M702.328 307.792l-6.02-.026-6.02.026-2.986-5.226-3.033-5.2 3.033-5.2 2.987-5.227 6.02.026 6.02-.026 2.986 5.226 3.033 5.2-3.033 5.2z" fill="none" stroke-width="3"/>
+                <path d="M690.764 306.811l5.71 7.913 5.014-7.694z" stroke="none" fill="white"/>
+                <path transform="matrix(.88332 0 0 .88132 81.246 35.954)" d="M702.328 307.792l-6.02-.026-6.02.026-2.986-5.226-3.033-5.2 3.033-5.2 2.987-5.227 6.02.026 6.02-.026 2.986 5.226 3.033 5.2-3.033 5.2z" fill="none" stroke="white" />
             </g>
         </g>
 
         <g id="icon-poly">
-            <rect x="0" y="0" width="32" height="32" fill="none" stroke="none" />
-            <g transform="translate(-680 -228.5)">
-                <path d="m 696.0049,231.55643 c -1.64501,0 -3,1.35499 -3,3 0,0.29055 0.0541,0.5674 0.13281,0.83399 l -5.8164,4.13281 c -0.21393,-0.0492 -0.43422,-0.082 -0.66211,-0.082 -1.64501,0 -3,1.35499 -3,3 0,1.645 1.35499,3 3,3 1.64501,0 3,-1.355 3,-3 0,-0.28194 -0.0527,-0.54906 -0.12695,-0.8086 l 3.34179,-2.375 c -0.51555,3.11587 -1.37236,8.36742 -2.01172,11.50391 -1.61147,0.0399 -2.92773,1.37189 -2.92773,2.99219 0,1.645 1.35499,3 3,3 1.64501,0 3,-1.355 3,-3 0,-0.21144 -0.0259,-0.41564 -0.0684,-0.61524 l 9.0918,-6.7539 -0.91016,3.81445 c -1.24757,0.36364 -2.17578,1.50927 -2.17578,2.86719 0,1.645 1.35499,3 3,3 1.64501,0 3,-1.355 3,-3 0,-0.83682 -0.35298,-1.5941 -0.91406,-2.14063 l 1.58398,-6.64257 c 1.55126,-0.10673 2.79883,-1.4042 2.79883,-2.98047 0,-1.64501 -1.35499,-3 -3,-3 -1.64501,0 -3,1.35499 -3,3 0,0.32848 0.0664,0.64062 0.16602,0.9375 l -9.36915,6.96093 c 0.84795,-4.50286 1.78434,-9.8666 2.09766,-11.66796 1.53745,-0.12126 2.76953,-1.41034 2.76953,-2.97657 0,-1.64501 -1.35499,-3 -3,-3 z m 0,2 c 0.56413,0 1,0.43587 1,1 0,0.56413 -0.43587,1 -1,1 -0.56413,0 -1,-0.43587 -1,-1 0,-0.56413 0.43587,-1 1,-1 z m 10.33594,6.7461 c 0.56413,0 1,0.43587 1,1 0,0.56413 -0.43587,1 -1,1 -0.56413,0 -1,-0.43587 -1,-1 0,-0.56413 0.43587,-1 1,-1 z m -19.68164,1.13867 c 0.56413,0 1,0.43587 1,1 0,0.56412 -0.43587,0.99999 -1,1 -0.56413,0 -1,-0.43588 -1,-1 0,-0.56413 0.43587,-1 1,-1 z m 16.13477,10.64062 0.58984,0.14063 c 0.28935,0.1726 0.48828,0.47288 0.48828,0.84375 0,0.56412 -0.43587,0.99999 -1,1 -0.56413,0 -1,-0.43588 -1,-1 0,-0.53619 0.39847,-0.94406 0.92188,-0.98438 z m -11.85938,0.67188 c 0.56413,0 1,0.43587 1,1 0,0.56412 -0.43587,0.99999 -1,1 -0.56413,0 -1,-0.43588 -1,-1 0,-0.56413 0.43587,-1 1,-1 z" stroke="none" />
-                <path d="m 696.00488,230.26355 c -1.64501,0 -3,1.35499 -3,3 0,0.29055 0.0541,0.5674 0.13281,0.83399 l -5.8164,4.13281 c -0.21393,-0.0492 -0.43422,-0.082 -0.66211,-0.082 -1.64501,0 -3,1.35499 -3,3 0,1.645 1.35499,3 3,3 1.64501,0 3,-1.355 3,-3 0,-0.28194 -0.0527,-0.54906 -0.12695,-0.8086 l 3.34179,-2.375 c -0.51555,3.11587 -1.37236,8.36742 -2.01172,11.50391 -1.61147,0.0399 -2.92773,1.37189 -2.92773,2.99219 0,1.645 1.35499,3 3,3 1.64501,0 3,-1.355 3,-3 0,-0.21144 -0.0258,-0.41564 -0.0684,-0.61524 l 9.0918,-6.7539 -0.91016,3.81445 c -1.24757,0.36364 -2.17578,1.50927 -2.17578,2.86719 0,1.645 1.35499,3 3,3 1.64501,0 3,-1.355 3,-3 0,-0.83682 -0.35298,-1.5941 -0.91406,-2.14063 l 1.58398,-6.64257 c 1.55126,-0.10673 2.79883,-1.4042 2.79883,-2.98047 0,-1.64501 -1.35499,-3 -3,-3 -1.64501,0 -3,1.35499 -3,3 0,0.32848 0.0664,0.64062 0.16602,0.9375 l -9.36915,6.96093 c 0.84795,-4.50286 1.78434,-9.8666 2.09766,-11.66796 1.53745,-0.12126 2.76953,-1.41034 2.76953,-2.97657 0,-1.64501 -1.35499,-3 -3,-3 z m 0,2 c 0.56413,0 1,0.43587 1,1 0,0.56413 -0.43587,1 -1,1 -0.56413,0 -1,-0.43587 -1,-1 0,-0.56413 0.43587,-1 1,-1 z m 10.33594,6.7461 c 0.56413,0 1,0.43587 1,1 0,0.56413 -0.43587,1 -1,1 -0.56413,0 -1,-0.43587 -1,-1 0,-0.56413 0.43587,-1 1,-1 z m -19.68164,1.13867 c 0.56413,0 1,0.43587 1,1 0,0.56412 -0.43587,0.99999 -1,1 -0.56413,0 -1,-0.43588 -1,-1 0,-0.56413 0.43587,-1 1,-1 z m 16.13477,10.64062 0.58984,0.14063 c 0.28935,0.1726 0.48828,0.47288 0.48828,0.84375 0,0.56412 -0.43587,0.99999 -1,1 -0.56413,0 -1,-0.43588 -1,-1 0,-0.53619 0.39847,-0.94406 0.92188,-0.98438 z m -11.85938,0.67188 c 0.56413,0 1,0.43587 1,1 0,0.56412 -0.43587,0.99999 -1,1 -0.56413,0 -1,-0.43588 -1,-1 0,-0.56413 0.43587,-1 1,-1 z" stroke="none" />
+            <rect x="0" y="0" width="32" height="32" fill="black" stroke="none" />
+            <g>
+                <path d="m6 14l9 -7l-2 16l14 -10l-3 12" fill="none" stroke-linecap="butt" stroke-linejoin="round" stroke="white" />
+
+                <circle cx="5" cy="15" r="2" fill="none" stroke-width="2" stroke="white" />
+                <circle cx="16" cy="5" r="2" fill="none" stroke-width="2" stroke="white" />
+                <circle cx="12" cy="25" r="2" fill="none" stroke-width="2" stroke="white" />
+                <circle cx="28" cy="11" r="2" fill="none" stroke-width="2" stroke="white" />
+                <circle cx="24" cy="27" r="2" fill="none" stroke-width="2" stroke="white" />
             </g>
+
         </g>
 
         <g id="icon-shooter">
-        <rect x="0" y="0" width="32" height="32" fill="none" stroke="none" />
+        <rect x="0" y="0" width="32" height="32" fill="black" stroke="none" />
             <g transform="translate(18 6)">
-                <path d="m0 0l-4.391.054c-1.418.531-2.34 1.756-3.176 3.102h-5.178c-.68.317-1.351.655-1.455 2.584v11.49c.17 1.001.58 1.765 1.455 2.06h22.537c.746-.044 1.288-.426 1.68-1.06v-13.517c-.185-1.643-.916-1.65-1.68-1.557h-6.62c-.326-1.26-1.91-2.247-3.172-3.156zm-2.122 5.289c3.227 0 5.87 2.626 5.87 5.846s-2.643 5.845-5.87 5.845c-3.227 0-5.869-2.626-5.869-5.845 0-3.22 2.642-5.846 5.87-5.846zm0 1.998a3.844 3.844 0 0 0-3.869 3.848 3.842 3.842 0 0 0 3.87 3.845 3.84 3.84 0 0 0 3.866-3.845 3.842 3.842 0 0 0-3.867-3.848z" />
+                <path d="m0 0l-4.391.054c-1.418.531-2.34 1.756-3.176 3.102h-5.178c-.68.317-1.351.655-1.455 2.584v11.49c.17 1.001.58 1.765 1.455 2.06h22.537c.746-.044 1.288-.426 1.68-1.06v-13.517c-.185-1.643-.916-1.65-1.68-1.557h-6.62c-.326-1.26-1.91-2.247-3.172-3.156zm-2.122 5.289c3.227 0 5.87 2.626 5.87 5.846s-2.643 5.845-5.87 5.845c-3.227 0-5.869-2.626-5.869-5.845 0-3.22 2.642-5.846 5.87-5.846zm0 1.998a3.844 3.844 0 0 0-3.869 3.848 3.842 3.842 0 0 0 3.87 3.845 3.84 3.84 0 0 0 3.866-3.845 3.842 3.842 0 0 0-3.867-3.848z" fill="white" stroke="none" />
             </g>
         </g>
+
     </defs>
 </svg>
diff --git a/src/styles/panel.less b/src/styles/panel.less
index ff029de..0ecbe2d 100644
--- a/src/styles/panel.less
+++ b/src/styles/panel.less
@@ -68,6 +68,12 @@
       fill: white;
       stroke: white;
       display: inline;
+      fill-rule: evenodd;
+      stroke-linecap: butt;
+      stroke-linejoin: miter;
+      stroke-miterlimit: 4;
+      stroke-dasharray: none;
+      stroke-width: 3;
     }
   }
 }