Try to simplify trooper counter

public/assets/images/counters.svg

@@ -1,7 +1,36 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <circle id="counter-base" style="stroke: none;" cx="0" cy="0" r="5"/>
+    <circle id="counter-base" style="r: inherit; stroke: none;" cx="0" cy="0" r="5"/>
+
+    <g style="r: inherit;" id="number-1">
+      <use style="r: inherit;" href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">1</text>
+    </g>
+    <g id="number-2">
+      <use href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">2</text>
+    </g>
+    <g id="number-3">
+      <use href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">3</text>
+    </g>
+    <g id="number-4">
+      <use href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">4</text>
+    </g>
+    <g id="number-5">
+      <use href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">5</text>
+    </g>
+    <g id="number-6">
+      <use href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">6</text>
+    </g>
+    <g id="number-7">
+      <use href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">7</text>
+    </g>
 
     <g id="semi-auto">
       <line x1="-2" y1="1" x2="2" y2="1"/>
@@ -15,22 +44,22 @@
     </g>
   </defs>
 
-  <g id="rifle" class="weapon-symbol">
-    <use href="#counter-base"/>
+  <g id="rifle" style="r: inherit;" class="weapon-symbol">
+    <use style="r: inherit;" href="#counter-base"/>
     <use href="#semi-auto"/>
     <line x1="0" y1="-5" x2="0" y2="5"/>
     <polyline style="fill: none;" points="-2,-3.5 0,-5 2,-3.5"/>
   </g>
 
-  <g id="smg" class="weapon-symbol">
-    <use href="#counter-base"/>
+  <g id="smg" style="r: inherit;" class="weapon-symbol">
+    <use style="r: inherit;" href="#counter-base"/>
     <use href="#auto"/>
     <line x1="0" y1="-5" x2="0" y2="4.5"/>
     <line x1="-2" y1="4.5" x2="2" y2="4.5"/>
   </g>
 
-  <g id="blazer" class="weapon-symbol">
-    <use href="#counter-base"/>
+  <g id="blazer" style="r: inherit;" class="weapon-symbol">
+    <use style="r: inherit;" href="#counter-base"/>
     <use href="#auto"/>
     <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
     <polyline points="-2,-3.5 0,-5 2,-3.5"/>