ICONS - How to handle SVG explained

[Arty]

Is it cacheable? Though if I have a page with 100 + icons that has to go through this every load I’m wondering the cost?

Sorry, didn't check area51 for a while. Project has been re-written recently (again), this time its final version and already stable release candidate is available Also renamed from SimpleSVG to Iconify.

Yes, its cacheable. By default icons are cached in session storage. Also there is possibility to cache in local storage, but its disabled by default. If both are disabled for some reason, there is backup method of requesting icons that forms identical API requests, so it can be cached in browser. Also its possible to bundle commonly used icons with custom scripts, such as forum's main script.

[hanakin]

Is it cacheable? Though if I have a page with 100 + icons that has to go through this every load I’m wondering the cost?

Sorry, didn't check area51 for a while. Project has been re-written recently (again), this time its final version and already stable release candidate is available Also renamed from SimpleSVG to Iconify.

Yes, its cacheable. By default icons are cached in session storage. Also there is possibility to cache in local storage, but its disabled by default. If both are disabled for some reason, there is backup method of requesting icons that forms identical API requests, so it can be cached in browser. Also its possible to bundle commonly used icons with custom scripts, such as forum's main script.

@Arty

Sorry have been busy workign on all the other things and have not had a chance to look at this in depth. Looks like its come along nicely. exscpecially for replacing fonts with and svg alternative. May look at integrating in 3.3 to quickly replace font-awsome. Few questions though for consideration for the new theme.

We have to provied the option for the user to add local/custom icons as well in either png or svg format. The current plan is to handle this via a twig function which we have just started working on https://github.com/phpbb/phpbb/pull/5545.

The intent is to be able to server icons and imagesets via the same function so monochrome and none-monochrome svgs

Since it looks like all the icons are generated on your servers and returned via api as an svg file. Is it then possible to just call this api directly based on the icon name in the template <img src="https://api.iconify.design/{{ fa-home }}.svg">?

trying to look at integrating this with the current plan as I would rather all of it be handled in the backend the same way and avoid having to load a js file in the browser if the user is using all custom imgs/icons.

Apologies I am currently at work and your server/cdn does not render the icons through our firewall to test it myself, I will doucle check at home and edit the post if need be.

[Arty]

Thanks. I've been working a lot on it. Also released React component and plug-in for Sketch

Its possible to load icons like that: https://api.iconify.design/fa-home.svg
However I suggest not to to do it. There are several issues with loading external SVG (this applies to any external SVG, not just Iconify):

• They cannot inherit color, so color must be specified. In Iconify API its easy to do by adding "color" parameter: https://api.iconify.design/fa-home.svg?color=red
• All images are loaded one by one. That could be a lot of HTTP requests for each page, which will slow down page loading times considerably.

Because of that I think external SVG should be avoided. They are good for few images, but when there are like 10+ images, it affects page loading time.

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.

I think I'll make a test style for 3.2 to see how it works on actual forum.

[hanakin]

Its possible to load icons like that: https://api.iconify.design/fa-home.svg
However I suggest not to to do it. There are several issues with loading external SVG (this applies to any external SVG, not just Iconify):

• They cannot inherit color, so color must be specified. In Iconify API its easy to do by adding "color" parameter: https://api.iconify.design/fa-home.svg?color=red
• All images are loaded one by one. That could be a lot of HTTP requests for each page, which will slow down page loading times considerably.

Because of that I think external SVG should be avoided. They are good for few images, but when there are like 10+ images, it affects page loading time.

I suppose we could load it dynamically like we are loading the font-awsome and jquery *beep*. if $(.iconify) or something like that. Eitherway possibly look at not having the option of fonts at all in favour of this.

[Arty]

Yes, its included dynamically and no, you don't need to write anything like $(.iconify). Script parses icons on page load and watches DOM for mutations, so it works with dynamically generated content such as AJAX stuff phpBB uses. It does not have any dependencies (except for couple of polyfills for old IE that it loads automatically).

[hanakin]

Not what I meant I mean to load the code.iconify js file we could check page and then fetch the file if nessecary

[3Di]

** poke **

Sorry to bother you but's related to this argument somehow, I am following your suggestion (posted somewhere) to use a GUI like this https://jakearchibald.github.io/svgomg/ .. since we have hundreds of SVGs to clean up a bit (more than what I already did with a Windows' tool like SVG cleaner).. are you aware of a such tool which can work in batch?

[hanakin]

its a node module so you can run it through npm or gulp https://github.com/svg/svgo https://www.npmjs.com/package/gulp-svgo

[Arty]

** poke **

Sorry to bother you but's related to this argument somehow, I am following your suggestion (posted somewhere) to use a GUI like this https://jakearchibald.github.io/svgomg/ .. since we have hundreds of SVGs to clean up a bit (more than what I already did with a Windows' tool like SVG cleaner).. are you aware of a such tool which can work in batch?

For full automation you can use Iconify Tools library that I'm using to update icons few times a day. Optimization code uses SVGO.

Code: Select all

npm install @iconify/tools

Code: Select all

const tools = require('@iconify/tools');

const source = 'src';
const dest = 'dst';

let collection;

tools.ImportDir(src).then(result => {
	collection = result;
	return collection.promiseAll(svg => tools.SVGO(svg));
}).then(res => {
	return tools.ExportDir(collection, dst);
}).then(res => {
	console.log('Cleaned up ' + collection.length() + ' icons.');
}).catch(err => {
	console.error(err);
});

There are also tools to validate icons to make sure there aren't nasty things in them, like fonts, bitmaps and scripts. See https://github.com/iconify-design/tools

[3Di]

I tried it right now using a copy of a folder.
Changed dst/src here though

Code: Select all

tools.ImportDir(source).then(result => {
	collection = result;
	return collection.promiseAll(svg => tools.SVGO(svg));
}).then(res => {
	return tools.ExportDir(collection, dest);

And then (in bash/node)

Compared dest/source and I see the differencies, not sure about such error.

There are also tools to validate icons to make sure there aren't nasty things in them, like fonts, bitmaps and scripts. See https://github.com/iconify-design/tools

I will give it a shot. Thank you.