Font Icon list generation

[marin-bratanov]

I would like a tool/plugin/template that will generate the list of icons like in the kendo article https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web#list-of-font-icons

It should be reusable in different suites (such as blazor, jquery, mvc, core, maybe even ajax and vue). It will rely on data coming from the icons package (json with the list of icons, their glyph, name, category/categories). Versioning and the way to include/use it should be discussed after a spike/review when the icons data is ready.

It should also allow for some configuration options such as what data to include for each icon - like the name/class/icon/glyph number. For example, in Blazor I would like to not have the k-i- prefix, and the glyph number might be optional.

There may need to be some customization (or requirement in the docs that consume it) that determines how the icon font is pulled - it will soon be separate from the themes, and needs to be updatable. Perhaps it should be a requirement that you add a proper <link> to your md file before/after the plugin/template.

Describe alternatives you've considered Copying the current loop + fetching of the font from kendo. The caveat is that it will become inconsistent between docmentations, is not centralized so it will diverge, and is not suited to versioning and maintenance in the future. Also, it has issues with the correct list of icons.

Blazor aha link: https://progresssoftware.aha.io/features/BLZR-194

[marin-bratanov]

A key problem is that the css bundle for the docs carries old LESS themes from Kendo plus old font icons font file. There might be some other CSS rules for that font list that I personally dislike (such as having a before element for the li nodes from the bundle, or the tiny tiny font-size and small font-weight for the font icon names) and so I tweaked a little, but we should probably revise for all too.

This requires:

• downloading the new theme dynamically (which, for blazor, is a tad of a problem due to the lack of a true cdn)

• scoping the new theme to the icons list in this article - otherwise it breaks the kendo components in the treeview on the left (and maybe somewhere else). This requires a plugin that for v1 I committed next to the article because browser support for scoped styles was dropped a few years ago and it doesn't look like it's coming back. Also, perhaps there are better plugins for that.

  • Caveat: this script does not need to weigh down all other documentations and all other articles. Scoping the entire kendo theme makes the page very slow and heavy too - nearly 1MB of CSS goes in an inline style tag that gets parsed and modified by the plugin. I delayed it with 1500ms to not freeze the initial load and to let other code snippets colorize.

    Perhaps we should consider upgrading the docs-seed to the SASS themes for the kendo widgets and keeping them up to date, at least with major releases.

• fetching the icons list and using its information properly - at the moment I just grab the json from the repo develop branch which is not stable for the future - we need a stable branch and/or proper package manager.

• error handling is important - right now I use the Kendo article as a fallback through a link, but once it starts generating runtime nobody will have such an easy fallback.

You can find my v1 here https://github.com/telerik/blazor-docs/pull/217

[marin-bratanov]

Caveat with my original approach - the tokens GH generates for the raw output expire in about a week, so you will get 404 for the icons list. I don't know why a token is generated in the URL for this repo, it is not generated for normal public repos.

Try as I might (even after managing to get Octokit running in JS without npm) I could not fetch anything from the icons repo, there is probably something special about it (or I simply couldn't figure it out).

So, I copied over the current list which should hold for a while https://github.com/telerik/blazor-docs/pull/227

[pepinho24]

would that work for you better? https://unpkg.com/browse/@progress/kendo-font-icons@0.1.2/dist/icon-list.json https://unpkg.com/@progress/kendo-font-icons@0.1.2/dist/icon-list.json it also works with latest https://unpkg.com/@progress/kendo-font-icons@latest/dist/icon-list.json

[pepinho24]

Another option: 1) create _plugins/font_icons.rb file with this content (similar to https://github.com/telerik/docs-seed/blob/master/_plugins/top_navigation.rb#L35)

require 'open-uri'

Jekyll::Hooks.register :site, :after_init do |site|
  html = open("https://unpkg.com/@progress/kendo-font-icons@latest/dist/icon-list.json").read
  File.write('./common-features/scripts/font-icons-list.json', html)
end

2) add the file with --force, or another way that would overcome the rule of .gitIgnore for the _plugins folder https://stackoverflow.com/questions/8006393/force-add-despite-the-gitignore-file

Once you do these steps, on every build, the latest version of the json file will be created locally for easier reference

[marin-bratanov]

I didn't know that's on a package manager, I will see about using that over a local copy. I think making the list build-time would be the better approach for the final solution (without a commit).

EDIT: Making the list build-time will also put it in the markup so we will get server rendering for it (and SEO optimization) + less JS overhead for weak devices.

[marin-bratanov]

Please consider grouping and/or search in the implementation.

Quoting customer feedback

https://docs.telerik.com/blazor-ui/common-features/font-icons#icons-list The icon list needs some way of searching it, as finding the right icon is extremely difficult. The list also needs to be grouped into similar icons, so all relating to (say) email and web were together, all relating to file types were together, etc. You need to do something, because right now it's very difficult to use, and wastes a lot of our time.

[Iankodj]

Waiting for https://github.com/telerik/kendo-icons/issues/12 to implement categorization along with icon list