Move icons out of JavaScript

manifest.template.json

@@ -7,6 +7,10 @@
   "icons": {
     "128": "webext/icons/Heart_and_fork_inside_128.png"
   },
+  "web_accessible_resources": [
+    "webext/icons/star.svg",
+    "webext/icons/flame.svg"
+  ],
   "permissions": [
     "*://github.com/*",
     "*://api.github.com/*"

webext/data/contentscript.js

@@ -4,37 +4,17 @@ const _logName = 'lovely-forks:';
 const DEBUG = false;
 let text;
 
-const svgNS = 'http://www.w3.org/2000/svg';
-
 function createIconSVG(type) {
-    const svg = document.createElementNS(svgNS, 'svg');
-    svg.setAttributeNS(null, 'height', 12);
-    svg.setAttributeNS(null, 'width', 10.5);
-    svg.setAttributeNS(null, 'viewBox', '0 0 14 16');
-    svg.style['vertical-align'] = 'bottom';
-    svg.style['fill'] = 'currentColor';
-
-    svg.classList.add('opticon', `opticon-${type}`);
-
-    const title = document.createElementNS(svgNS, 'title');
-
-    const iconPath = document.createElementNS(svgNS, 'path');
-    switch(type) {
-        case 'star':
-            title.append('Number of stars');
-            iconPath.setAttributeNS(null, 'd', 'M14 6l-4.9-0.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14l4.33-2.33 4.33 2.33L10.4 9.26 14 6z');
-            break;
-        case 'flame':
-            title.append('Fork may be more recent than upstream.');
-            iconPath.setAttributeNS(null, 'd',  'M5.05 0.31c0.81 2.17 0.41 3.38-0.52 4.31-0.98 1.05-2.55 1.83-3.63 3.36-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-0.3-6.61-0.61 2.03 0.53 3.33 1.94 2.86 1.39-0.47 2.3 0.53 2.27 1.67-0.02 0.78-0.31 1.44-1.13 1.81 3.42-0.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52 0.13-2.03 1.13-1.89 2.75 0.09 1.08-1.02 1.8-1.86 1.33-0.67-0.41-0.66-1.19-0.06-1.78 1.25-1.23 1.75-4.09-1.88-6.22l-0.02-0.02z');
-            iconPath.setAttributeNS(null, 'fill', '#d26911');
-            break;
+    const icon = document.createElement('img');
+    if (type === 'star') {
+        icon.title = 'Number of stars';
+    } else if (type === 'flame') {
+        icon.title = 'Fork may be more recent than upstream.';
+    } else {
+        return icon;
     }
-
-    iconPath.append(title);
-    svg.append(iconPath);
-
-    return svg;
+    icon.src = chrome.extension.getURL(`webext/icons/${type}.svg`);
+    return icon;
 }
 
 function emptyElem(elem) {

webext/data/style.css

@@ -24,3 +24,8 @@
         opacity: 0;
     }
 }
+
+/* icons */
+.lovely-forks-addon img {
+    vertical-align: bottom;
+}