Update the kolibri logo.

[rtibbles]

Description

• Updates the Kolibri logo.
• Removes use of KImg in KLogo in order to render the SVG inline for animation, color changes etc.
• Moves prop validation helper function in KImg into utils file so that it can be referenced in KLogo.
• Adds the option to show the blob background for the Kolibri logo
• Adds the option to animate the Kolibri logo as a loader
• Adds the different permissible color schemes for the logo
• Updates KLogo documentation to showcase variants

Before/after screenshots

All options are documented and demonstrated in the updated documentation.

Changelog

Updated in PR.

Testing checklist

• Contributor has fully tested the PR manually
• The change is described in the changelog

Reviewer guidance

Review the updated KLogo documentation page for this.
Did the minor refactor of KImg put the function in the right place?

After review

• The changelog item has been pasted to the CHANGELOG.md

Comments

[rtibbles]

One possibility that occurs is we should include both the logo with a background and without a background here, I'll make the update accordingly.

[MisRob]

That's all very nice :) Nothing jumped out from the code and the documentation page is very helpful, thank you.

Very minor note is that it may be nice to reformulate a bit this section since it doesn't have much to do with KImg anymore. Perhaps we could just instead mention that KImg is for non-logo images.

[rtibbles]

Sure, that had also occurred to me at one point, and then I'd forgotten about it. I'll update the docs.

[MisRob]

Handy

[MisRob]

Overall it's looking good, thanks for all this work @rtibbles.

Not blocking, just a few doc tweaks that would be nice before merging:

(1) I think we could remove maxSize from examples code

since it's not a 'meaningful' representation of how the component will be used (with defined size in px, maxSize won't have any further effect). If we wanted to demonstrate how to use size together with maxSize, something like this would make more sense

but I think it'd be okay to keep examples simple and have just size.

(2) Relatedly, as we're now using size language, I think that related props documentation

could benefit from more specificity as to what values are expected.

I wrote some guidance for this in KImg if it helps (and this reminds me I'd better include it in KImg props docs as well):

Values may be either numbers or strings consisting of a numeral and a valid unit. The following units are supported: %, cm, em, ex, ch, in, lh, mm, px, rem, rlh, vh, vw. If you don't provide a unit, px will be used by default.

[rtibbles]

Will update, thanks @MisRob!