Discuss requests for comments/changes posted in the Issue Tracker for the development of phpBB's style.

Forum rulesPlease 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.

to simplify things I recommend a build step this way all the svgs can be included in the repo as a normal img would be. (There will still need to be some guidelines). This at least gives us a similar structure we are used to.

The build step would insure inclusion would all work the same way and remove all http requests.

How it would all work
The images folder would contain a new folder called icons

This folder would then have sub folders for each unique image set for example

The two examples above differ in that for icons that have labels we want to hide from screen readers by adding the aria-hidden="true"
For icons that do not have labels we need to provide proper labels via tooltips for screen readers by using aria-label="text goes here"

not exactly sure where the best place to render these too would be possibly the main icons dir...can be worked out later.

The build setup
to handle this I am proposing we use gulp and node as they are well tested and used for this in countless projects.

Then maybe it should be in styles/all/theme/images? You're the point man on this so I leave it in your hands, but we also want to try and keep things simple for style authors if these are going to be used and re-used by different styles.

This is subject to same-origin restrictions but otherwise it should work the same. My favourite spriting method for SVG would be using fragment identifiers but Safari lags behind other browsers in their support.

external files is also not wide supported and very buggy unfortunately. This is also another reason for the subsets they only need included on the page they are used on. ie there are no posting icons on index so no need to include it there... either way we still have the defs file which is the same this does not affect the build process.

Thing about SVG sprites is they don't work with all browsers, entire sprite needs to be inserted into DOM, so icons aren't cached and sprite building process isn't user friendly. There are more downsides to using sprites than upsides.

But I've got a solution

[shameless plug start]

I've been working on this for several months and its close to being ready: https://github.com/simplesvg/simple-svg
Plugging it here before its official release because I saw this topic and I think my solution would fit it nicely.

My SVG framework is open source, easy to use, compatible with all browsers down to IE9. Also comes with over 20k premade SVG icons, including FontAwesome, MDI, few emoji libraries and others.

Icons are stored and handled in custom JSON format, not as SVG images. See "icons" repo on GitHub for sample. Why? Because SVG tag is generated dynamically based on parameters, so only actual body is needed. JSON object for each icon contains width, height and body.

Second, you might need to set background size. By default generated SVG will have height of 1em, width is automatically set using icon's width/height ratio. You can set background size 2 ways: using background-size or adding "width" and/or "height" parameters to URL:

All tools needed to make custom SVG sets, create your own CDN, create your own version of SimpleSVG or create your own icon finders will be published and they will be open source.

Most tools are ready, but aren't in usable form. It will take a while to clean them up and its not a priority. If you do need some script that hasn't been published yet, poke me. Almost all tools are written in JavaScript and require Node.js.

Documentation will be available too. For now just ask questions here.

CDN currently serving icons is not a proper CDN. Proper CDN will be there later when project is published.

Dependencies:

SimpleSVG requires support of classList. IE10+ support it. To support IE9 without loading additional libraries in modern browsers add this to document header:

SimpleSVG also relies on MutationObserver and WeakMaps. It will load those dependencies automatically for browsers that do not support it from CDNJS. If you prefer not to use CDNJS, URL for polyfill can be configured.

Icon finder (icon picker thingie linked in sample, not the main library) will load all dependencies automatically from CDN. It requires React and ReactDOM. But that part isn't ready yet, so for now both React and ReactDOM must be included on page.

Icon finder search index is loaded automatically. No need to add any dependencies to document header. Dependencies are loaded only when icon finder is used, so bandwidth is not wasted if user does not open icon finder.

Tomorrow I'm leaving for UK/France for a week, without internet, so I won't be able to reply to any questions. Development will continue when I return.

Hmm sounds interesting I'll look it over tonight but my initial questions would be how does it handle the differences in svg libraries as far layout Seung as how fanfir example uses currently 14px soon to be 16px vs 24px for mdi as far as alignment? Exspecially given that fa default to bottom alignment where mdi is middle based?

It doesn't handle it. That's a problem of web fonts, not issue with images.

Images are inserted inline, how they are displayed is completely up to designer. Framework does not insert opinionated stylesheet. SVG images can be changed just like any other image. If image needs to be shown below baseline, add appropriate css, just like if it was any other image.

In default set some icons are extracted from web fonts: FontAwesome, ZMDI, VS. They use baseline setting from font for most icons, with exception of icons where using that baseline would result in part of icon being cut out. Out of 43 premade collections only 4-5 are extracted from fonts.