Replace VIcon w/ KIcon (and import all icons needed to do so)

[nucleogenesis]

Product

@bjester and I chatted shortly about a bug I reported where some icons were looking screwy on Studio in my browser. I tested in another browser and it seems like that issue is something on my machine.

I've not seen this happen with KIcon -- but in this case, Studio is using a VIcon to get some icons that are not available in KDS (or maybe they just weren't available when this component work was done?).

Desired behavior

KDS should accommodate Kolibri Studio's iconograhic needs.

(Optional) The Value Add

If Studio can use KIcon for all of its needs, it'll be easier to suggest that it should :)

TODOs

Rough todo list

• Audit icons used in Studio, list what is missing from KDS
• Add them to KDS
• Remove VIcon, insert KIcon

[hustlernik]

@nucleogenesis , Is this issue still open to work?

[MisRob]

Thanks @hustlernik. @bjester @nucleogenesis I think this issue should be okay to be addressed, right?

[MisRob]

@hustlernik I thought about it am hesitant to recommend this for contribution because I think we will need to audit VIcons in Studio (https://github.com/learningequality/studio) at first and then compare to available KIcons here in KDS (https://main--kolibri-design-system.netlify.app/icons/#icons). And then we can plan next steps. If you'd like to contribute by examining Studio VIcons, you're welcome to do so! It would be definitely helpful. It's just that we may not be able to close this any time soon if we find out we need some new icons in KDS, and also because Studio is using a pretty old version of KDS. If you're still interested, you can let me know and I can provide more guidance on auditing Studio.

[MisRob]

@hustlernik If you'd be interested to contribute to an issue that's a bit more ready, we currently have contributing opportunities in three repositories. You can see the contributing guidelines including links to issues suitable for contribution for each repository here:

Kolibri: https://github.com/learningequality/kolibri/blob/release-v0.16.x/CONTRIBUTING.md Kolibri Design System: https://github.com/learningequality/kolibri-design-system/blob/main/CONTRIBUTING.md Studio: https://github.com/learningequality/studio/blob/unstable/CONTRIBUTING.md

[hustlernik]

@MisRob I can try out, so you can put out some more guidance for the same. Also, I'm looking into other issues that I feel, I can solve.

[MisRob]

Alright @hustlernik, thank you.

So, the first step would be to run Kolibri Studio https://github.com/learningequality/studio. Then, to locate all places that use the Icon component (it's build on top of VIcon), visually preview them and find out whether an icon is available in the Kolibri Design System, aka KDS, (the list of most recent available icons) or not.

As a result, it'd be helpful to arrive at a list of all VIcons that we use in Studio but don't have available in the Kolibri Design System. if any. Alternatively, if there are no such icons, to confirm that KDS already has all icons that we need in Studio.

This will be very valuable to determine next steps.

[MisRob]

@hustlernik I also wanted to mention I won't be able to follow-up here this year as this is my last day before few weeks of time off. Also, the whole team's availability will too soon be limited until the second week of January. Thank you and hopefully see you next year :)!

[MisRob]

Closing in favor of https://github.com/learningequality/studio/issues/4451