use js strings for svg icons (colorizable)

rolandtoth · Aug 25, 2019 · 31c7b38 · 31c7b38
1 parent 1ca8695
commit 31c7b38
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 24 deletions.
diff --git a/bin/app.js b/bin/app.js
diff --git a/icons/bar-chart.svg b/icons/bar-chart.svg
diff --git a/icons/clipboard.svg b/icons/clipboard.svg
diff --git a/icons/corner-up-left.svg b/icons/corner-up-left.svg
diff --git a/icons/list.svg b/icons/list.svg
diff --git a/icons/move.svg b/icons/move.svg
diff --git a/icons/plus-circle.svg b/icons/plus-circle.svg
diff --git a/icons/trash-2.svg b/icons/trash-2.svg
diff --git a/icons/x.svg b/icons/x.svg
diff --git a/src/Icons.js b/src/Icons.js
diff --git a/src/Utils.js b/src/Utils.js
@@ -1,3 +1,5 @@
+var Icons = require("./Icons")
+
 module.exports = {
   upperCaseFirst: (str, separator = " ") => {
     var strArr = str.indexOf(separator) !== -1 ? str.split(separator) : [str]
@@ -19,7 +21,7 @@ module.exports = {
     return str && str[0].match(/\d/)
   },
   getIcon: name => {
-    return `<img src="./icons/${name}.svg" class="icon"/>`
+    return Icons[name]
   },
   copyToClipboard: el => {
     var range, selection;

diff --git a/styles/style.css b/styles/style.css
@@ -225,7 +225,7 @@ form.property-row button {
     padding: 0.5rem;
 }
 
-.property-rows .icon {
+.property-rows svg {
     width: 1rem;
     height: auto;
     display: block;
@@ -342,34 +342,35 @@ button[disabled] {
 }
 
 .button-transparent.active,
-.button-transparent:hover {
+.button-transparent:not([disabled]):hover {
     background: transparent;
     color: var(--link-color);
 }
 
-.btnViewToggle.active {
-    filter: invert(1);
-    background: #FE9563;
-}
-
 [class*="head-"] button {
     float: right;
     margin: -0.2rem -0.33rem 0 1rem;
     padding: 0.33rem 0.5rem !important;
 }
 
 [class*="head-"] button:hover {
-    filter: invert(1);
-    background: #FE9563;
+    background: transparent;
+}
+
+[class*="head-"] button:not([disabled]):hover svg * {
+    color: var(--link-color);
 }
 
 [class*="head-"] button[disabled]:hover {
     background: transparent;
-    filter: none;
 }
 
-[class*="head-"] button:hover .icon {
-    filter: sepia(2) hue-rotate(80deg);
+[class*="head-"] button.active {
+    background: var(--link-color) !important;
+}
+
+[class*="head-"] button.active svg * {
+    color: white !important;
 }
 
 .btnAdd::before {
@@ -421,7 +422,7 @@ code:empty::after {
     text-transform: uppercase;
 }
 
-.icon {
+svg {
     width: 1.08rem;
     height: auto;
     user-select: none;