ICONS - How to handle SVG explained

Discuss requests for comments/changes posted in the Issue Tracker for the development of phpBB's style.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB or modifying styles of released phpBB versions. If you need support for phpBB please visit the Support Forums on phpbb.com.

If you have questions regarding creating styles please post in Styles Support & Discussion to receive proper guidance from our staff and community.
User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty »

hanakin wrote:
Fri Feb 02, 2018 12:12 pm
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.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 911
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin »

Arty wrote:
Tue Dec 04, 2018 10:35 pm
hanakin wrote:
Fri Feb 02, 2018 12:12 pm
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.
Donations welcome via Paypal Image

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by 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.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 911
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin »

Arty wrote:
Thu Mar 14, 2019 9:02 am
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.
Donations welcome via Paypal Image

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by 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).

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 911
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by 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
Donations welcome via Paypal Image

User avatar
3Di
Registered User
Posts: 773
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano (I) Frankfurt (D)
Contact:

Re: ICONS - How to handle SVG explained

Post by 3Di »

Arty wrote:
Thu Mar 14, 2019 7:11 pm
** 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?
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
👨‍🏫 | Take a tour to | The Studio | 👨‍🏫

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 911
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by 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
Donations welcome via Paypal Image

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty »

3Di wrote:
Thu Mar 14, 2019 10:33 pm
Arty wrote:
Thu Mar 14, 2019 7:11 pm
** 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

User avatar
3Di
Registered User
Posts: 773
Joined: Tue Nov 01, 2005 9:50 pm
Location: Milano (I) Frankfurt (D)
Contact:

Re: ICONS - How to handle SVG explained

Post by 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)
test-1.png
Compared dest/source and I see the differencies, not sure about such error.
Arty wrote:
Fri Mar 15, 2019 12:27 pm
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.
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
👨‍🏫 | Take a tour to | The Studio | 👨‍🏫

Post Reply