Refactor icons

src/modules/stream/stream-ui.ts

@@ -1,5 +1,5 @@
 import { STATES } from "../../utils/global";
-import { Icon } from "../../utils/html";
+import { Icon, createSvgIcon } from "../../utils/html";
 import { BxEvent } from "../../utils/bx-event";
 import { PrefKey, getPref } from "../../utils/preferences";
 import { t } from "../../utils/translation";
@@ -101,25 +101,13 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: I
     const $button = $container.querySelector('button')!;
     $button.setAttribute('title', label);
 
-    const $svg = $button.querySelector('svg')!;
-    $svg.innerHTML = svgIcon;
+    const $orgSvg = $button.querySelector('svg')!;
+    const $svg = createSvgIcon(svgIcon);
     $svg.style.fill = 'none';
+    $svg.setAttribute('class', $orgSvg.getAttribute('class') || '');
+    $svg.ariaHidden = 'true';
 
-    const attrs = {
-        'fill': 'none',
-        'stroke': '#fff',
-        'fill-rule': 'evenodd',
-        'stroke-linecap': 'round',
-        'stroke-linejoin': 'round',
-        'stroke-width': '2',
-        'viewBox': '0 0 32 32'
-    };
-
-    let attr: keyof typeof attrs;
-    for (attr in attrs) {
-        $svg.setAttribute(attr, attrs[attr]);
-    }
-
+    $orgSvg.replaceWith($svg);
     return $container;
 }
 

src/modules/ui/ui.ts

@@ -1,5 +1,5 @@
 import { STATES } from "../../utils/global";
-import { Icon, CE, createButton, ButtonStyle } from "../../utils/html";
+import { Icon, CE, createButton, ButtonStyle, createSvgIcon } from "../../utils/html";
 import { UserAgent } from "../../utils/user-agent";
 import { BxEvent } from "../../utils/bx-event";
 import { MkbRemapper } from "../mkb/mkb-remapper";
@@ -300,18 +300,7 @@ function setupQuickSettingsBar() {
             continue;
         }
 
-        const $svg = CE('svg', {
-            'xmlns': 'http://www.w3.org/2000/svg',
-            'data-group': settingTab.group,
-            'fill': 'none',
-            'stroke': '#fff',
-            'fill-rule': 'evenodd',
-            'stroke-linecap': 'round',
-            'stroke-linejoin': 'round',
-            'stroke-width': 2,
-        });
-        $svg.innerHTML = settingTab.icon;
-        $svg.setAttribute('viewBox', '0 0 32 32');
+        const $svg = createSvgIcon(settingTab.icon);
         $svg.addEventListener('click', e => {
             // Switch tab
             for (const $child of Array.from($settings.children)) {