☰

Greasy Fork is available in English.

WK Custom Icons

Library with SVG icons and construction functions for use in scripts.

لا ينبغي أن لا يتم تثبيت هذا السكريت مباشرة. هو مكتبة لسكبتات لتشمل مع التوجيه الفوقية // @require https://update.greasyfork.org/scripts/489759/1417568/WK%20Custom%20Icons.js

المؤلف
leohumnew
الإصدار
0.4.5
تم إنشاؤه
14-03-2024
تم تحديثه
26-07-2024
الترخيص
MIT

To fix icons breaking due to WK updates, and as they announced that they’ll soon be removing support for Font Awesome library icons, I made a small utility script which includes useful icons and methods to create them. And here it is in case anyone finds it useful! Suggestions for icon additions are also welcome.
The script 8 just needs to be @require’d at the top of any other script in the format

// @require https://greasyfork.org/scripts/489759-wk-custom-icons/code/CustomIcons.js?version=1347928

making sure the version number is up to date. I’ll keep this post updated with the latest version at the top.

You can then just use the functions Icons.customIcon("iconName e.g. chevron-up") or the equivalent function Icons.customIconTxt (that returns the same but as a String rather than an element) to get a correctly formatted instance of that SVG. Some examples:

let buttonEl = document.createElement("button");
buttonEl.appendChild(Icons.customIcon("chevron-up"));
let buttonEl = `
${Icons.customIconTxt("chevron-up")}
`;

You can also add your own SVG icons to use in the same way - if it’s a common icon let me know and I’ll add in into the script itself, but otherwise it’s simple to do it yourself using this function at the top of your script:

Icons.addCustomicons([
["icon_name", "SVG path contents", optional size parameter - default 512, good for most],
["icon_name2", "SVG"]
]);

It inserts the icons at the top of the document, making sure to not duplicate it if used by multiple scripts.