ICONS - How to handle SVG explained

[Arty]

There is no error. When you are using node terminal thingie, it logs result of code you've typed. For example if you type c = 2+2 it will log "4". Its like echo(eval('code'))

[hanakin]

When using Iconify syntax: <span class="iconify" data-icon="fa:home"></span> Iconify loads data for images in bulk. Also there are several layers of caching to make sure icons are not loaded on every page load. Its much much faster and more efficient than external images.

poke

is this something you want to considering doing for 3.3?

based on the tests that I have run on a static page load was not any worse than font-awsome in the new theme, and the codepend integration test only revealed som slight changed to the icons/buttons but the real test would be to test it with prosilver as awhole? It should not be too dificult to switch it. except for the migrationss ... But I do not want to wste the time if its not something going into 3.3 basically would wait for icon macro and what not...

[hanakin]

@Poke

Had a few more follow-up questions for sustainability.

what is the turn around timeline/process for updating a library?
Lets say mdi gets really active and starts pushing out icon updates once a month or more? What is the update process? How automated is it? does it require someone creating an issue?
What is the impact on the cahcing in this scenario?

Basically trying to understand from a support standpoint if we used this and a user tries to use and icon that is too new, what the metrics would be?

Is it faster/easier if a library were to maintain the collection.json file themselves?

[Arty]

@Poke

Had a few more follow-up questions for sustainability.

what is the turn around timeline/process for updating a library?
Lets say mdi gets really active and starts pushing out icon updates once a month or more? What is the update process? How automated is it? does it require someone creating an issue?
What is the impact on the cahcing in this scenario?

Basically trying to understand from a support standpoint if we used this and a user tries to use and icon that is too new, what the metrics would be?

Update script is ran few times a day, so whenever any library pushes update, iconify/json repository is updated. From there GitHub hooks are used to notify all servers that there is update, which triggers update scripts and all servers get updated within 2 minutes. Servers are updated without any downtime. So its almost fully automated. By "almost" I mean it can be used as cron job, it requires no interaction, but because I'm still messing with that script I run it from my computer instead of server.

As for caching, it gets a bit complicated. There are several layers of icon caching.

First is session storage where all icons are stored during session. It is cleared when browser is closed.

Second is local storage, but it is disabled by default because it requires cookie consent. However its not really needed. If enabled, it invalidates when Iconify script is updated.

Third is browser caching of API requests. Its basic HTTP caching. Expiration is set to 8 days.

Each Iconify update invalidates session and local storage cache.

If any existing icon is updated (as in changed, not added), in worst case it might take up to 8 days for users to see new icon. If new icons are added, it takes anything from minutes to a day to see new icon (upper limit will be 3 hours when I'll change to cron job).

[hanakin]

got it thanks. So essentially a non issue for new icons. Once a library is added its all automated from there...Sounds awsome

[Arty]

Yes. Also when icon is removed, like for example today Dashicons renamed plus-light to plus-alt2, old icon is still available. Update process doesn't simply pull latest icons, it merges new icon set with previous icons set.

If icon is removed, it is marked as hidden. If icon is renamed, old name is added as alias, so icon can be access by old name and new name. So if anyone is using removed or renamed icon, their websites don't suddenly break.

[hanakin]

nice 👍

[Arty]

Converted Prosilver for 3.2.5 to Iconify: https://github.com/cyberalien/prosilver-iconify

All FontAwesome stuff has been converted. Most icons have been replaced with similar FontAwesome 5 icons because they are much better designed, some were replaced with icons from different sets.

Forum/topic icons have also been converted. About 130kb of png images have been replaced with 10kb JavaScript.

Forum/topic icons have common parts, so instead of making bunch of icons I've made JavaScript that generates icons from layers (background, content, locked + mine flags). Its work in progress and it is missing "moved" icons for forums because they require different handling of layers, which I didn't figure out how to implement yet. All layers are colorless, color of each layer is controlled from stylesheet. I've posted code for it here: https://github.com/cyberalien/prosilver-folder-icons

There might be some bugs.

[hanakin]

cool...

All FontAwesome stuff has been converted. Most icons have been replaced with similar FontAwesome 5 icons because they are much better designed, some were replaced with icons from different sets.

using this as reference

https://codepen.io/hanakin/pen/GPZvev?editors=1100

to make it easier can you fork and update the icons on there with what you used?

Running them side by side locally is a full sec faster to load the main page and half a sec weirdly for large viewforum page. The implementation, sizes and css needs some tweaks still. Thats why i started working on this https://codepen.io/hanakin/pen/oVyvBp?editors=1100. I still need to updated it to 3.2 assets and add in the other areas.

Im also not sure I am a fan of the approach to the imagesets need to investigate more.

But overall looks promising

[Arty]

using this as reference

https://codepen.io/hanakin/pen/GPZvev?editors=1100

What is "post icons" section for? I'm confused because that list doesn't match functionality of prosilver.