[KiRi] Removed the use of iconify

- Now the icons are included in the images folder

kibot/out_kiri.py

@@ -22,7 +22,7 @@ Dependencies:
 import datetime
 import pwd
 import os
-from shutil import copy2, rmtree
+from shutil import copy2, rmtree, copytree
 from subprocess import CalledProcessError
 from tempfile import mkdtemp, NamedTemporaryFile
 from .error import KiPlotConfigurationError
@@ -41,11 +41,6 @@ UNDEF_COLOR = '#DBDBDB'
 LAYER_COLORS_HEAD = """/* ==============================
    Layer colors
 ** ============================*/
-
-.layer_color_margin {
-        margin-left:0.5em;
-        margin-right:0.1em;
-}
 """
 
 
@@ -190,11 +185,11 @@ class KiRiOptions(VariantOptions):
         copy2(os.path.join(src_dir, 'kiri-server'), os.path.join(self.cache_dir, 'kiri-server'))
         web_dir = os.path.join(self.cache_dir, 'web')
         os.makedirs(web_dir, exist_ok=True)
-        copy2(os.path.join(src_dir, 'blank.svg'), os.path.join(web_dir, 'blank.svg'))
         copy2(os.path.join(src_dir, 'favicon.ico'), os.path.join(web_dir, 'favicon.ico'))
         copy2(os.path.join(src_dir, 'kiri.css'), os.path.join(web_dir, 'kiri.css'))
         copy2(os.path.join(src_dir, 'kiri.js'), os.path.join(web_dir, 'kiri.js'))
         copy2(os.path.join(src_dir, 'index.html'), os.path.join(web_dir, 'index.html'))
+        copytree(os.path.join(src_dir, 'images'), os.path.join(web_dir, 'images'), dirs_exist_ok=True)
         # Colors for the layers
         with open(os.path.join(web_dir, 'layer_colors.css'), 'wt') as f:
             f.write(LAYER_COLORS_HEAD)

kibot/resources/kiri/images/center-to-fit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M8 2H2v6h2V4h4zm16 0h6v6h-2V4h-4zM8 30H2v-6h2v4h4zm16 0h6v-6h-2v4h-4zm0-6H8a2.002 2.002 0 0 1-2-2V10a2.002 2.002 0 0 1 2-2h16a2.002 2.002 0 0 1 2 2v12a2.002 2.002 0 0 1-2 2M8 10v12h16V10z"/></svg>

kibot/resources/kiri/images/circuit-board.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M14.5 1h-13l-.5.5v13l.5.5h13l.5-.5v-13zM14 14H5v-2h2.3c.3.6 1 1 1.7 1c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2H4v3H2V2h2v2.3c-.6.3-1 1-1 1.7c0 1.1.9 2 2 2s2-.9 2-2h2c0 1.1.9 2 2 2s2-.9 2-2s-.9-2-2-2c-.7 0-1.4.4-1.7 1H6.7c-.3-.6-1-1-1.7-1V2h9zm-6-3c0-.6.4-1 1-1s1 .4 1 1s-.4 1-1 1s-1-.4-1-1M5 5c.6 0 1 .4 1 1s-.4 1-1 1s-1-.4-1-1s.4-1 1-1m6 0c.6 0 1 .4 1 1s-.4 1-1 1s-1-.4-1-1s.4-1 1-1"/></svg>

kibot/resources/kiri/images/code-branch-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path opacity="1" fill="#FFFFFF" d="M384 144c0-44.2-35.8-80-80-80s-80 35.8-80 80c0 36.4 24.3 67.1 57.5 76.8-.6 16.1-4.2 28.5-11 36.9-15.4 19.2-49.3 22.4-85.2 25.7-28.2 2.6-57.4 5.4-81.3 16.9v-144c32.5-10.2 56-40.5 56-76.3 0-44.2-35.8-80-80-80S0 35.8 0 80c0 35.8 23.5 66.1 56 76.3v199.3C23.5 365.9 0 396.2 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-34-21.2-63.1-51.2-74.6 3.1-5.2 7.8-9.8 14.9-13.4 16.2-8.2 40.4-10.4 66.1-12.8 42.2-3.9 90-8.4 118.2-43.4 14-17.4 21.1-39.8 21.6-67.9 31.6-10.8 54.4-40.7 54.4-75.9zM80 64c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm0 384c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16zm224-320c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16z"/></svg>

kibot/resources/kiri/images/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" d="M12 7h.01"/><path stroke-linecap="round" stroke-linejoin="round" d="M10 11h2v5m-2 0h4"/></g></svg>

kibot/resources/kiri/images/layers-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="M7.697 1.04a.5.5 0 0 0-.394 0l-7 3a.5.5 0 0 0 0 .92l7 3a.5.5 0 0 0 .394 0l7-3a.5.5 0 0 0 0-.92z"/><path fill="currentColor" d="M7.5 9.956L.697 7.04l-.394.92L7.5 11.044l7.197-3.084l-.394-.92z"/><path fill="currentColor" d="m.697 10.04l-.394.92L7.5 14.044l7.197-3.084l-.394-.92L7.5 12.956z"/></svg>

kibot/resources/kiri/images/next-page.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18 8h-8V6h8zm4-4v8l-6 6H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2m-2 0H8v12h6v-4a2 2 0 0 1 2-2h4zM4 6a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2H4z"/></svg>

kibot/resources/kiri/images/pages.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16 8H8V6h8zm0 2H8v2h8zm4-6v12l-6 6H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2m-2 10V4H6v16h6v-4a2 2 0 0 1 2-2z"/></svg>

kibot/resources/kiri/images/schematics.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M27 19.001A4.006 4.006 0 0 0 23 15H9a2.003 2.003 0 0 1-2-2V9.857A3.995 3.995 0 0 0 9.858 7h12.284a4 4 0 1 0 0-2H9.858A3.992 3.992 0 1 0 5 9.858v3.141A4.006 4.006 0 0 0 9.001 17H23a2.003 2.003 0 0 1 2 2.001V22h-3v3H9.858a4 4 0 1 0 0 2H22v3h8v-8h-3ZM26 4a2 2 0 1 1-2 2a2.002 2.002 0 0 1 2-2M4 6a2 2 0 1 1 2 2a2.002 2.002 0 0 1-2-2m2 22a2 2 0 1 1 2-2a2.002 2.002 0 0 1-2 2m22-4v4h-4v-4Z"/></svg>

kibot/resources/kiri/images/square-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="M1.5 0A1.5 1.5 0 0 0 0 1.5v12A1.5 1.5 0 0 0 1.5 15h12a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 13.5 0z"/></svg>

kibot/resources/kiri/images/zoom-in.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21l-4.486-4.494M19 10.5a8.5 8.5 0 1 1-17 0a8.5 8.5 0 0 1 17 0ZM10.5 7v3.5m0 0V14m0-3.5H14m-3.5 0H7"/></svg>

kibot/resources/kiri/images/zoom-out.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21l-4.486-4.494M19 10.5a8.5 8.5 0 1 1-17 0a8.5 8.5 0 0 1 17 0Zm-6 0H8"/></svg>

kibot/resources/kiri/index.html

@@ -3,8 +3,11 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-		<script src="https://cdn.rawgit.com/ccampbell/mousetrap/825ce50c/mousetrap.min.js"></script>
+		<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+		<!-- <script src="./jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> -->
+		<!-- <script src="https://cdn.rawgit.com/ccampbell/mousetrap/825ce50c/mousetrap.min.js"></script> -->
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
+		<!-- <link rel="stylesheet" href="./bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> -->
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 		<link rel="icon" href="./favicon.ico" type="image/x-icon">
 		<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
@@ -35,8 +38,7 @@
 						</div>
 						<!-- Commits -->
 						<p class="text-light">
-							<span class="iconify icon-commits" data-icon="fa-solid:code-branch" data-inline="false"></span>
+							<span class="icon-commits"></span> Commits
-							Commits
 						</p>
 						<div class="form-check scrollbox ui-commits-list">
 							<form id="commits_form" class="overflow-auto scrollbox-content">
@@ -57,11 +59,11 @@
 									<div id="view_mode" class="form-group row btn-group btn-group-toggle" data-toggle="buttons" role="group" aria-label="View Mode">
 										<label id="show_sch_lbl" data-toggle="tooltip" title="Schematic View (s)" class="btn btn-secondary active" onclick="show_sch()">
 											<input id="show_sch" type="radio" name="view_mode" value="show_sch" checked>
-											<span class="iconify icon-control" data-icon="carbon:schematics" data-inline="false"></span>
+											<div class="icon-control-sch"></div>
 										</label>
 										<label id="show_pcb_lbl" data-toggle="tooltip" title="Layout View (s)" class="btn btn-secondary" onclick="show_pcb()">
 											<input id="show_pcb" type="radio" name="view_mode" value="show_pcb" >
-											<span class="iconify icon-control" data-icon="codicon:circuit-board" data-inline="false"></span>
+											<div class="icon-control-pcb"></div>
 										</label>
 									</div>
 								</form>
@@ -71,13 +73,13 @@
 								<form class="inline ui-controls-svg">
 									<div id="svg_controls" class="form-group btn-group btn-group-toggle" role="group" aria-label="Zoom Level">
 										<button id="zoom-in" data-toggle="tooltip" title="Zoom In (+)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();">
-										<span class="iconify icon-control" data-icon="akar-icons:zoom-in" data-inline="false"></span>
+										<span class="icon-control-zin"></span>
 										</button>
 										<button id="zoom-out" data-toggle="tooltip" title="Zoom Out (-)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();">
-										<span class="iconify icon-control" data-icon="akar-icons:zoom-out" data-inline="false"></span>
+										<span class="icon-control-zout"></span>
 										</button>
 										<button id="zoom-fit" data-toggle="tooltip" title="Fit View (0)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();">
-										<span class="iconify icon-control" data-icon="carbon:center-to-fit" data-inline="false"></span>
+										<span class="icon-control-center"></span>
 										</button>
 									</div>
 								</form>
@@ -87,7 +89,7 @@
 								<form class="inline ui-controls-info">
 									<div id="info_controls" class="form-group btn-group btn-group-toggle" role="group" aria-label="Info" >
 										<button id="info-btn" data-toggle="modal" title="Info (i)" name="info_controls" type="button" aria-pressed="false" class="btn btn-secondary" data-target="#shortcuts-modal" onclick="this.blur();">
-											<span class="iconify icon-control" data-icon="akar-icons:info" data-inline="false"></span>
+											<span class="icon-control-info"></span>
 										</button>
 									</div>
 								</form>
@@ -101,7 +103,7 @@
 							<div id="legend" class="rounded no-gutters ui-legend">
 								<iframe name="hidden_post_target" class="hidden_iframe"></iframe>
 								<div id="commit1" class="commit1" style="visibility: visible;">
-									<span id="commit1_legend" class="iconify icon-commit1 icon-commit1-color" data-icon="teenyicons-square-solid"></span>
+									<span id="commit1_legend" class="icon-commit1 icon-commit1-color"></span>
 									<small id="commit1_legend_text" class="text-sm text-light">
 										Newer
 										<span class="text-monospace">
@@ -115,7 +117,7 @@
 								</div>
 								<span class="ui-legend-sep1"></span>
 								<div id="commit2" class="commit2" style="visibility: visible;">
-									<span id="commit2_legend" class="iconify icon-commit2 icon-commit2-color" data-icon="teenyicons-square-solid"></span>
+									<span id="commit2_legend" class="icon-commit2 icon-commit2-color"></span>
 									<small id="commit2_legend_text" class="text-sm text-light">
 										Older
 										<span class="text-monospace">
@@ -128,7 +130,7 @@
 									</small>
 								</div>
 								<div id="commit3" class="commit3" style="visibility: visible;">
-									<span id="commit3_legend" class="iconify icon-commit3" data-icon="teenyicons-square-solid"></span>
+									<span id="commit3_legend" class="icon-commit3"></span>
 									<small id="commit3_legend_text" class="text-sm text-light">
 										Unchanged
 									</small>
@@ -149,8 +151,7 @@
 						<!-- Sheets form -->
 						<div class="form-check no-gutters ui-sheets-form">
 							<p class="text-light">
-								<span class="iconify icon-sheets" data-icon="gridicons:next-page" data-inline="false"></span>
+								<span class="icon-sheets"></span> Pages
-								Pages
 							</p>
 							<div class="row ui-sheets-form-row">
 								<div class="col ui-sheets-form-col">
@@ -167,8 +168,7 @@
 					<div class="list-group no-gutters" id="layers_list" style="display: none;">
 						<div class="form-check no-gutters ui-sheets-form">
 							<p class="text-light">
-								<span class="iconify icon-sheets" data-icon="teenyicons:layers-solid" data-inline="false"></span>
+								<span class="icon-layers"></span> Layers
-								Layers
 							</p>
 							<div class="row ui-sheets-form-row">
 								<div class="col ui-sheets-form-col">
@@ -202,19 +202,19 @@
 						<table>
 							<tbody>
 							<tr>
-								<td class="shortcut_col"><small class="text-sm text-muted"><kbd><span class="iconify" data-icon="typcn-arrow-up" data-inline="false"></span></kbd></small></td>
+								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>&#x21E7;</kbd></small></td>
 								<td>Move commits par upwards</td>
 							</tr>
 							<tr>
-								<td class="shortcut_col"><small class="text-sm text-muted"><kbd><span class="iconify" data-icon="typcn-arrow-down" data-inline="false"></span></kbd></small></td>
+								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>&#x21E9;</kbd></small></td>
 								<td>Move commits par downwards</td>
 							</tr>
 							<tr>
-								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>[</kbd> or <kbd>Ctrl + <span class="iconify" data-icon="typcn-arrow-up" data-inline="false"></span></kbd></small></td>
+								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>[</kbd> or <kbd>Ctrl+&#x21E7;</kbd></small></td>
 								<td>Move 2nd commit upwards</td>
 							</tr>
 							<tr>
-								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>]</kbd> or <kbd>Ctrl + <span class="iconify" data-icon="typcn-arrow-down" data-inline="false"></span></kbd></small></td>
+								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>]</kbd> or <kbd>Ctrl+&#x21E9;</kbd></small></td>
 								<td>Move 2nd commit downwards</td>
 							</tr>
 							<tr>
@@ -242,19 +242,19 @@
 								<td>Toggle visibility of older commit</td>
 							</tr>
 							<tr>
-								<td class="shortcut_col"><small class="text-sm text-muted"><kbd><span class="iconify" data-icon="typcn-arrow-right" data-inline="false"></span></kbd></small></td>
+								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>&#x21E8;</kbd></small></td>
 								<td>Select next page/layer</td>
 							</tr>
 							<tr>
-								<td class="shortcut_col"><small class="text-sm text-muted"><kbd><span class="iconify" data-icon="typcn-arrow-left" data-inline="false"></span></kbd></small></td>
+								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>&#x21E6;</kbd></small></td>
 								<td>Select previous page/layer</td>
 							</tr>
 							<tr>
-								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Ctrl + <span class="iconify" data-icon="typcn-arrow-right" data-inline="false"></span></kbd></small></td>
+								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Ctrl + &#x21E8;</kbd></small></td>
 								<td>Select next page/layer (cycling)</td>
 							</tr>
 							<tr>
-								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Ctrl + <span class="iconify" data-icon="typcn-arrow-left" data-inline="false"></span></kbd></small></td>
+								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Ctrl + &#x21E6;</kbd></small></td>
 								<td>Select previous page/layer (cycling)</td>
 							</tr>
 							</tbody>
@@ -278,19 +278,19 @@
 								<td>Zoom fit</td>
 							</tr>
 							<tr>
-								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + <span class="iconify" data-icon="typcn-arrow-up" data-inline="false"></span></kbd></small></td>
+								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + &#x21E7;</kbd></small></td>
 								<td>Pan svg up</td>
 							</tr>
 							<tr>
-								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + <span class="iconify" data-icon="typcn-arrow-down" data-inline="false"></span></kbd></small></td>
+								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + &#x21E9;</kbd></small></td>
 								<td>Pan svg down</td>
 							</tr>
 							<tr>
-								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + <span class="iconify" data-icon="typcn-arrow-left" data-inline="false"></span></kbd></small></td>
+								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + &#x21E8;</kbd></small></td>
 								<td>Pan svg left</td>
 							</tr>
 							<tr>
-								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + <span class="iconify" data-icon="typcn-arrow-right" data-inline="false"></span></kbd></small></td>
+								<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + &#x21E6;</kbd></small></td>
 								<td>Pan svg right</td>
 							</tr>
 							</tbody>
@@ -322,8 +322,9 @@
 			</div>
 		</div>
 
-		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
+		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> -->
-		<script src="https://code.iconify.design/2/2.2.1/iconify.min.js" integrity=""></script>
+		<!-- <script src="./bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> -->
+		<!-- <script src="https://code.iconify.design/2/2.2.1/iconify.min.js" integrity=""></script> -->
 		<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js" integrity=""></script>
 		<script src="./kiri.js" integrity="" crossorigin="anonymous"></script>
 	</body>

kibot/resources/kiri/kiri.css

@@ -258,11 +258,36 @@ hr {
 .icon-sheet-page {
 	margin-left: 0.5em;
 	margin-right: 0.1em;
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	background-color: currentColor;
+	--svg: url('./images/pages.svg');
+	-webkit-mask-image: var(--svg);
+	mask-image: var(--svg);
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: 100% 100%;
+	mask-size: 100% 100%;
 }
 
 .icon-commits {
 	margin-left: 5px;
 	margin-right:0.5em;
+	/* Add dimensions to span */
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	/* Add background color */
+	background-color: currentColor;
+	/* Add mask image, use variable to reduce duplication */
+	--svg: url('./images/code-branch-solid.svg');
+	-webkit-mask-image: var(--svg);
+	mask-image: var(--svg);
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: 100% 100%;
+	mask-size: 100% 100%;
 }
 
 .icon-control {
@@ -271,10 +296,61 @@ hr {
 }
 
 
-.icon-commit1, .icon-commit1-fs {
+.icon-control-sch, .icon-control-pcb, .icon-control-zin, .icon-control-zout, .icon-control-center, .icon-control-info {
-	margin-right: 0.2em;
+	display: block;
+	width: 20px;
+	height: 20px;
+	margin: 0.2em;
+	background-color: currentColor;
+	-webkit-mask-image: var(--svg);
+	mask-image: var(--svg);
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: 100% 100%;
+	mask-size: 100% 100%;
+}
+
+.icon-control-sch {
+	--svg: url('./images/schematics.svg');
+}
+
+.icon-control-pcb {
+	--svg: url('./images/circuit-board.svg');
+}
+
+.icon-control-zin {
+	--svg: url('./images/zoom-in.svg');
+}
+
+.icon-control-zout {
+	--svg: url('./images/zoom-out.svg');
+}
+
+.icon-control-center {
+	--svg: url('./images/center-to-fit.svg');
+}
+
+.icon-control-info {
+	--svg: url('./images/info.svg');
+}
+
+
+.icon-commit1, .icon-commit1-fs, .icon-commit2, .icon-commit2-fs, .icon-commit3, .icon-commit3-fs {
+	display: inline-block;
 	width: 10px;
 	height: 10px;
+	background-color: currentColor;
+	--svg: url('./images/square-solid.svg');
+	-webkit-mask-image: var(--svg);
+	mask-image: var(--svg);
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: 100% 100%;
+	mask-size: 100% 100%;
+}
+
+.icon-commit1, .icon-commit1-fs {
+	margin-right: 0.2em;
 }
 
 .icon-commit1 {
@@ -290,12 +366,9 @@ hr {
 }
 
 .icon-commit2, .icon-commit2-fs {
-	display: inline;
 	margin-left: 1em;
 	margin-right:0.2em;
 	color: #FF0000;
-	width: 10px;
-	height: 10px;
 }
 
 .icon-commit2-color {
@@ -306,41 +379,74 @@ hr {
 	color: #A7A7A7;
 }
 
-.icon-commit3 {
+.icon-commit3, .icon-commit3-fs {
 	margin-left:1em;
 	margin-right:0.2em;
 	color: #FFA000;
-	width: 10px;
-	height: 10px;
 }
 
-.icon-commit3-fs {
-	margin-left: 1em;
-	margin-right: 0.2em;
-	color: #FFA000;
-	width: 10px;
-	height: 10px;
-}
 
-.icon-sch-pcb-modif {
+.icon-sch-modif, .icon-pcb-modif {
+	display: inline-block;
 	padding-left: 0px;
 	padding-right: 0px;
 	width: 14px;
 	height: 14px;
+	background-color: currentColor;
+	-webkit-mask-image: var(--svg);
+	mask-image: var(--svg);
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: 100% 100%;
+	mask-size: 100% 100%;
 }
 
 .icon-sch-modif {
+	--svg: url('./images/schematics.svg');
 	color: #A6E22E;
 }
 
 .icon-pcb-modif {
+	--svg: url('./images/circuit-board.svg');
 	color: #F92672;
 }
 
-.icon-sheets {
+.icon-sheets, .icon-layers {
 	margin-right:0.5em;
 	width: 20px;
 	height: 20px;
+	display: inline-block;
+	background-color: currentColor;
+	-webkit-mask-image: var(--svg);
+	mask-image: var(--svg);
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: 100% 100%;
+	mask-size: 100% 100%;
+}
+
+.icon-sheets {
+	--svg: url('./images/next-page.svg');
+}
+
+.icon-layers {
+	--svg: url('./images/layers-solid.svg');
+}
+
+.layer_color_margin {
+	margin-left:0.5em;
+	margin-right:0.1em;
+	width: 0.7em;
+	height: 0.7em;
+	display: inline-block;
+	background-color: currentColor;
+	--svg: url('./images/square-solid.svg');
+	-webkit-mask-image: var(--svg);
+	mask-image: var(--svg);
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: 100% 100%;
+	mask-size: 100% 100%;
 }
 
 .ui-style {
@@ -541,3 +647,4 @@ hr {
 .commit1, .commit2, .commit3 {
 	display: inline;
 }
+

kibot/resources/kiri/kiri.js

@@ -43,9 +43,9 @@ var layers_commit2 = new Set();
 // Displayed PCB layers
 var current_layers_list = [];
 // Icon to indicate the schematic was changed in a commit
-const SCH_IMG = '<span class="iconify icon-sch-pcb-modif icon-sch-modif" data-inline="false"; data-icon="carbon:schematics"></span>';
+const SCH_IMG = '<span class="icon-sch-modif"></span>';
 // Icon to indicate the PCB was changed in a commit
-const PCB_IMG = '<span class="iconify icon-sch-pcb-modif icon-pcb-modif" data-inline="false"; data-icon="codicon:circuit-board"></span>';
+const PCB_IMG = '<span class="icon-pcb-modif"></span>';
 // Color for the commit1
 var commit1_legend_color;
 // Color for the commit2
@@ -548,13 +548,13 @@ function update_selected_page()
     if (sheet_pages_commit1.has(page_filename)) {
         image_path_1 = "../" + commit1.value + "/_KIRI_/sch/" + page_filename + ".svg";
     } else {
-        image_path_1 = "blank.svg";
+        image_path_1 = "images/blank.svg";
     }
 
     if (sheet_pages_commit2.has(page_filename)) {
         image_path_2 = "../" + commit2.value + "/_KIRI_/sch/" + page_filename + ".svg";
     } else {
-        image_path_2 = "blank.svg";
+        image_path_2 = "images/blank.svg";
     }
 
     console.log("[SCH] page_filename =", page_filename);
@@ -650,7 +650,7 @@ function update_sheets_list() {
         var input_html = `
         <input id="${sheet}" data-toggle="tooltip" title="${sheet}" type="radio" value="${sheet}" name="pages" onchange="change_selected_page(${index})">
             <label for="${sheet}" data-toggle="tooltip" title="${sheet}" id="label-${sheet}" class="rounded text-sm-left list-group-item radio-box">
-                <span data-toggle="tooltip" title="${sheet}" class="iconify icon-sheet-page" data-icon="gridicons:pages" data-inline="false"></span>
+                <span data-toggle="tooltip" title="${sheet}" class="icon-sheet-page"></span>
                 <span class="${color_style}">${visible_sheet}</span>
             </label>
         </label>
@@ -850,7 +850,7 @@ function update_layers_list()
         <!-- Generated Layer ${id} -->
         <input  id="layer-${id_pad}" value="layer-${layer_names}" type="radio" name="layers" onchange="change_selected_layer(${index})">
         <label for="layer-${id_pad}" id="label-layer-${id_pad}" data-toggle="tooltip" title="${id}, ${layer_names}" class="rounded text-sm-left list-group-item radio-box">
-            <span class="iconify layer_color_margin layer_color_${id}" data-icon="teenyicons-square-solid" data-inline="false"></span>
+            <span class="layer_color_margin layer_color_${id}"></span>
             <span class="${color_style}">${layer_names}</span>
         </label>
         `;
@@ -909,12 +909,12 @@ function update_selected_layer() {
     if (layers_commit1.has(layer_id)) {
         image_path_1 = "../" + commit1.value + "/_KIRI_/pcb/layer" + "-" + layer_id + ".svg";
     } else {
-        image_path_1 = "blank.svg";
+        image_path_1 = "images/blank.svg";
     }
     if (layers_commit2.has(layer_id)) {
         image_path_2 = "../" + commit2.value + "/_KIRI_/pcb/layer" + "-" + layer_id + ".svg";
     } else {
-        image_path_2 = "blank.svg";
+        image_path_2 = "images/blank.svg";
     }
 
     console.log("[PCB]      layer_id =", layer_id);
@@ -1149,6 +1149,7 @@ function createNewEmbed(src1, src2)
 
     document.getElementById('diff-container').replaceWith(embed);
     document.getElementById('diff-container').innerHTML = svg_element;
+    document.getElementById('diff-container').onfullscreenchange = fullscreenchanged;
     console.log(">>> SVG: ", embed);
 
     svgpanzoom_selector = "#svg-id";
@@ -1283,7 +1284,7 @@ function update_fullscreen_label()
             label = `
                 <div id="fullscreen_label" class="alert alert-dark border border-dark rounded-pill position-absolute top-10 start-50 translate-middle ui-fs-label" role="alert">
                     <div id="commit1_div_fs" class="commit1" style="visibility: ${vis1};">
-                        <span id="commit1_legend_fs" class="iconify icon-commit1-fs icon-commit1-color" style="color: ${col1};" data-icon="teenyicons-square-solid"></span>
+                        <span id="commit1_legend_fs" class="icon-commit1-fs icon-commit1-color" style="color: ${col1};"></span>
                         <small id="commit1_legend_text_fs" class="text-sm text-light">
                             Newer
                             <span id="commit1_fs" class="text-monospace">(<a id="commit1_legend_hash">${commit1.value}</a>)</span>
@@ -1293,7 +1294,7 @@ function update_fullscreen_label()
                     <span class="ui-legend-sep1-fs"></span>
 
                     <div id="commit2_div_fs" class="commit2" style="visibility: ${vis2};">
-                        <span id="commit2_legend_fs" class="iconify icon-commit2-fs icon-commit2-color" style="color: ${col2};" data-icon="teenyicons-square-solid"></span>
+                        <span id="commit2_legend_fs" class="icon-commit2-fs icon-commit2-color" style="color: ${col2};"></span>
                         <small id=commit2_legend_text_fs class="text-sm text-light">
                             Older
                             <span id="commit2_fs" class="text-monospace">(<a id="commit2_legend_hash">${commit2.value}</a>)</span>
@@ -1303,7 +1304,7 @@ function update_fullscreen_label()
                     <span class="ui-legend-sep1-fs"></span>
 
                     <div id="commit3_div_fs" class="commit3" style="visibility: ${vis3};">
-                       <span id="commit3_legend_fs" class="iconify icon-commit3-fs" data-icon="teenyicons-square-solid"></span>
+                       <span id="commit3_legend_fs" class="icon-commit3-fs"></span>
                        <small id="commit3_legend_text_fs" class="text-sm text-light">
                            Unchanged
                        </small>
@@ -1372,4 +1373,3 @@ function fullscreenchanged(event) {
     box.remove();
   }
 }
-document.getElementById("diff-container").onfullscreenchange = fullscreenchanged;