Switch layer-icon to pure SVGs (#25448)

morgan-sam · web-flow · commit d0b6a836d207 · 2020-07-02T18:47:13.000-07:00
* Switch layer-icon to pure SVGs

* Updated LayerIcon parent style
diff --git a/www/src/assets/icons/abstract-symbol.svg b/www/src/assets/icons/abstract-symbol.svg
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false">
+  <circle cx="16.703" cy="16.777" r="6.364" transform="rotate(45 16.703 16.777)" fill="currentColor"/>
+  <circle cx="16.703" cy="2.522" r="1.018" transform="rotate(90 16.703 2.522)" fill="currentColor"/>
+  <circle cx="2.449" cy="16.776" r="1.018" transform="rotate(90 2.449 16.776)" fill="currentColor"/>
+  <circle cx="6.624" cy="6.697" r="1.018" transform="rotate(45 6.624 6.697)" fill="currentColor"/>
+  <circle cx="6.624" cy="26.856" r="1.018" transform="rotate(45 6.624 26.856)" fill="currentColor"/>
+  <path d="M16.703 2.522c7.873 0 14.255 6.382 14.255 14.255 0 7.872-6.382 14.254-14.255 14.254a14.206 14.206 0 01-9.8-3.903" stroke="currentColor"/>
+</svg>
diff --git a/www/src/assets/icons/app-window.svg b/www/src/assets/icons/app-window.svg
@@ -0,0 +1,4 @@
+<svg width="37" height="32" viewBox="0 0 37 32" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" focusable="false">
+  <path d="M33.709 1.104H3.927a2.29 2.29 0 00-2.291 2.29v25.2a2.29 2.29 0 002.29 2.292H33.71A2.291 2.291 0 0036 28.595v-25.2a2.291 2.291 0 00-2.29-2.291zM1.636 7.976H36M10.8 1.103v6.873m6.872-6.873v6.873"/>
+  <path d="M18.817 26.304a3.436 3.436 0 100-6.873 3.436 3.436 0 000 6.873zM7.363 24.012h2.29m1.064-8.1l1.872 1.872m6.229-5.226v2.291m6.872 1.145l-4.442 4.443m9.024 3.575h-2.29"/>
+</svg>
diff --git a/www/src/assets/icons/atomic-symbol.svg b/www/src/assets/icons/atomic-symbol.svg
@@ -0,0 +1,4 @@
+<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" focusable="false">
+  <path d="M30.296 12.356a74.352 74.352 0 01-9.638 11.549C12.243 32.32 3.9 37.622 2.022 35.74c-1.336-1.336 1.024-6.002 5.499-11.583M20.54 11.049a54.897 54.897 0 014.887-3.602"/>
+  <path d="M16.12 11.244C10.442 6.662 5.67 4.22 4.317 5.566-.608 10.49 29.443 39.647 33.34 35.74c1.158-1.159-.418-4.783-3.777-9.368M12.028 13.16a11.455 11.455 0 11-4.567 7.822M32.554 8.653a3.46 3.46 0 100-6.918 3.46 3.46 0 000 6.918z"/>
+</svg>
diff --git a/www/src/assets/icons/graphql-logo.svg b/www/src/assets/icons/graphql-logo.svg
@@ -0,0 +1,9 @@
+<svg width="33" height="38" viewBox="0 0 33 38" fill="currentColor" stroke="currentColor" focusable="false">
+  <path d="M17.892 33.372l-.013-.023 13.673-7.894.014.022zM3.051 27.56l-.023-.013 14.227-24.64.023.013L3.05 27.56z"/>
+  <path d="M2.44 26.516h28.453v.027H2.44v-.027z"/>
+  <path d="M16.986 34.24L3.312 26.347l.014-.023 13.673 7.895-.013.023zm13.028-22.565L16.34 3.781l.013-.023 13.674 7.894-.014.023z"/>
+  <path d="M3.33 11.67l-.014-.024L16.99 3.752l.013.023L3.33 11.669z"/>
+  <path d="M30.296 27.561L16.07 2.921l.023-.014 14.227 24.64-.023.014zM3.629 11.1h.026v15.79H3.63V11.1z"/>
+  <path d="M29.688 11.1h.026v15.79h-.026V11.1z"/>
+  <path d="M31.876 27.774l-.001.003a2.508 2.508 0 01-3.423.917 2.508 2.508 0 01-.916-3.422 2.508 2.508 0 013.421-.917 2.494 2.494 0 01.92 3.42zM5.797 12.717a2.508 2.508 0 01-3.422.917 2.508 2.508 0 01-.916-3.423 2.508 2.508 0 013.42-.917 2.51 2.51 0 01.918 3.423zm-4.329 15.06a2.51 2.51 0 01.918-3.423 2.51 2.51 0 013.422.92 2.51 2.51 0 01-.919 3.42 2.506 2.506 0 01-3.421-.917zm26.077-15.06a2.51 2.51 0 01.918-3.423 2.51 2.51 0 013.422.919 2.51 2.51 0 01-.919 3.421 2.508 2.508 0 01-3.42-.917zM16.671 36.558a2.5 2.5 0 01-2.503-2.503 2.5 2.5 0 012.503-2.503 2.5 2.5 0 012.503 2.503 2.506 2.506 0 01-2.503 2.503zm0-30.121a2.5 2.5 0 01-2.503-2.503 2.5 2.5 0 012.503-2.503 2.5 2.5 0 012.503 2.503 2.5 2.5 0 01-2.503 2.503z"/>
+</svg>
diff --git a/www/src/assets/icons/layer-icon.js b/www/src/assets/icons/layer-icon.js
diff --git a/www/src/assets/icons/react-logo.svg b/www/src/assets/icons/react-logo.svg
@@ -0,0 +1,4 @@
+<svg width="38" height="34" viewBox="0 0 38 34" fill="currentColor" xmlns="http://www.w3.org/2000/svg" focusable="false">
+  <path d="M21.46 16.875a2.584 2.584 0 11-5.17 0 2.584 2.584 0 015.17 0z"/>
+  <path d="M0 17h1.72c0 1.222 1.773 2.763 4.515 3.939a23.66 23.66 0 002.169.794 36.973 36.973 0 011.72-4.717L10.117 17h1.923l-.011.023a40.659 40.659 0 001.611 3.098 42.939 42.939 0 001.874 2.958 40.102 40.102 0 006.987-.008A41.481 41.481 0 0025.967 17h1.909a37.48 37.48 0 011.735 4.725c.752-.242 1.48-.498 2.146-.786 2.742-1.168 4.516-2.717 4.524-3.939H38c0 2.522-3.137 4.92-7.94 6.406 1.124 4.935.636 8.866-1.54 10.127-.512.296-1.1.436-1.751.436-2.13 0-4.919-1.51-7.738-4.141C16.211 32.474 13.423 34 11.293 34c-.65 0-1.24-.14-1.743-.436-2.184-1.26-2.68-5.2-1.564-10.15C3.152 21.927 0 19.53 0 17zm27.938 5.184a33.446 33.446 0 00-1.069-3.098c-.317.623-.65 1.253-1.006 1.876-.357.63-.736 1.245-1.116 1.845a34.642 34.642 0 003.191-.623zm-11.076 2.717c.713.91 1.433 1.743 2.154 2.49a30.335 30.335 0 002.13-2.49 39.12 39.12 0 01-2.154.054c-.72 0-1.433-.023-2.13-.054zm-6.785-2.71c1.015.25 2.076.452 3.176.616a51.382 51.382 0 01-1.116-1.822 36.873 36.873 0 01-1.014-1.868 35.169 35.169 0 00-1.046 3.075zm-.829 3.978c-.356 2.974.101 5.286 1.154 5.893.233.132.527.202.876.21 1.61 0 3.98-1.292 6.506-3.65a37.922 37.922 0 01-3.222-3.893 37.37 37.37 0 01-4.919-.848c-.17.786-.31 1.557-.395 2.288zm18.396 5.862c1.046-.615 1.495-2.927 1.131-5.9a21.902 21.902 0 00-.403-2.266c-1.518.382-3.175.67-4.926.857a36.737 36.737 0 01-3.199 3.884c2.525 2.343 4.903 3.627 6.506 3.627.357 0 .659-.062.891-.202zM38 17h-1.72c0-1.222-1.773-2.763-4.515-3.939a23.461 23.461 0 00-2.169-.794 36.976 36.976 0 01-1.72 4.717l.007.016H25.96l.011-.023a40.64 40.64 0 00-1.611-3.098 42.939 42.939 0 00-1.875-2.958 40.102 40.102 0 00-6.986.008A41.481 41.481 0 0012.033 17h-1.909a37.482 37.482 0 01-1.736-4.725c-.75.242-1.479.498-2.145.786C3.501 14.23 1.727 15.778 1.72 17H0c0-2.522 3.137-4.92 7.94-6.406C6.815 5.659 7.303 1.728 9.48.467c.512-.296 1.1-.436 1.751-.436 2.13 0 4.919 1.51 7.738 4.141C21.789 1.526 24.577 0 26.707 0c.65 0 1.24.14 1.743.436 2.184 1.26 2.68 5.2 1.564 10.15C34.847 12.073 38 14.47 38 17zm-27.938-5.184c.294 1.012.65 2.055 1.069 3.098.317-.623.65-1.253 1.006-1.876.357-.63.736-1.245 1.116-1.845a34.608 34.608 0 00-3.191.623zm11.076-2.717a32.031 32.031 0 00-2.154-2.49 30.338 30.338 0 00-2.13 2.49 39.16 39.16 0 012.154-.054c.72 0 1.433.023 2.13.054zm6.785 2.71a34.842 34.842 0 00-3.176-.616c.38.592.752 1.199 1.116 1.822.364.622.697 1.245 1.014 1.868.403-1.035.76-2.07 1.046-3.075zm.829-3.978c.356-2.974-.101-5.286-1.154-5.893-.233-.132-.527-.202-.876-.21-1.61 0-3.98 1.292-6.506 3.65a37.926 37.926 0 013.222 3.893c1.743.186 3.4.474 4.919.848.17-.786.31-1.557.395-2.288zM10.356 1.969c-1.046.615-1.495 2.927-1.131 5.9.085.724.225 1.48.403 2.266a36.009 36.009 0 014.926-.857 36.727 36.727 0 013.199-3.884c-2.525-2.343-4.903-3.627-6.506-3.627-.357 0-.659.062-.891.202z"/>
+</svg>
diff --git a/www/src/components/layer-model/layer-model.js b/www/src/components/layer-model/layer-model.js
@@ -45,11 +45,13 @@ const Layer = ({ buttonRef, layer, onClick, selected, index }) => {
           p: 2,
         }}
       >
-        <span css={{ height: 40 }}>
-          <LayerIcon
-            name={icon}
-            fillColor={selected ? colors[baseColor][70] : colors.grey[50]}
-          />
+        <span
+          sx={{
+            height: 40,
+            color: selected ? colors[baseColor][70] : colors.grey[50],
+          }}
+        >
+          <LayerIcon name={icon} />
         </span>
         <span>{title}</span>
       </span>
