Changed icons SVG

Changed the way colours were managed in the SVG files to make them more amenable to scripting. Changed the scripts to automate icon resizing.

Co-Authored-By: Joseph Abbey <me@josephabbey.dev>

iconResize.cmd

@@ -0,0 +1,23 @@
+@echo off
+rem -----------------------------------------------------------------------------------
+rem
+rem  Distributed under MIT Licence
+rem    See https://github.com/house-of-abbey/GarminHomeAssistant/blob/main/LICENSE.
+rem
+rem -----------------------------------------------------------------------------------
+rem
+rem  GarminHomeAssistant is a Garmin IQ application written in Monkey C and routinely
+rem  tested on a Venu 2 device. The source code is provided at:
+rem             https://github.com/house-of-abbey/GarminHomeAssistant.
+rem
+rem  J D Abbey & P A Abbey, 11 November 2025
+rem
+rem  Run the icon generation Python scripts
+rem
+rem -----------------------------------------------------------------------------------
+
+REM change the current directory to the batch file's location
+cd /d %~dp0
+python iconResize.py
+python launcherIconResize.py
+pause

iconResize.py

@@ -30,44 +30,32 @@
 #
 ####################################################################################
 
-from bs4 import BeautifulSoup, Comment
+from bs4 import BeautifulSoup
 import os
 import shutil
 
 output_dir_prefix = 'resources-icons-'
 input_dir         = output_dir_prefix + '48'
 
-Doub = 0
-Sing = 1
-Half = 2
-
-# Original icons for 416x416 screen size with 48x48 icons
-original = (96, 48, 24)
-
-# The icons need to scale as a ratio of screen size 48:416 pixels
-#
-# Icon     55  53   48   46   42   37   32   30   28   26   24   21   19  18
-# Screen  480 454  416  390  360  320  280  260  240  218  208  176  166 156
-
 # Convert icons to different screen sizes by these parameters
-lookup = {
-  #   Doub Sing Half
-  #      0   1   2
-  480: (110, 55, 28),
-  454: (106, 53, 27),
-#  416: ( 96, 48, 24),
-  390: ( 90, 46, 23),
-  360: ( 84, 42, 21),
-  320: ( 74, 38, 19),
-  295: ( 68, 34, 17), # Especially for the instinct3amoled50mm device that clip the icons
-  280: ( 64, 32, 16),
-  260: ( 60, 30, 15),
-  240: ( 56, 28, 14),
-  218: ( 50, 26, 13),
-  208: ( 48, 24, 12),
-  176: ( 42, 21, 11),
-  156: ( 36, 18,  9)
-}
+lookup = [
+  55,
+  53,
+#  48,
+  46,
+  42,
+  38,
+  34, # Especially for the instinct3amoled50mm device that clip the icons
+  32,
+  30,
+  28,
+  26,
+  24,
+  "21-w",
+  21,
+  "18-w",
+  18
+]
 
 # Delete all but the original 48x48 icon directories
 for entry in os.listdir("."):
@@ -75,8 +63,12 @@ for entry in os.listdir("."):
     shutil.rmtree(entry)
 
 # (Re-)Create the resized icon directories
-for screen_size, icon_sizes in lookup.items():
-  output_dir = output_dir_prefix + str(icon_sizes[Sing])
+for icon_size in lookup:
+  output_dir = output_dir_prefix + str(icon_size)
+  white = False
+  if isinstance(icon_size, str):
+    white = True
+    icon_size = int(icon_size.split("-")[0])
   print("\nCreate directory:", output_dir)
   if os.path.exists(output_dir) and os.path.isdir(output_dir):
     shutil.rmtree(output_dir)
@@ -87,16 +79,14 @@ for screen_size, icon_sizes in lookup.items():
       with open(input_dir + "/" + entry, "r") as f:
         soup = BeautifulSoup(f.read(), features="xml")
         svg: BeautifulSoup = list(soup.children)[0]
-        h = int(svg.attrs["height"])
-        if (h == original[Doub]):
-          svg.attrs["width"]  = lookup[screen_size][Doub]
-          svg.attrs["height"] = lookup[screen_size][Doub]
-        elif (h == original[Sing]):
-          svg.attrs["width"]  = lookup[screen_size][Sing]
-          svg.attrs["height"] = lookup[screen_size][Sing]
-        elif (h == original[Half]):
-          svg.attrs["width"]  = lookup[screen_size][Half]
-          svg.attrs["height"] = lookup[screen_size][Half]
+        svg.attrs["width"]  = icon_size
+        svg.attrs["height"] = icon_size
+        if white:
+          # Add white colour style
+          svg.find("style", id="colours").string = """
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+"""
         with open(output_dir + "/" + entry, "wb") as o:
           o.write(svg.encode("utf-8") + b"\n")
     elif entry.endswith(".xml"):

launcherIconResize.py

@@ -42,7 +42,7 @@ input_dir         = output_dir_prefix + '70-70'
 # Convert icons to different screen sizes by these parameters
 lookup = [26, 30, 33, 35, 36, 38, 40, 52, 54, 56, 60, 61, 62, 65, 68, 80]
 
-# Delete all but the original 48x48 icon directories
+# Delete all but the original 70x70 icon directories
 for entry in os.listdir("."):
   if entry.startswith(output_dir_prefix) and entry != input_dir:
     shutil.rmtree(entry)

resources-icons-18-w/error.svg

@@ -1,7 +1,11 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { stroke: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-18-w/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { fill: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-18-w/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { stroke: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-18-w/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #ffffff; }
-    .colour2 { fill: #ffffff; } 
-    rect.colour2 { stroke: #ffffff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-18-w/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { fill: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-18/error.svg

@@ -1,7 +1,11 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-18/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-18/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-18/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-18/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-21-w/error.svg

@@ -1,7 +1,11 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { stroke: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-21-w/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { fill: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-21-w/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { stroke: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-21-w/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #ffffff; }
-    .colour2 { fill: #ffffff; } 
-    rect.colour2 { stroke: #ffffff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-21-w/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { fill: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-21/error.svg

@@ -1,7 +1,11 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-21/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-21/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-21/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-21/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-24/error.svg

@@ -1,7 +1,11 @@
 <svg height="24" viewBox="0 0 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-24/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="24" viewBox="0 0 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-24/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="24" viewBox="0 0 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-24/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="24" viewBox="0 0 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-24/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="24" viewBox="0 0 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-26/error.svg

@@ -1,7 +1,11 @@
 <svg height="26" viewBox="0 0 960 960" width="26" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-26/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="26" viewBox="0 0 960 960" width="26" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-26/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="26" viewBox="0 0 960 960" width="26" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-26/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="26" viewBox="0 0 960 960" width="26" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-26/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="26" viewBox="0 0 960 960" width="26" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-28/error.svg

@@ -1,7 +1,11 @@
 <svg height="28" viewBox="0 0 960 960" width="28" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-28/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="28" viewBox="0 0 960 960" width="28" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-28/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="28" viewBox="0 0 960 960" width="28" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-28/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="28" viewBox="0 0 960 960" width="28" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-28/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="28" viewBox="0 0 960 960" width="28" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-30/error.svg

@@ -1,7 +1,11 @@
 <svg height="30" viewBox="0 0 960 960" width="30" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-30/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="30" viewBox="0 0 960 960" width="30" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-30/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="30" viewBox="0 0 960 960" width="30" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-30/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="30" viewBox="0 0 960 960" width="30" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-30/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="30" viewBox="0 0 960 960" width="30" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-32/error.svg

@@ -1,7 +1,11 @@
 <svg height="32" viewBox="0 0 960 960" width="32" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-32/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="32" viewBox="0 0 960 960" width="32" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-32/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="32" viewBox="0 0 960 960" width="32" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-32/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="32" viewBox="0 0 960 960" width="32" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-32/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="32" viewBox="0 0 960 960" width="32" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-34/error.svg

@@ -1,7 +1,11 @@
 <svg height="34" viewBox="0 0 960 960" width="34" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-34/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="34" viewBox="0 0 960 960" width="34" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-34/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="34" viewBox="0 0 960 960" width="34" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-34/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="34" viewBox="0 0 960 960" width="34" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-34/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="34" viewBox="0 0 960 960" width="34" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-38/error.svg

@@ -1,7 +1,11 @@
 <svg height="38" viewBox="0 0 960 960" width="38" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-38/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="38" viewBox="0 0 960 960" width="38" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-38/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="38" viewBox="0 0 960 960" width="38" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-38/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="38" viewBox="0 0 960 960" width="38" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-38/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="38" viewBox="0 0 960 960" width="38" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-42/error.svg

@@ -1,7 +1,11 @@
 <svg height="42" viewBox="0 0 960 960" width="42" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-42/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="42" viewBox="0 0 960 960" width="42" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-42/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="42" viewBox="0 0 960 960" width="42" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-42/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="42" viewBox="0 0 960 960" width="42" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-42/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="42" viewBox="0 0 960 960" width="42" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-46/error.svg

@@ -1,7 +1,11 @@
 <svg height="46" viewBox="0 0 960 960" width="46" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-46/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="46" viewBox="0 0 960 960" width="46" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-46/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="46" viewBox="0 0 960 960" width="46" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-46/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="46" viewBox="0 0 960 960" width="46" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-46/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="46" viewBox="0 0 960 960" width="46" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-48/error.svg

@@ -1,7 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" height="48" width="48">
+  <style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
   <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
   <circle class="colour1" cx="480" cy="480" r="400" stroke-width="60" fill-opacity="0.0" />

resources-icons-48/group_type.svg

@@ -1,7 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" height="48" width="48">
+  <style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
   <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
   <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
   <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-48/info_type.svg

@@ -1,7 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" height="48" width="48">
+  <style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
   <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
   <circle class="colour1" cx="480" cy="480" r="400" stroke-width="60" fill-opacity="0.0" />
   <g class="colour2">

resources-icons-48/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" height="48" width="48">
+  <style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
   <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
   <rect class="colour2" x="30" y="130" width="900" height="700" rx="100" ry="100" stroke-width="60" fill-opacity="0.0" />
   <text class="small colour1" x="110" y="610">1</text>

resources-icons-48/tap_type.svg

@@ -1,7 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" height="48" width="48">
+  <style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
   <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
   <g>
    <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z" />

resources-icons-53/error.svg

@@ -1,7 +1,11 @@
 <svg height="53" viewBox="0 0 960 960" width="53" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-53/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="53" viewBox="0 0 960 960" width="53" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-53/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="53" viewBox="0 0 960 960" width="53" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-53/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="53" viewBox="0 0 960 960" width="53" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-53/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="53" viewBox="0 0 960 960" width="53" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-icons-55/error.svg

@@ -1,7 +1,11 @@
 <svg height="55" viewBox="0 0 960 960" width="55" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>

resources-icons-55/group_type.svg

@@ -1,7 +1,10 @@
 <svg height="55" viewBox="0 0 960 960" width="55" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>

resources-icons-55/info_type.svg

@@ -1,7 +1,11 @@
 <svg height="55" viewBox="0 0 960 960" width="55" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">

resources-icons-55/numeric_type.svg

@@ -1,10 +1,13 @@
 <svg height="55" viewBox="0 0 960 960" width="55" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>

resources-icons-55/tap_type.svg

@@ -1,7 +1,10 @@
 <svg height="55" viewBox="0 0 960 960" width="55" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>

resources-launcher-68-68/launcher.svg

@@ -1,4 +1,4 @@
-<svg width="68" height="68" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg fill="none" height="68" viewBox="0 0 400 400" width="68" xmlns="http://www.w3.org/2000/svg">
 <path d="M320 301.762C320 310.012 313.25 316.762 305 316.762H95C86.75 316.762 80 310.012 80 301.762V211.762C80 203.512 84.77 191.993 90.61 186.153L189.39 87.3725C195.22 81.5425 204.77 81.5425 210.6 87.3725L309.39 186.162C315.22 191.992 320 203.522 320 211.772V301.772V301.762Z" fill="#F2F4F9"/>
 <path d="M309.39 186.153L210.61 87.3725C204.78 81.5425 195.23 81.5425 189.4 87.3725L90.61 186.153C84.78 191.983 80 203.512 80 211.762V301.762C80 310.012 86.75 316.762 95 316.762H187.27L146.64 276.132C144.55 276.852 142.32 277.262 140 277.262C128.7 277.262 119.5 268.062 119.5 256.762C119.5 245.462 128.7 236.262 140 236.262C151.3 236.262 160.5 245.462 160.5 256.762C160.5 259.092 160.09 261.322 159.37 263.412L191 295.042V179.162C184.2 175.822 179.5 168.842 179.5 160.772C179.5 149.472 188.7 140.272 200 140.272C211.3 140.272 220.5 149.472 220.5 160.772C220.5 168.842 215.8 175.822 209 179.162V260.432L240.46 228.972C239.84 227.012 239.5 224.932 239.5 222.772C239.5 211.472 248.7 202.272 260 202.272C271.3 202.272 280.5 211.472 280.5 222.772C280.5 234.072 271.3 243.272 260 243.272C257.5 243.272 255.12 242.802 252.91 241.982L209 285.892V316.772H305C313.25 316.772 320 310.022 320 301.772V211.772C320 203.522 315.23 192.002 309.39 186.162V186.153Z" fill="#18BCF2"/>
 </svg>

translate.cmd

@@ -14,10 +14,6 @@ rem  J D Abbey & P A Abbey, 28 December 2022
 rem
 rem  Run the automatic translation script.
 rem
-rem  Reference:
-rem   * Using Monkey C from the Command Line
-rem     https://developer.garmin.com/connect-iq/reference-guides/monkey-c-command-line-setup/
-rem
 rem -----------------------------------------------------------------------------------
 
 rem 'pip' instructs us to add this to the PATH for 'websockets.exe' and 'httpx.exe'