refator: extract svg

Author: WezSieTato

icons/barcode.svg

@@ -98,14 +98,16 @@ body {
 }
 
 #multiple-ul button:hover .code-chevron {
-    color: var(--pola-red);
+    background-color: var(--pola-red);
 }
 
 .code-icon {
     width: 18px;
     height: 18px;
     flex-shrink: 0;
-    color: var(--pola-red);
+    background-color: var(--pola-red);
+    -webkit-mask: url(../icons/barcode.svg) no-repeat center / contain;
+    mask: url(../icons/barcode.svg) no-repeat center / contain;
 }
 
 .code-value {
@@ -119,7 +121,10 @@ body {
     width: 16px;
     height: 16px;
     flex-shrink: 0;
-    color: var(--pola-inactive);
+    background-color: var(--pola-inactive);
+    -webkit-mask: url(../icons/chevron-right.svg) no-repeat center / contain;
+    mask: url(../icons/chevron-right.svg) no-repeat center / contain;
+    transition: background-color 0.15s ease;
 }
 
 #result-name {

icons/chevron-right.svg

@@ -72,20 +72,14 @@
             for (let ean of eans) {
                 let li = document.createElement('li');
                 let button = document.createElement('button');
-                button.innerHTML =
-                    '<svg class="code-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">' +
-                        '<rect x="2" y="5" width="2" height="14" rx="0.5" />' +
-                        '<rect x="6" y="5" width="1" height="14" rx="0.5" />' +
-                        '<rect x="9" y="5" width="2" height="14" rx="0.5" />' +
-                        '<rect x="13" y="5" width="1" height="14" rx="0.5" />' +
-                        '<rect x="16" y="5" width="1.5" height="14" rx="0.5" />' +
-                        '<rect x="20" y="5" width="2" height="14" rx="0.5" />' +
-                    '</svg>' +
-                    '<span class="code-value"></span>' +
-                    '<svg class="code-chevron" viewBox="0 0 24 24" fill="none" aria-hidden="true">' +
-                        '<path d="M9 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />' +
-                    '</svg>';
-                button.querySelector('.code-value').textContent = ean;
+                let icon = document.createElement('span');
+                icon.className = 'code-icon';
+                let value = document.createElement('span');
+                value.className = 'code-value';
+                value.textContent = ean;
+                let chevron = document.createElement('span');
+                chevron.className = 'code-chevron';
+                button.append(icon, value, chevron);
                 button.addEventListener('click', this.setEan.bind(this, ean));
                 li.appendChild(button);
                 ul.appendChild(li);