Library with SVG icons and construction functions for use in scripts.
This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/489759/1417568/WK%20Custom%20Icons.js
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.
