CSS: Use inlined SVG masks for button icons instead of htmlentities

Author: jnvsor

build/kint.phar

@@ -20,6 +20,9 @@
   --foldout-zindex: 999999;
 
   --caret-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 150'><g stroke-width='2' fill='%23FFF'><path d='M1 1h28v28H1zm5 14h18m-9 9V6M1 61h28v28H1zm5 14h18' stroke='%23379'/><path d='M1 31h28v28H1zm5 14h18m-9 9V36M1 91h28v28H1zm5 14h18' stroke='%235A3'/><path d='M1 121h28v28H1zm5 5l18 18m-18 0l18-18' stroke='%23CCC'/></g></svg>");
+  --ap-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g stroke='%23000' fill='transparent'><path d='M2 8h3m3 3v3M8 2v3m3 3h3M3 8' stroke-width='2' stroke-linecap='round'/><circle stroke-width='1.5' r='4.5' cx='8' cy='8'/></g></svg>");
+  --folder-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 2h4l2 2h6v9H2V2h2' stroke-width='2' stroke='%23000' fill='transparent' stroke-linejoin='round'/></svg>");
+  --search-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g stroke='%23000' fill='transparent'><path d='M2 14l3-3' stroke-linecap='round' stroke-width='3'/><circle stroke-width='2' r='5' cx='9' cy='7'/></g></svg>");
 
   font-size: 13px;
   overflow-x: auto;
@@ -196,6 +199,7 @@
   .kint-search-trigger {
     background: color-mix(in srgb, var(--text-color) 80%, transparent);
     border-radius: 3px;
+    padding: 2px;
     height: var(--nav-size);
     width: var(--nav-size);
     font-size: var(--nav-size);
@@ -205,23 +209,37 @@
     line-height: 1;
     float: right !important;
     cursor: pointer;
-    color: var(--main-background);
     position: relative;
     overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+
+    &::before {
+      display: block;
+      content: "";
+      width: 100%;
+      height: 100%;
+      background: var(--main-background);
+      mask: center/contain no-repeat alpha;
+    }
 
     &:hover {
-      color: var(--text-color);
       background: var(--main-background);
+
+      &::before {
+        background: var(--text-color);
+      }
     }
   }
 
-  // The &telrec; icon is slightly smaller than the others,
-  // so make it a bit bigger to line it out better
-  .kint-search-trigger {
-    font-size: calc(var(--nav-size) * 1.25);
+  .kint-access-path-trigger::before {
+    mask-image: var(--ap-image);
+  }
+
+  .kint-folder-trigger::before {
+    mask-image: var(--folder-image);
+  }
+
+  .kint-search-trigger::before {
+    mask-image: var(--search-image);
   }
 
   input.kint-search {
@@ -283,7 +301,10 @@
 
     > .kint-folder-trigger {
       background: transparent;
-      color: var(--text-color);
+
+      &::before {
+        background: var(--text-color);
+      }
     }
 
     nav {

resources/compiled/aante-dark.css

@@ -221,15 +221,15 @@ public function renderHeaderWrapper(ContextInterface $c, bool $has_children, str
         $out .= '>';
 
         if (self::$access_paths && $c->getDepth() > 0 && null !== ($ap = $c->getAccessPath())) {
-            $out .= '<span class="kint-access-path-trigger" title="Show access path">&rlarr;</span>';
+            $out .= '<span class="kint-access-path-trigger" title="Show access path"></span>';
         }
 
         if ($has_children) {
             if (0 === $c->getDepth()) {
                 if (!$this->use_folder) {
-                    $out .= '<span class="kint-folder-trigger" title="Move to folder">&mapstodown;</span>';
+                    $out .= '<span class="kint-folder-trigger" title="Move to folder"></span>';
                 }
-                $out .= '<span class="kint-search-trigger" title="Show search box">&telrec;</span>';
+                $out .= '<span class="kint-search-trigger" title="Show search box"></span>';
                 $out .= '<input type="text" class="kint-search" value="">';
             }