From 1105264b9e33912a5047976def859bcd61964a85 Mon Sep 17 00:00:00 2001
From: nobody <info@localcdn.org>
Date: Sun, 15 Aug 2021 07:39:00 +0200
Subject: [PATCH] UTF-8 icons replaced with SVG

---
 icons/checked.svg          | 100 +++++++++++++++++++++++++++++++++++++
 icons/credits              |   8 +++
 icons/unchecked.svg        |  98 ++++++++++++++++++++++++++++++++++++
 pages/options/options.css  |   4 ++
 pages/options/options.html |  27 ++++++++--
 5 files changed, 234 insertions(+), 3 deletions(-)
 create mode 100644 icons/checked.svg
 create mode 100644 icons/unchecked.svg

diff --git a/icons/checked.svg b/icons/checked.svg
new file mode 100644
index 00000000..101be1da
--- /dev/null
+++ b/icons/checked.svg
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   width="415.582px"
+   height="415.582px"
+   viewBox="0 0 415.582 415.582"
+   style="enable-background:new 0 0 415.582 415.582;"
+   xml:space="preserve"
+   sodipodi:docname="checked.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"><metadata
+   id="metadata41"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs39" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1680"
+   inkscape:window-height="998"
+   id="namedview37"
+   showgrid="false"
+   inkscape:zoom="0.5678783"
+   inkscape:cx="11.446114"
+   inkscape:cy="207.791"
+   inkscape:window-x="0"
+   inkscape:window-y="24"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<g
+   id="g4"
+   style="fill:#058300;fill-opacity:1">
+	<path
+   d="m 411.47,96.426 -46.319,-46.32 c -5.482,-5.482 -14.371,-5.482 -19.853,0 L 152.348,243.058 70.282,160.994 c -5.48,-5.482 -14.37,-5.482 -19.851,0 l -46.319,46.32 c -5.482,5.481 -5.482,14.37 0,19.852 l 138.311,138.31 c 2.741,2.742 6.334,4.112 9.926,4.112 3.593,0 7.186,-1.37 9.926,-4.112 L 411.47,116.277 c 2.633,-2.632 4.111,-6.203 4.111,-9.925 10e-4,-3.724 -1.478,-7.293 -4.111,-9.926 z"
+   id="path2"
+   inkscape:connector-curvature="0"
+   style="fill:#058300;fill-opacity:1" />
+</g>
+<g
+   id="g6">
+</g>
+<g
+   id="g8">
+</g>
+<g
+   id="g10">
+</g>
+<g
+   id="g12">
+</g>
+<g
+   id="g14">
+</g>
+<g
+   id="g16">
+</g>
+<g
+   id="g18">
+</g>
+<g
+   id="g20">
+</g>
+<g
+   id="g22">
+</g>
+<g
+   id="g24">
+</g>
+<g
+   id="g26">
+</g>
+<g
+   id="g28">
+</g>
+<g
+   id="g30">
+</g>
+<g
+   id="g32">
+</g>
+<g
+   id="g34">
+</g>
+</svg>
\ No newline at end of file
diff --git a/icons/credits b/icons/credits
index 431ae347..76fb91e4 100644
--- a/icons/credits
+++ b/icons/credits
@@ -41,3 +41,11 @@ CC0
 logging-dark.svg, logging-light.svg (edited)
 https://www.svgrepo.com/svg/47296/log-file-format
 CC0
+
+checked.svg (edited)
+https://www.svgrepo.com/svg/56202/checked-mark
+CC0
+
+unchecked.svg (edited)
+https://www.svgrepo.com/svg/188772/unchecked-cross
+CC0
diff --git a/icons/unchecked.svg b/icons/unchecked.svg
new file mode 100644
index 00000000..5b29bd55
--- /dev/null
+++ b/icons/unchecked.svg
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 512.001 512.001"
+   style="enable-background:new 0 0 512.001 512.001;"
+   xml:space="preserve"
+   sodipodi:docname="unchecked.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"><metadata
+   id="metadata43"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs41" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1680"
+   inkscape:window-height="998"
+   id="namedview39"
+   showgrid="false"
+   inkscape:zoom="0.46093662"
+   inkscape:cx="-163.79692"
+   inkscape:cy="256.00049"
+   inkscape:window-x="0"
+   inkscape:window-y="24"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Layer_1" />
+<polygon
+   style="fill:#DD352E;"
+   points="333.284,256.008 497.51,91.782 420.227,14.498 256.001,178.725 254.635,177.358   91.775,14.498 14.491,91.782 178.717,256.008 178.416,256.309 14.491,420.221 91.775,497.504 254.635,334.658 256.001,333.292   420.227,497.504 497.51,420.221 333.585,256.309 "
+   id="polygon2" />
+
+<path
+   d="M420.227,511.994L256.001,347.781L91.775,511.994L0,420.221l164.226-164.212L0,91.782L91.775,0.008l164.226,164.226  L420.227,0.007L512,91.781L347.775,256.007l164.226,164.212L420.227,511.994z M256.001,318.802l164.226,164.211l62.793-62.793  L318.794,256.008L483.02,91.782l-62.793-62.793L256.001,193.215L91.775,28.988L28.98,91.782l164.226,164.226L28.98,420.221  l62.793,62.793L256.001,318.802z"
+   id="path6"
+   style="fill:#dd352e;fill-opacity:1" />
+<g
+   id="g8">
+</g>
+<g
+   id="g10">
+</g>
+<g
+   id="g12">
+</g>
+<g
+   id="g14">
+</g>
+<g
+   id="g16">
+</g>
+<g
+   id="g18">
+</g>
+<g
+   id="g20">
+</g>
+<g
+   id="g22">
+</g>
+<g
+   id="g24">
+</g>
+<g
+   id="g26">
+</g>
+<g
+   id="g28">
+</g>
+<g
+   id="g30">
+</g>
+<g
+   id="g32">
+</g>
+<g
+   id="g34">
+</g>
+<g
+   id="g36">
+</g>
+</svg>
\ No newline at end of file
diff --git a/pages/options/options.css b/pages/options/options.css
index 524e9956..bef53e65 100644
--- a/pages/options/options.css
+++ b/pages/options/options.css
@@ -402,6 +402,10 @@ body[dir="rtl"] .input-text {
     padding-bottom: 0.5rem;
 }
 
+.checked-unchecked {
+    width: 10px;
+}
+
 @media only screen and (max-width: 760px) {
     .div-badge {
         border: none;
diff --git a/pages/options/options.html b/pages/options/options.html
index 3157c2c9..61860783 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -107,7 +107,14 @@
                     <textarea rows="7" id="allowlistedDomains" class="input-text without-checkbox" data-option="allowlistedDomains" type="text"></textarea>
                     <div class="description-option without-checkbox">
                         <span data-i18n-content="allowlistedDomainsDescription">Enter domains to disable LocalCDN there. One domain per line.</span><br><br>
-                        <span class="monoblock">&#9989; example.com<br>&#9989; sub.example.com<br>&#9989; *.example.com<br>&#10060; https://example.com<br>&#10060; https://*.example.com<br>&#10060; https://example.com/page/example.html</span>
+                        <span class="monoblock">
+                            <img class="checked-unchecked" src="../../icons/checked.svg"/> example.com<br>
+                            <img class="checked-unchecked" src="../../icons/checked.svg"/> sub.example.com<br>
+                            <img class="checked-unchecked" src="../../icons/checked.svg"/> *.example.com<br>
+                            <img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://example.com<br>
+                            <img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://*.example.com<br>
+                            <img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://example.com/page/example.html
+                        </span>
                     </div>
                 </section>
             </div>
@@ -152,7 +159,14 @@
                         <div class="description-option"><textarea rows="7" id="allowedDomainsGoogleFonts" class="input-text without-checkbox" data-option="allowedDomainsGoogleFonts" type="text"></textarea></div>
                         <div class="description-option">
                             <span data-i18n-content="labelDomainsAllowlistGoogleFonts">These domains are allowed to load Google Fonts. One domain per line.</span><br>
-                            <span class="monoblock">&#9989; example.com<br>&#9989; sub.example.com<br>&#9989; *.example.com<br>&#10060; https://example.com<br>&#10060; https://*.example.com<br>&#10060; https://example.com/page/example.html</span>
+                            <span class="monoblock">
+                                <img class="checked-unchecked" src="../../icons/checked.svg"/> example.com<br>
+                                <img class="checked-unchecked" src="../../icons/checked.svg"/> sub.example.com<br>
+                                <img class="checked-unchecked" src="../../icons/checked.svg"/> *.example.com<br>
+                                <img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://example.com<br>
+                                <img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://*.example.com<br>
+                                <img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://example.com/page/example.html
+                            </span>
                         </div>
                     </div>
                 </section>
@@ -185,7 +199,14 @@
                     <textarea rows="7" id="domainsManipulateDOM" class="input-text without-checkbox" data-option="domainsManipulateDOM" type="text"></textarea>
                     <div class="description-option without-checkbox">
                         <span data-i18n-content="htmlFilterDomainsDescription">Enter the domains to be handled or ignored by the HTML filter. One domain per line.</span><br>
-                        <span class="monoblock">&#9989; example.com<br>&#9989; sub.example.com<br>&#9989; *.example.com<br>&#10060; https://example.com<br>&#10060; https://*.example.com<br>&#10060; https://example.com/page/example.html</span>
+                        <span class="monoblock">
+                            <img class="checked-unchecked" src="../../icons/checked.svg"/> example.com<br>
+                            <img class="checked-unchecked" src="../../icons/checked.svg"/> sub.example.com<br>
+                            <img class="checked-unchecked" src="../../icons/checked.svg"/> *.example.com<br>
+                            <img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://example.com<br>
+                            <img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://*.example.com<br>
+                            <img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://example.com/page/example.html
+                        </span>
                     </div>
                 </section>
                 <section class="option">