Library with SVG icons and construction functions for use in scripts.
이 스크립트는 직접 설치하는 용도가 아닙니다. 다른 스크립트에서 메타 지시문 // @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.
