[Utility - Userscript] WK Custom Icons Library

WaniKani API And Third-Party Apps
1

Latest Version Number: 1417568

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 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=1417568

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 = `
    <button>${Icons.customIconTxt("chevron-up")}</button>
`;

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.

Available icons:

arrow-up, arrow-down, chevron-up, chevron-down, chevron-left, chevron-right
circle-question, circle-info
check-checked, check-unchecked, tick (check, no box), plus, cross (X-shaped icon)
edit, download, settings, trash
srs-up, srs-down, sound-on, sound-off
chart-line, warning, fire (mostly for burned items)

9 Likes
2

Thank you for this script!
Two icons that I am missing in this are sound-off and sound-on. It would be great if you could add these as well.

1 Like
3

Oh yes, I’d forgotten those. I’ll get those added along with an update to fix a couple of minor positioning issues and renaming “exclamation” to “warning” today!

1 Like
4

Updated with those two icons. Let me know if there’s any issues with them! New version is 1344044. Also changed exclamation to be called warning.

1 Like
5

Thank you!

I noticed that the icons are not always available – for example, if I start lessons via the lesson picker, document.getElementById("customSVGSprites__18") returns null. You probably have to listen to some of the Turbo events and reinsert the element if it is missing. I’m not certain which events are important – in my Queue Manipulator script, I’m listening to

document.addEventListener(`turbo:before-render`, handleTurboBeforeRender);
document.addEventListener(`turbo:before-visit` , handleTurboBeforeVisit);
document.addEventListener(`turbo:visit`        , handleTurboVisit);

but I think for Custom Icons Library turbo:visit is probably enough?

1 Like
6

Oh - I haven’t done any lessons in a while so completely missed that. I keep forgetting they’re transitioning to Turbo page changes in some places… Sorry about that, I’ll get it fixed today!

1 Like
7

Fixed as far as I can tell in 0.1.9 - new version number is 1344116 (fyi in case you check with .getElementById, I don’t update the number in the ID e.g. customSVGSprites__18 for updates which don’t change the actual icons, to prevent redundant copies of SVGs being inserted into the page)

1 Like
8

So, I don’t know if this was an intentional decision, but the script isn’t actually setting window.Icons on the page’s window. Thanks to the way Tampermonkey (and I assume other script managers) works, window is actually the script manager’s window not the page’s. So when you set window.Icons = Icons; it is adding it to the extension’s window. This should be fine for the scripts @requireing it, as they should still have a shared window, but it just means that the class cannot be accessed on the WK page itself. I find it kind of useful to have this functionality, but I understand if that’s not what you were going for.

And so I quickly took a look at how other scripts add something (thank you Sinyaven) to the window and got that working. Steps to make the changes below if you’re interested.

Put Icons class on page window

First, add these parameters and arguments to the iife:

(function(global, unsafeGlobal) {
    ...
})(window, window.unsafeWindow || window);

Next, check for existence:

class Icons {
    ...
}

if (unsafeGlobal.Icons) return;

unsafeGlobal.Icons = Icons;
...

Edit 2: I’m trying to figure out how best to add a version check comparison to this, but since the version cosnstant is not for script version but svg version, I’m not sure how to approach it. Probably just copying more of what Sinyaven does and using their script version string comparison function.

Edit: oh, and don’t forget to add // @grant none in the header so the sandbox isn’t added

1 Like
9

Thanks for typing this up! To be perfectly honest I’d completely forgotten that this was the case with the window.

Is there a reason to make it accessible on the page itself? Wouldn’t how it is currently allow userscripts to use it no problem as they share the same extension window, and WK itself is never going to need access to it? Or am I forgetting something?

Thanks, not sure how I forgot that!

10

No, you’re not missing anything. I say I find it useful purely because it lets me test things in the console. I make use of this with other scripts too. For example, I modify double-check to add the getcontroller function to the window object so I can easily use it in the console.

1 Like
11

Thank you for the fix! And don’t forget to update the version number in the top post as well :wink:

EDIT: Sorry, I did not remember the details of the Turbo events before suggesting turbo:visit. It seems that the visit event fires before the document head and body is replaced with the new one, so version 0.1.9 still does not work correctly. You probably have to either use turbo:render or turbo:load.

12

Oh, that’s strange, I checked and I thought it was adding it to the lessons page (going in from a custom lesson selection) for me :thinking: But not any more, I must’ve been imagining it…

Anyway, updated to use turbo:load in version number 1344498. This time I’ve triple checked and it definitely is adding it every time as far as I can tell!

1 Like
13

This is great! When I get the time to update my scrips I’ll be using this

1 Like
14

Let me know if you have any issues / need any extra icons added when you do! :smiley:

1 Like
15

Oh, could you add a flag icon? Both the solid and regular styles. It could really be used for WK Flagger

2 Likes
16

Here are some Font Awesome icons which I am using that are not covered by the script

  • trophy
  • arrow-up
  • arrow-down
  • trash
  • gear
  • question-circle-o
  • inbox

Let me know if you want me to hunt down some SVGs

1 Like
17

For “gear” you can use “settings”, it’s the same one. I should add a list of available icons to the top post at some point :sweat_smile:

question-circle-o doesn’t seem to appear on the font awesome website? :thinking: Would circle-question be a good substitute? It looks pretty much the same:

image
image746×561 16.1 KB

I’ll get the other icons added along with the flag icons for @LupoMikti in the next day or two - I’m just trying to decide whether I want to make the next version more “modular” to try and reduce unnecessary SVGs (i.e. by default adding the most basic ones and then being able to add more at the start of a script using it by doing something like Icons.use("arrows, extras");). But for now I’ll probably just end up adding these in how it is now - considering HTML is pretty insanely optimized it seems unlikely a few extra SVGs will affect anything by even a millisecond lmao

1 Like
18

Weird that question-circle-o doesn’t show up. Must be from an older FA version. question-circle looks the same (ish?) though, so that’s fine.

1 Like
19

I think an eventual “bring your own SVGs” method for the script would be ideal. For example, for the Flagger script, I’ve been spending time making an interface for flag management, and use a few more icons in that (like pencil, check, and xmark; though I believe edit and check-checked in the script cover those first two, even if not exactly the same). If there were a way to include the script but use a function to supply your own SVGs, that would significantly reduce the amount of upkeep for this library script, allowing you to just maintain the most common ones.

Now I just need to figure out how to get SVGs + how to get the ones that look how I want (because the versions still available to the dashboard are not the same as they were before. The flag icon for example looks very different from the screenshots in the Flagger script post).

1 Like
20

Hmm that’s quite a good idea - I could add more common ones to the default selection and have a function for scripts to add any more specific ones themselves… And it should be fairly easy to implement.

The Font Awesome free selection on their website is pretty good and you can copy-paste the SVG path data directly from the website when selecting one! There are definitely some it doesn’t have but it covers a lot.

1 Like