From 5b4f8d87d6d797d133b15d91999258ba2ae1cb40 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Sun, 14 Aug 2022 04:10:49 -0300
Subject: [PATCH] Improve pi-hole SVG icon

- keep using inline SVG to allow color change via CSS;
- Reuse the SVG icon in all instances, using SVG symbol;
- Simplify/reduce inline SVG code;

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/php/header_authenticated.php | 25 ++++++++++----------
 scripts/pi-hole/php/sidebar.php              | 22 ++---------------
 2 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/scripts/pi-hole/php/header_authenticated.php b/scripts/pi-hole/php/header_authenticated.php
index 0bcd1b6aa..815f0232f 100644
--- a/scripts/pi-hole/php/header_authenticated.php
+++ b/scripts/pi-hole/php/header_authenticated.php
@@ -158,6 +158,17 @@ function getTemperature()
 <div id="enableTimer" hidden><?php if (file_exists('../custom_disable_timer')) {
     echo file_get_contents('../custom_disable_timer');
 } ?></div>
+<!-- Pi-hole SVG icon - used in topmenu and sidebar -->
+<svg display="none">
+    <symbol id="pihole-svg-logo" viewBox="0 0 200 200">
+        <path d="M88.387 61.745C63.6 59.101 38.632 40.367 36.66.728c38.462 0 59.03 22.769 61.017 58.846 7.273-43.275 41.366-38.203 41.366-38.203 1.619 24.526-18.52 39.394-41.366 40.632C91.26 48.48 52.813 15.305 52.813 15.305a.108.108 0 0 0-.169.122c0 .001 37.102 32.32 35.743 46.318" fill="currentcolor"/>
+        <path d="M100 199.272c-2.399-.137-24.785-.993-26.145-26.145-1.1-15.28 10.972-26.543 10.972-41.38-2.736-36.994-52.307-32.41-52.307 0a30.472 30.472 0 0 0 8.91 21.608l36.933 36.949a30.466 30.466 0 0 0 21.607 8.908" fill="currentColor"/>
+        <path d="M167.48 131.762c-.137 2.399-.994 24.785-26.146 26.145-15.28 1.1-26.558-10.972-41.38-10.972-36.996 2.736-32.41 52.292 0 52.292a30.468 30.468 0 0 0 21.607-8.91l36.965-36.933a30.466 30.466 0 0 0 8.908-21.607" fill="currentColor"/>
+        <path d="M100 64.282c2.399.137 24.786.992 26.146 26.145 1.1 15.281-10.972 26.543-10.972 41.38 2.735 36.995 52.292 32.41 52.292 0a30.465 30.465 0 0 0-8.91-21.607l-36.949-36.965A30.468 30.468 0 0 0 100 64.326" fill="currentColor"/>
+        <path d="M32.642 131.762c.137-2.4.994-24.786 26.145-26.146 15.28-1.101 26.558 10.972 41.38 10.972 36.996-2.781 32.411-52.292 0-52.292a30.468 30.468 0 0 0-21.607 8.91l-36.964 36.949a30.472 30.472 0 0 0-8.91 21.607" fill="currentColor"/>
+    </symbol>
+</svg>
+
 <div class="wrapper">
     <header class="main-header">
         <!-- Logo -->
@@ -200,19 +211,7 @@ function getTemperature()
                             <!-- Menu Footer -->
                             <li class="user-footer">
                                 <a class="btn-link" href="https://pi-hole.net/" rel="noopener" target="_blank">
-                                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" preserveAspectRatio="xMidYMid meet" height="14" viewBox="0 0 200 200" class="svg-inline--fa custom-menu-icon fa-w-20 fa-fw menu-icon">
-                                            <g>
-                                                <linearGradient id="svg_1_1_" gradientUnits="userSpaceOnUse" x1="-317.0903" y1="393.5137" x2="-316.0898" y2="393.5137" gradientTransform="matrix(94.8803 0 0 -56.7359 30129.9492 22362.8691)">
-                                                    <stop offset="0.051" style="stop-color:currentColor;stop-opacity:0.6"></stop>
-                                                    <stop offset="0.95" style="stop-color:currentColor"></stop>
-                                                </linearGradient>
-                                                <path id="svg_1" fill="url(#svg_1_1_)" d="M89.247,64.579C66.298,62.131,43.179,44.785,41.354,8.083 c35.612,0,54.656,21.082,56.496,54.486c6.734-40.069,38.301-35.372,38.301-35.372c1.499,22.708-17.148,36.475-38.301,37.621 c-5.942-12.521-41.541-43.238-41.541-43.238c-0.042-0.036-0.104-0.03-0.14,0.011c-0.024,0.028-0.03,0.067-0.016,0.102 C56.153,21.694,90.506,51.619,89.247,64.579"></path>
-                                                <path id="svg_2" opacity="0.6" fill="currentColor" d="M100,191.916c-2.221-0.127-22.949-0.92-24.208-24.208 c-1.019-14.148,10.159-24.576,10.159-38.314c-2.533-34.253-48.431-30.009-48.431,0c-0.019,7.5,2.949,14.699,8.249,20.007 l34.197,34.211c5.307,5.299,12.506,8.268,20.006,8.248"></path>
-                                                <path id="svg_3" fill="currentColor" d="M162.48,129.408c-0.127,2.221-0.92,22.949-24.209,24.208 c-14.148,1.019-24.59-10.159-38.314-10.159c-34.254,2.533-30.009,48.417,0,48.417c7.5,0.019,14.699-2.949,20.006-8.249 l34.226-34.197c5.299-5.307,8.268-12.506,8.248-20.006"></path>
-                                                <path id="svg_4" opacity="0.6" fill="currentColor" d="M100,66.928c2.221,0.127,22.949,0.919,24.209,24.208 c1.018,14.149-10.159,24.576-10.159,38.314c2.532,34.254,48.417,30.009,48.417,0c0.019-7.5-2.949-14.698-8.25-20.006 l-34.211-34.226c-5.307-5.3-12.506-8.268-20.006-8.249"></path>
-                                                <path id="svg_5" fill="currentColor" d="M37.633,129.408c0.127-2.222,0.92-22.949,24.208-24.209 c14.148-1.019,24.59,10.159,38.314,10.159c34.254-2.575,30.009-48.417,0-48.417c-7.5-0.019-14.699,2.949-20.006,8.249 l-34.226,34.212c-5.299,5.307-8.268,12.506-8.249,20.006"></path>
-                                            </g>
-                                    </svg>
+                                    <svg class="svg-inline--fa fa-fw menu-icon" style="height: 1.25em"><use xlink:href="#pihole-svg-logo"/></svg>
                                     Pi-hole Website
                                 </a>
                                 <hr>
diff --git a/scripts/pi-hole/php/sidebar.php b/scripts/pi-hole/php/sidebar.php
index 4c907be53..605cacf57 100644
--- a/scripts/pi-hole/php/sidebar.php
+++ b/scripts/pi-hole/php/sidebar.php
@@ -236,32 +236,14 @@
                         <!-- Tail pihole.log -->
                         <li class="<?php if ($scriptname === 'taillog.php') { ?> active<?php } ?>">
                             <a href="taillog.php">
-                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" preserveAspectRatio="xMidYMid meet" height="14" viewBox="0 0 200 200" class="svg-inline--fa custom-menu-icon fa-w-20 fa-fw menu-icon">
-                                    <g>
-                                        <linearGradient id="svg_1_1_" gradientUnits="userSpaceOnUse" x1="-317.0903" y1="393.5137" x2="-316.0898" y2="393.5137" gradientTransform="matrix(94.8803 0 0 -56.7359 30129.9492 22362.8691)">
-                                            <stop offset="0.051" style="stop-color:currentColor;stop-opacity:0.6"/>
-                                            <stop offset="0.95" style="stop-color:currentColor"/>
-                                        </linearGradient>
-                                        <path id="svg_1" fill="url(#svg_1_1_)" d="M89.247,64.579C66.298,62.131,43.179,44.785,41.354,8.083 c35.612,0,54.656,21.082,56.496,54.486c6.734-40.069,38.301-35.372,38.301-35.372c1.499,22.708-17.148,36.475-38.301,37.621 c-5.942-12.521-41.541-43.238-41.541-43.238c-0.042-0.036-0.104-0.03-0.14,0.011c-0.024,0.028-0.03,0.067-0.016,0.102 C56.153,21.694,90.506,51.619,89.247,64.579"/>
-                                        <path id="svg_2" opacity="0.6" fill="currentColor" d="M100,191.916c-2.221-0.127-22.949-0.92-24.208-24.208 c-1.019-14.148,10.159-24.576,10.159-38.314c-2.533-34.253-48.431-30.009-48.431,0c-0.019,7.5,2.949,14.699,8.249,20.007 l34.197,34.211c5.307,5.299,12.506,8.268,20.006,8.248"/>
-                                        <path id="svg_3" fill="currentColor" d="M162.48,129.408c-0.127,2.221-0.92,22.949-24.209,24.208 c-14.148,1.019-24.59-10.159-38.314-10.159c-34.254,2.533-30.009,48.417,0,48.417c7.5,0.019,14.699-2.949,20.006-8.249 l34.226-34.197c5.299-5.307,8.268-12.506,8.248-20.006"/>
-                                        <path id="svg_4" opacity="0.6" fill="currentColor" d="M100,66.928c2.221,0.127,22.949,0.919,24.209,24.208 c1.018,14.149-10.159,24.576-10.159,38.314c2.532,34.254,48.417,30.009,48.417,0c0.019-7.5-2.949-14.698-8.25-20.006 l-34.211-34.226c-5.307-5.3-12.506-8.268-20.006-8.249"/>
-                                        <path id="svg_5" fill="currentColor" d="M37.633,129.408c0.127-2.222,0.92-22.949,24.208-24.209 c14.148-1.019,24.59,10.159,38.314,10.159c34.254-2.575,30.009-48.417,0-48.417c-7.5-0.019-14.699,2.949-20.006,8.249 l-34.226,34.212c-5.299,5.307-8.268,12.506-8.249,20.006"/>
-                                    </g>
-                                </svg>
+                                <svg class="svg-inline--fa fa-fw menu-icon" style="height: 1.25em"><use xlink:href="#pihole-svg-logo"/></svg>
                                 Tail pihole.log
                             </a>
                         </li>
                         <!-- Tail FTL.log -->
                         <li class="<?php if ($scriptname === 'taillog-FTL.php') { ?> active<?php } ?>">
                             <a href="taillog-FTL.php">
-                                <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" preserveAspectRatio="xMidYMid meet" height="14" viewBox="0 0 400 340" class="svg-inline--fa custom-menu-icon fa-w-20 fa-fw menu-icon">
-                                    <g fill="currentColor">
-                                        <path opacity=".6" d="M42.315 11h111.078l-7.381 31.378H34.898L42.315 11z"/>
-                                        <path d="M237.368 42.207q-13.098 62.242-26.23 124.486h-37.354q13.135-62.244 26.23-124.486h-39.652l7.381-31.174h132.055l-7.639 31.174h-54.791zm87.03 94.016L351.124 11h-37.18q-16.584 77.846-33.199 155.693h103.356v-30.47h-59.703zM32.428 67.509l-22.316 99.184h31.807l16.068-67.908h59.41l7.381-31.326-92.35.05z"/>
-                                        <path opacity=".6" d="M10 186.2a283.868 283.868 0 0 1 42.976-2.992c26.697 0 44.014 4.806 57.58 15.023 14.604 10.853 23.782 28.17 23.782 52.991 0 26.914-9.798 45.487-23.364 56.96-14.806 12.31-37.348 18.154-64.882 18.154A276.442 276.442 0 0 1 10 324.29V186.2zm31.922 114.726a57.564 57.564 0 0 0 11.054.636c28.79.201 47.564-15.659 47.564-49.24.217-29.208-16.899-44.65-44.231-44.65a66.665 66.665 0 0 0-14.387 1.241v92.013zm113.283 24.015V184.325h37.209l29.146 51.595a408.098 408.098 0 0 1 22.945 48.06h.62a523.847 523.847 0 0 1-2.697-58.618v-41.037h29.208V324.94h-33.394l-30.046-54.262a523.459 523.459 0 0 1-24.402-49.611l-.62.201c.821 18.605 1.24 38.402 1.24 61.348v42.355l-29.209-.03zm145.004-32.759a81.099 81.099 0 0 0 35.27 8.76c14.605 0 22.326-6.047 22.326-15.225 0-8.76-6.682-13.767-23.581-19.829-23.364-8.123-38.604-21.069-38.604-41.518 0-23.984 20.03-42.355 53.208-42.355a86.246 86.246 0 0 1 35.89 7.1l-7.1 25.658a66.804 66.804 0 0 0-29.456-6.666c-13.783 0-20.45 6.201-20.45 13.55 0 8.976 7.923 12.945 26.077 19.829 24.806 9.178 36.511 22.108 36.511 41.937 0 23.58-18.155 43.611-56.743 43.611-16.077 0-31.921-4.186-39.86-8.558l6.512-26.294z"/>
-                                    </g>
-                                </svg>
+                                <svg class="svg-inline--fa fa-fw menu-icon" style="height: 1.25em"><use xlink:href="#pihole-svg-logo"/></svg>
                                 Tail FTL.log
                             </a>
                         </li>