Skip to content

Commit f96b8f6

Browse files
double-beepdouble-beep
authored
fix: use @stackoverflow/stacks-icons to get SE SVGs
1 parent 661cf97 commit f96b8f6

8 files changed

Lines changed: 154 additions & 134 deletions

File tree

‎build.js‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import { build } from 'esbuild';
22
import info from './package.json' with { type: 'json' };
33

4-
const svgsNeeded = ['Checkmark', 'Clear', 'EyeOff', 'Flag', 'Pencil', 'Trash', 'Plus'];
5-
const svgsUrls = svgsNeeded.map(svgName => {
6-
return `// @resource icon${svgName} https://cdn.sstatic.net/Img/stacks-icons/${svgName}.svg`;
7-
});
8-
94
const userscriptHeader = `// ==UserScript==
105
// @name Advanced Flagging
116
// @namespace https://github.com/SOBotics
@@ -27,13 +22,11 @@ const userscriptHeader = `// ==UserScript==
2722
// @exclude *://stackoverflow.com/c/*
2823
// @exclude *://winterbash*.stackexchange.com/*
2924
// @exclude *://api.stackexchange.com/*
30-
${svgsUrls.join('\n')}
3125
// @grant GM_xmlhttpRequest
3226
// @grant GM_getValue
3327
// @grant GM_setValue
3428
// @grant GM_deleteValue
3529
// @grant GM_addStyle
36-
// @grant GM_getResourceText
3730
// @downloadURL https://github.com/SOBotics/AdvancedFlagging/raw/master/dist/AdvancedFlagging.user.js
3831
// @updateURL https://github.com/SOBotics/AdvancedFlagging/raw/master/dist/AdvancedFlagging.user.js
3932
// ==/UserScript==

‎dist/AdvancedFlagging.user.js‎

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,11 @@
1919
// @exclude *://stackoverflow.com/c/*
2020
// @exclude *://winterbash*.stackexchange.com/*
2121
// @exclude *://api.stackexchange.com/*
22-
// @resource iconCheckmark https://cdn.sstatic.net/Img/stacks-icons/Checkmark.svg
23-
// @resource iconClear https://cdn.sstatic.net/Img/stacks-icons/Clear.svg
24-
// @resource iconEyeOff https://cdn.sstatic.net/Img/stacks-icons/EyeOff.svg
25-
// @resource iconFlag https://cdn.sstatic.net/Img/stacks-icons/Flag.svg
26-
// @resource iconPencil https://cdn.sstatic.net/Img/stacks-icons/Pencil.svg
27-
// @resource iconTrash https://cdn.sstatic.net/Img/stacks-icons/Trash.svg
28-
// @resource iconPlus https://cdn.sstatic.net/Img/stacks-icons/Plus.svg
2922
// @grant GM_xmlhttpRequest
3023
// @grant GM_getValue
3124
// @grant GM_setValue
3225
// @grant GM_deleteValue
3326
// @grant GM_addStyle
34-
// @grant GM_getResourceText
3527
// @downloadURL https://github.com/SOBotics/AdvancedFlagging/raw/master/dist/AdvancedFlagging.user.js
3628
// @updateURL https://github.com/SOBotics/AdvancedFlagging/raw/master/dist/AdvancedFlagging.user.js
3729
// ==/UserScript==
@@ -622,10 +614,21 @@
622614
svg.setAttribute("height", height.toString());
623615
svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
624616
svg.setAttribute("aria-hidden", "true");
625-
const path = document.createElementNS(ns, "path");
626-
path.setAttribute("d", pathConfig);
627-
svg.append(path);
628-
return [svg, path];
617+
if (typeof pathConfig === "string") {
618+
const path = document.createElementNS(ns, "path");
619+
path.setAttribute("d", pathConfig);
620+
svg.append(path);
621+
return [svg, path];
622+
} else {
623+
const paths = [];
624+
pathConfig.forEach((svgPath) => {
625+
const path = document.createElementNS(ns, "path");
626+
path.setAttribute("d", svgPath);
627+
svg.append(path);
628+
paths.push(path);
629+
});
630+
return [svg, paths[0]];
631+
}
629632
};
630633

631634
// node_modules/@userscripters/stacks-helpers/dist/modals/index.js
@@ -808,16 +811,10 @@
808811
["Downvote", "downvote"],
809812
["Delete", "delete"]
810813
];
811-
var getIconPath = (name) => {
812-
const element = GM_getResourceText(name);
813-
const parsed = new DOMParser().parseFromString(element, "text/html");
814-
const path = parsed.body.querySelector("path");
815-
return path.getAttribute("d") ?? "";
816-
};
817-
var getSvg = (name) => {
818-
const element = GM_getResourceText(name);
819-
const parsed = new DOMParser().parseFromString(element, "text/html");
820-
return parsed.body.firstElementChild;
814+
var getIconPath = (svg) => {
815+
const parsed = new DOMParser().parseFromString(svg, "text/html");
816+
const paths = [...parsed.body.querySelectorAll("path")];
817+
return paths.map((path) => path.getAttribute("d") ?? "");
821818
};
822819
function displayStacksToast(message, type, dismissable) {
823820
StackExchange.helpers.showToast(message, {
@@ -1736,6 +1733,15 @@
17361733
}
17371734
};
17381735

1736+
// node_modules/@stackoverflow/stacks-icons/dist/icons.js
1737+
var IconCheckmark = '<svg aria-hidden="true" class="svg-icon iconCheckmark" width="18" height="18" viewBox="0 0 18 18"><path d="M16 4.41 14.59 3 6 11.59 2.41 8 1 9.41l5 5z"/></svg>';
1738+
var IconClear = '<svg aria-hidden="true" class="svg-icon iconClear" width="18" height="18" viewBox="0 0 18 18"><path d="M15 4.41 13.59 3 9 7.59 4.41 3 3 4.41 7.59 9 3 13.59 4.41 15 9 10.41 13.59 15 15 13.59 10.41 9z"/></svg>';
1739+
var IconEyeOff = '<svg aria-hidden="true" class="svg-icon iconEyeOff" width="18" height="18" viewBox="0 0 18 18"><path d="m5.02 9.44-2.22 2.2C1.63 10.25 1 9 1 9s3-6 8.06-6q1.13.01 2.12.38L9.5 5.03 9 5a4 4 0 0 0-3.98 4.44m2.03 3.05A4 4 0 0 0 13 9q-.01-1.1-.54-2l-1.51 1.54q.05.22.05.46a2 2 0 0 1-2.44 1.95zm7.11-7.22A15 15 0 0 1 17 9s-3 6-7.94 6c-1.31 0-2.48-.4-3.5-1l-1.97 2L2 14.41 14.59 2 16 3.41z"/></svg>';
1740+
var IconFlag = '<svg aria-hidden="true" class="svg-icon iconFlag" width="18" height="18" viewBox="0 0 18 18"><path d="M3 2v14h2v-6h3.6l.4 1h6V3H9.5L9 2z"/></svg>';
1741+
var IconPencil = '<svg aria-hidden="true" class="svg-icon iconPencil" width="18" height="18" viewBox="0 0 18 18"><path fill="#F1B600" d="m2 13.13 8.5-8.5 2.88 2.88-8.5 8.5H2z"/><path fill="#E87C87" d="m13.68 2.15 2.17 2.17c.2.2.2.51 0 .71L14.5 6.39l-2.88-2.88 1.35-1.36c.2-.2.51-.2.71 0"/></svg>';
1742+
var IconPlus = '<svg aria-hidden="true" class="svg-icon iconPlus" width="18" height="18" viewBox="0 0 18 18"><path d="M10 2H8v6H2v2h6v6h2v-6h6V8h-6z"/></svg>';
1743+
var IconTrash = '<svg aria-hidden="true" class="svg-icon iconTrash" width="18" height="18" viewBox="0 0 18 18"><path d="M15 2a1 1 0 0 1 1 1v1H2V3a1 1 0 0 1 1-1h2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1zm0 3H3v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2z"/></svg>';
1744+
17391745
// src/UserscriptTools/Post.ts
17401746
var Post = class _Post {
17411747
constructor(element) {
@@ -1771,10 +1777,10 @@
17711777
score;
17721778
static getActionIcons() {
17731779
return [
1774-
["Checkmark", "fc-green-500"],
1775-
["Clear", "fc-red-500"],
1776-
["Flag", "fc-red-500"]
1777-
].map(([svg, classname]) => _Post.getIcon(getSvg(`icon${svg}`), classname));
1780+
[IconCheckmark, "fc-green-500"],
1781+
[IconClear, "fc-red-500"],
1782+
[IconFlag, "fc-red-500"]
1783+
].map(([svg, classname]) => _Post.getIcon(svg, classname));
17781784
}
17791785
async flag(reportType, text) {
17801786
const flagName = getFlagToRaise(reportType, this.qualifiesForVlq());
@@ -1992,7 +1998,9 @@
19921998
});
19931999
return Object.fromEntries(newEntries);
19942000
}
1995-
static getIcon(svg, classname) {
2001+
static getIcon(element, classname) {
2002+
const parsed = new DOMParser().parseFromString(element, "text/html");
2003+
const svg = parsed.querySelector("svg");
19962004
const wrapper = document.createElement("div");
19972005
wrapper.classList.add("flex--item");
19982006
wrapper.style.display = "none";
@@ -2018,7 +2026,7 @@
20182026
text,
20192027
icon: [
20202028
"iconEyeOff",
2021-
getIconPath("iconEyeOff")
2029+
getIconPath(IconEyeOff)[0]
20222030
],
20232031
classes: ["mb16"]
20242032
});
@@ -2981,12 +2989,9 @@
29812989
const h3 = getH3(input?.value ?? "");
29822990
input?.parentElement?.replaceWith(h3);
29832991
}
2984-
const pencil = getIconPath("iconPencil");
2985-
const eyeOff = getIconPath("iconEyeOff");
29862992
const [svg, , text] = [...edit.childNodes];
2987-
svg.classList.toggle("iconPencil");
2988-
svg.classList.toggle("iconEyeOff");
2989-
svg.firstElementChild?.setAttribute("d", isExpanded ? eyeOff : pencil);
2993+
svg.insertAdjacentHTML("afterend", isExpanded ? IconEyeOff : IconPencil);
2994+
svg.remove();
29902995
text.textContent = isExpanded ? " Hide" : "Edit";
29912996
isExpanded ? $(save).fadeIn("fast") : $(save).fadeOut("fast");
29922997
}
@@ -3007,7 +3012,7 @@
30073012
{
30083013
iconConfig: {
30093014
name: "iconPencil",
3010-
path: getIconPath("iconPencil"),
3015+
path: getIconPath(IconPencil),
30113016
height: 18,
30123017
width: 18
30133018
},
@@ -3025,7 +3030,7 @@
30253030
type: ["danger"],
30263031
iconConfig: {
30273032
name: "iconTrash",
3028-
path: getIconPath("iconTrash"),
3033+
path: getIconPath(IconTrash),
30293034
width: 18,
30303035
height: 18
30313036
},
@@ -3132,7 +3137,7 @@
31323137
type: ["outlined"],
31333138
iconConfig: {
31343139
name: "iconPlus",
3135-
path: getIconPath("iconPlus"),
3140+
path: getIconPath(IconPlus),
31363141
height: 18,
31373142
width: 18
31383143
}

0 commit comments

Comments
 (0)