WK Custom Icons

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

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greasyfork.org/scripts/489759/1417568/WK%20Custom%20Icons.js

Tác giả
leohumnew
Phiên bản
0.4.5
Đã tạo
14-03-2024
Đã cập nhật
26-07-2024
Giấy phép
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.