Library with SVG icons and construction functions for use in scripts.
Tätä skriptiä ei tulisi asentaa suoraan. Se on kirjasto muita skriptejä varten sisällytettäväksi metadirektiivillä // @require https://update.greasyfork.org/scripts/489759/1417568/WK%20Custom%20Icons.js.
// ==UserScript==
// @name WK Custom Icons
// @namespace http://tampermonkey.net/
// @version 0.4.5
// @description Library with SVG icons and construction functions for use in scripts.
// @author leohumnew
// @match https://www.wanikani.com/*
// @match https://community.wanikani.com/*
// @grant none
// @icon https://www.google.com/s2/favicons?sz=64&domain=wanikani.com
// @license MIT
// ==/UserScript==
(function() {
'use strict';
class Icons {
static #SCRIPT_VER = "0.4.5";
static #VERSION_NUM = 31;
static #names = ["arrow-up", "arrow-down", "chevron-up", "chevron-down", "chevron-left", "chevron-right", "circle-question", "circle-info", "cross", "check-checked", "check-unchecked", "plus", "tick", "chart-line", "download", "edit", "warning", "fire", "settings", "srs-up", "srs-down", "sound-on", "sound-off", "trash"];
static #customElements = [];
static get scriptVersion() { return this.#SCRIPT_VER }
static get SCRIPT_VER() { console.warn("Icons.SCRIPT_VER is deprecated. Use Icons.scriptVersion instead."); return this.#SCRIPT_VER; }
static get iconsVersion() { return this.#VERSION_NUM }
static get VERSION_NUM() { console.warn("Icons.VERSION_NUM is deprecated. Use Icons.iconsVersion instead."); return this.#VERSION_NUM; }
// Check if the current script version is newer than the one passed as argument
static isNewerThan(otherVersion) {
if (!otherVersion) return true;
let v1 = this.#SCRIPT_VER.split(`.`).map(n => parseInt(n));
let v2 = otherVersion.split(`.`).map(n => parseInt(n));
return v1.reduce((prevVal, currVal, currIndex) => prevVal ?? (currVal === v2[currIndex] ? null : (currVal > (v2[currIndex] || 0))), null) || false;
}
// Get the SVG element or outerHTML of an icon
static customIconTxt(iconName) {
return this.customIcon(iconName).outerHTML;
}
static customIcon(iconName) {
let svgns = "http://www.w3.org/2000/svg";
let id = "custom-icon-v" + this.#VERSION_NUM + "__" + iconName;
let box = document.getElementById(id)?.getAttribute("viewBox") || "0 0 512 512";
let icon = document.createElementNS(svgns, "svg");
icon.setAttribute("class", "wk-icon");
icon.setAttributeNS(svgns, "viewBox", box);
let use = document.createElementNS(svgns, 'use');
use.setAttribute("href", "#" + id);
icon.appendChild(use);
return icon;
}
// Add a new icon to the custom icons list. Check forum thread for argument details.
static addCustomIcons(newIcons) {
let customSVGSprites = document.getElementById("customSVGSprites__" + this.#VERSION_NUM);
if(!customSVGSprites) return;
if(newIcons == null || !Array.isArray(newIcons)) {
console.error("Invalid icons passed to Icons.addCustomIcons() - not an array. Please pass a 2D array of the form [['icon-name', 'path-data'], ['icon-name', 'path-data', [width, height] or just size]]");
return;
}
let idBase = "custom-icon-v" + this.#VERSION_NUM + "__";
for(let [name, path, box] of newIcons) {
if(this.#names.includes(name)) {
console.error(`Icon name "${name}" is already in use. Skipping.`);
continue;
} else {
this.#names.push(name);
}
if(box != null && !Array.isArray(box)) box = [box, box];
// create symbol element and set outerHTML
let customSymbol = document.createElementNS("http://www.w3.org/2000/svg", "symbol");
customSymbol.setAttribute('id', `${idBase}${name}`);
customSymbol.setAttribute('viewBox', `0 0 ${box?.[0] || 512} ${box?.[1] || 512}`);
customSymbol.innerHTML = `<path d="${path}"/>`;
this.#customElements.push(customSymbol);
customSVGSprites.appendChild(customSymbol);
}
}
// Add the SVG sprites (+ custom added ones) to the html document
static setUpSVGElements() {
if(document.getElementById("customSVGSprites__" + this.#VERSION_NUM)) return;
if(this.#VERSION_NUM == undefined) console.error("Icons.#VERSION_NUM is undefined.");
let iconStyle = document.createElement("style");
iconStyle.innerHTML = `
.wk-icon { width: var(--icon-height, 1em) }
`;
let svgns = "http://www.w3.org/2000/svg";
let customSVGSprites = document.createElementNS(svgns, "svg");
customSVGSprites.setAttribute("xmlns", "http://www.w3.org/2000/svg");
customSVGSprites.id = "customSVGSprites__" + this.#VERSION_NUM;
customSVGSprites.style.display = "none";
let idBase = "custom-icon-v" + this.#VERSION_NUM + "__";
customSVGSprites.innerHTML = /*html*/ `
<!-- Basic icons -->
<symbol id="${idBase}arrow-up" viewBox="0 0 448 512">
<path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/>
</symbol>
<symbol id="${idBase}arrow-down" viewBox="0 0 448 512">
<path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>
</symbol>
<symbol id="${idBase}chevron-up" viewBox="0 0 512 512">
<path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/>
</symbol>
<symbol id="${idBase}chevron-down" viewBox="0 0 512 512">
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
</symbol>
<symbol id="${idBase}chevron-left" viewBox="0 0 320 512">
<path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
</symbol>
<symbol id="${idBase}chevron-right" viewBox="0 0 320 512">
<path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
</symbol>
<symbol id="${idBase}circle-question" viewBox="0 0 512 512">
<path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>
</symbol>
<symbol id="${idBase}circle-info" viewBox="0 0 512 512">
<path style="fill:var(--color-icon-secondary,inherit);opacity:var(--icon-secondary-opacity,.4);" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>
<path style="fill:var(--color-icon-primary,inherit);opacity:var(--icon-primary-opacity,1);" d="M256 128a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM192 248c0-13.3 10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h24V272H216c-13.3 0-24-10.7-24-24z"/>
</symbol>
<symbol id="${idBase}cross" viewBox="0 0 384 512">
<path d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"/>
</symbol>
<symbol id="${idBase}check-checked" viewBox="0 0 448 512">
<path d="M64 80c-8.8 0-16 7.2-16 16V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V96c0-8.8-7.2-16-16-16H64zM0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/>
</symbol>
<symbol id="${idBase}check-unchecked" viewBox="0 0 448 512">
<path d="M384 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H384zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/>
</symbol>
<symbol id="${idBase}plus" viewBox="0 0 448 512">
<path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/>
</symbol>
<symbol id="${idBase}tick" viewBox="0 0 448 512">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
</symbol>
<!-- Other common WK-related icons -->
<symbol id="${idBase}chart-line" viewBox="0 0 512 512">
<path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z"/>
</symbol>
<symbol id="${idBase}download" viewBox="0 0 512 512">
<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>
</symbol>
<symbol id="${idBase}edit" viewBox="0 0 512 512">
<path d="M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z"/>
</symbol>
<symbol id="${idBase}warning" viewBox="0 0 512 512">
<path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/>
</symbol>
<symbol id="${idBase}fire" viewBox="0 0 512 512">
<path d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4C112 375.4 162.6 416 225.7 416z"/>
</symbol>
<symbol id="${idBase}settings" viewBox="0 0 512 512">
<path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/>
</symbol>
<symbol id="${idBase}srs-up" viewBox="0 0 512 512">
<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM385 231c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V376c0 13.3-10.7 24-24 24s-24-10.7-24-24V193.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 119c9.4-9.4 24.6-9.4 33.9 0L385 231z"/>
</symbol>
<symbol id="${idBase}srs-down" viewBox="0 0 512 512">
<path d="M256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM127 281c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l71 71L232 136c0-13.3 10.7-24 24-24s24 10.7 24 24l0 182.1 71-71c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L273 393c-9.4 9.4-24.6 9.4-33.9 0L127 281z"/>
</symbol>
<symbol id="${idBase}sound-on" viewBox="0 0 640 512">
<path d="M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z"/>
</symbol>
<symbol id="${idBase}sound-off" viewBox="0 0 640 512">
<path d="M320 64c0-12.6-7.4-24-18.9-29.2s-25-3.1-34.4 5.3L131.8 160H64c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64h67.8L266.7 471.9c9.4 8.4 22.9 10.4 34.4 5.3S320 460.6 320 448V64z"/>
</symbol>
<symbol id="${idBase}trash" viewBox="0 0 512 512">
<path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/>
</symbol>
`;
document.head.append(iconStyle, customSVGSprites);
this.#setUpCustomElements();
}
static #setUpCustomElements() {
if(this.#customElements) this.#customElements.forEach(el => {
document.getElementById("customSVGSprites__" + this.#VERSION_NUM).appendChild(el);
});
}
}
// Main initialization
Icons.setUpSVGElements();
document.addEventListener("turbo:load", () => {
Icons.setUpSVGElements();
});
if (window.Icons && !Icons.isNewerThan(window.Icons.scriptVersion)) return;
window.Icons = Icons;
})();