hard coded svg to save space

BenMatase · Jan 4, 2025 · c7aedd0 · c7aedd0
1 parent 166bf24
commit c7aedd0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,6 @@
 	},
 	"dependencies": {
 		"@octokit/core": "^6.1.2",
-		"@primer/octicons": "^19.14.0",
 		"octokit": "^3.1.2",
 		"webext-base-css": "^2.0.1",
 		"webext-options-sync": "^4.2.3",

diff --git a/source/render.ts b/source/render.ts
@@ -1,11 +1,5 @@
-import {getIconByName} from '@primer/octicons';
 import {type Results, type PrInfo} from './api.js';
 
-openPrIcon = getIconByName('git-pull-request');
-closedPrIcon = getIconByName('git-pull-request-closed');
-draftPrIcon = getIconByName('git-pull-request-draft');
-questionIcon = getIconByName('question');
-
 export function renderInDiv(resultDiv: HTMLDivElement, results: Results) {
 	if (resultDiv) {
 		// Clear out div
@@ -69,9 +63,9 @@ function renderList(div: HTMLElement, l: PrInfo[]) {
 			const li = document.createElement('li');
 			li.style.display = 'flex'; // Enables side by side
 
+			const svgElement = getSvgFromPrInfo(pr);
 			const svgDiv = document.createElement('div');
-			const svgHtml = getSvgHtmlFromPrInfo(pr);
-			svgDiv.innerHTML = svgHtml;
+			svgDiv.append(svgElement);
 			svgDiv.style.flexShrink = '0'; // Don't shrink
 			svgDiv.style.marginRight = '5px'; // Give some space
 			li.append(svgDiv);
@@ -98,26 +92,54 @@ function addNone(div: HTMLElement) {
 	div.append(p);
 }
 
-function getSvgHtmlFromPrInfo(prInfo: PrInfo): string {
+// I didn't want to have them copied, but the octicons package either can't
+// tree-shake out the unused ones or I'm not smart enough to figure out how
+// I also tried the css way with spans but that seems deprecated
+const openSvgPathData =
+	'M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z';
+const closedSvgPathData =
+	'M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1Zm9.5 5.5a.75.75 0 0 1 .75.75v3.378a2.251 2.251 0 1 1-1.5 0V7.25a.75.75 0 0 1 .75-.75Zm-2.03-5.273a.75.75 0 0 1 1.06 0l.97.97.97-.97a.748.748 0 0 1 1.265.332.75.75 0 0 1-.205.729l-.97.97.97.97a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-.97-.97-.97.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l.97-.97-.97-.97a.75.75 0 0 1 0-1.06ZM2.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM3.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm9.5 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z';
+const draftSvgPathData =
+	'M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1Zm9.5 14a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5ZM2.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM3.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm9.5 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM14 7.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm0-4.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z';
+
+const svgNamespace = 'http://www.w3.org/2000/svg';
+
+function getSvgFromPrInfo(prInfo: PrInfo): SVGSVGElement {
+	const svgElement = document.createElementNS(svgNamespace, 'svg');
+	svgElement.setAttribute('height', '16');
+	svgElement.setAttribute('width', '16');
+	const svgPathElement = document.createElementNS(svgNamespace, 'path');
+
+	svgElement.append(svgPathElement);
+
 	if (prInfo.isDraft) {
-		return draftPrIcon.toSVG();
+		svgElement.setAttribute('class', 'octicon octicon-git-pull-request-draft');
+		svgPathElement.setAttribute('d', draftSvgPathData);
+		return svgElement;
 	}
 
 	switch (prInfo.state) {
 		case 'open': {
-			return openPrIcon.toSVG({
-				class: 'octicon octicon-git-pull-request color-fg-open',
-			});
+			svgElement.setAttribute(
+				'class',
+				'octicon octicon-git-pull-request color-fg-open',
+			);
+			svgPathElement.setAttribute('d', openSvgPathData);
+			return svgElement;
 		}
 
 		case 'closed': {
-			return closedPrIcon.toSVG({
-				class: 'octicon octicon-git-pull-request-closed closed',
-			});
+			svgElement.setAttribute(
+				'class',
+				'octicon octicon-git-pull-request-closed closed',
+			);
+			svgPathElement.setAttribute('d', closedSvgPathData);
+			return svgElement;
 		}
 
 		default: {
-			return questionIcon.toSVG();
+			svgElement.setAttribute('class', 'octicon octicon-question');
+			return svgElement;
 		}
 	}
 }