"icons" to move to font icons or SVG icons

[cjolif]

In the components:

• Checkbox tick
• StarRating stars
• Combobox arrow

In the samples:

• List tick mark
• buttons iconClass

We made decide to keep unicode char for some of them if there are good reasons but font icons or SVG icons should give us better cross platform behavior.

[cjolif]

I think @tkrugg had some arguments against using font icons but using directly SVG.

See also:

http://css-tricks.com/icon-fonts-vs-svg/

I guess the three issues with using SVG are:

• the code is already in most cases working ok with font icons making it working for SVG excerpt would require additional work.
• what about customization? (changing a font is easy with CSS, how do you do it for SVG?)
• what about performance?

@tkrugg I'll let you step in with your arguments.

[tkrugg]

the code is already in most cases working ok with font icons making it working for SVG excerpt would require additional work.

There are very few cases where we've actually used icon fonts so far and even then, I don't think switch would be so painful. For instance instead of the iconClass in Button.html will rather include <d-icon name="{{iconClass}}"></d-icon>

This implies the use of a d-icon component but lots of benefits come with it. (cf. document linked below)

what about customization? (changing a font is easy with CSS, how do you do it for SVG?)

As long as the SVG in inlined, you can style it with CSS.

what about performance?

Bandwidth wise, there is a benchmark showing how otf/ttf tend to be much smaller than svg files.
Rendering wise, I didn't find much information about it last time I checked but i'll look again or try to benchmark it myself.

I've been working on gathering the pros & cons for it in this document, I think it will anwser some of your questions.

[wkeese]

@tkrugg, I'm curious to know how your <d-icon> widget would work. Specifically how (for example) <d-icon name="expand"> would load different SVG depending on the theme (for example, a right arrow in bootstrap and a plus sign for the iOS theme).

[tkrugg]

I have to say i didn't think that specific case through. Is it a very common case?
I'd say we'd have to pick more abstract names such as expand.svg, and have it look different depending on the theme.
deliteful/Icon/themes/bootstrap/icons/expand.svg
deliteful/Icon/themes/ios/icons/expand.svg

[wkeese]

Oh, I'm fine with that but I just don't understand how the <d-icon> widget loads the right file depending on the theme.

[tkrugg]

I've been spending some time on sketching an API for this d-icon widget,
especially recreating in svg the features we have with fonts bill pointed out offline, namely

• as easy to use in markup

<span class="fontawesome-arrow"></span>

• as easy to override as redefining an icon class:

.fontawesome-arrow::before { content: ... }  /* overriding the arrow icon */
.d-star-rating-full::before { content: ... } /* customize the icon used by a widget. */

• as easy to bundle in single file multiple icons.

With SVG

<d-icon-pack id="fontawesome" ></d-icon-pack>
<d-icon pack="fontawesome" name="arrow-right"></d-icon>
<!-- fontawesome/arrow-right.svg file will be fetched and stored inside d-icon-pack-->

bundling icons

<d-icon-pack id="fontawesome" src="fontawesome.svg"></d-icon-pack>
<d-icon pack="fontawesome" name="arrow-right"></d-icon>
<!-- won't be fetched as it exists in src -->

Overriding icons

<d-icon-pack id="fontawesome" src="fontawesome.svg">
     <svg>
          <symbol id="#arrow-right">...</symbol>
          <!-- overriding #arrow-right from arrows-icons-pack.svg -->

          <symbol id="#star-rating-icon">
               <use xlink:href="#star"></use>
          </symbol>
          <!-- overriding #star-rating-icon used by StarRating -->
          // TODO: there is no way to say star-icon should use this icon pack.
          // shoudln't it be better if star rating took a name and a pack as properties?
          // I have no better solution for this, please feel free to make suggestions.
     </svg>
</d-icon-pack>
<d-icon pack="fontawesome" name="arrow-right"></d-icon>

Defining new icons or stacking existing ones.

<d-icon-pack id="fontawesome" src="fontawesome.svg">
     <svg>
          <symbol id="#arrow-double">
          <!-- creating a double arrow from two existing arrows -->
               <use xlink:href="#arrow-left"></use>
               <use xlink:href="#arrow-right"></use>
          </symbol>
     </svg>
</d-icon-pack>
<d-icon pack="fontawesome" name="arrow-double"></d-icon>

There is a prototype that implements all of the above features.
I imagine we could make this API work with fonts as well, though that hasn't been implemented yet, I'll need to explore this more.

With Fonts

<d-icon-pack id="fontawesome" 
         font-src="icons.tff,icons.otf,icons.woff" css-src="icons.css"></d-icon-pack>
<d-icon pack="fontawesome" name="arrow-right"></d-icon>
<!-- would compile to <span class="fontawesome_arrow-right"></span> -->

With PNGs

I didn't put more thought into this but theoretically it should be possible to make their use a little easier.
If PNGs work with this API, we could allow the user the rasterize his SVGs in the build step, for even faster rendering.

Programmatically

define([
     // "deliteful/d-icon-pack!<IconPack>,<icon1>,<icon2>,..."
     "deliteful/d-icon-pack!fontawesome,arrow-right,arrow-down"    
], function(){
     ...
})

<template>
     <button>
          <!-- an instance of <d-icon-pack id="fontawesome"></d-icon-pack> is placed in the page if it doesn't exist yet -->
          <d-icon pack="fontawesome" name="arrow-right"></d-icon> Click plz
     </button>
</template>

The information passed in as a dependency will be used during the build to bundle svgs together.

Theming

We want to:

• be able to use a different icon packs, depending on the theme:
  for example we want the "share" icon to look different under holodark and ios, as it's often the case.
• be able to use different icon packs under the same theme.

At the moment <d-icon-pack> is a plain widget (inherits from delite/Container), that necessarily comes with its bootstrap, holodark and ios themes. If it stays a widget and goes under deliteful, we could have:

deliteful/
  |_ IconPack/
       |_ themes/
             |_ bootstrap/    
             |        |_ fontawesome/
             |        |          |____arrow-right.svg
             |        |          |____arrow-left.svg
             |        |          |____...
             |        |_ fontawesome.svg // bundle as svg sprite (or font).
             |        |_ my_custom_pack/
             |        |          |____company-logo.svg
             |        |          |____...
             |        |_ my_custom_pack.svg
             |
             |_ holodark/
             |        |_ fontawesome/...
             |        |_ fontawesome.svg //
             |        |_ my_custom_pack/...
             |        |_ my_custom_pack.svg
             |
             |______ ios/
                      |_ ...

I'm not sure how we could keep theses inside theme folders and still have them fetched as dependencies. @cjolif suggested Bower hooks. I've tried them and I can say it's solving this problem.

Other ideas

A few other features we could imagine adding to d-icon:

<d-icon names="square,check"></d-icon>
<d-icon name="arrow" direction="right"></d-icon>
<d-icon name="checkbox" state="checked/unchecked"></d-icon>
<d-icon name="refresh" spinning></d-icon> 
<d-icon name="arrow" size="mini/normal/big"></d-icon> <!-- multiple levels of details -->

Please share your thoughts on this.

[wkeese]

Thanks for that summary. I'm intrigued by the <d-icon> widget that inserts an icon, and your plugin to embed the icons into the build (similar to widget templates) seems like a good idea.

My main thought though is that the icons themselves shouldn't be tied to <d-icon>, or <d-icon-pack>. Just as delite/theme! and requirejs-dplugins/css! can load any CSS files, shouldn't <d-icon-pack> be able to load SVG sprites from any location? Maybe a syntax like:

"deliteful/d-icon-pack!deliteful/icons/{{theme}}/fontawesome,arrow-right,arrow-down"   

Actually, I'm confused, because your other example suggests that this is already supported:

<d-icon-pack id="fontawesome" src="fontawesome.svg">

Presumably src can point anywhere?

Anyway, one example where this would be useful would be deliteful/Button, which displays a user-defined icon. So the user needs some way to load his custom icons.

I also wonder if there's some overlap w/the ticket about making custom themes.

[tkrugg]

"deliteful/d-icon-pack!deliteful/icons/{{theme}}/fontawesome,arrow-right,arrow-down"   

is much simpler and more consistent with the rest.
About src: yes, I was thinking allowing the user to use any icon pack just by doing

<d-icon-pack id="myicons" src="path/to/my/icon/pack.svg"></d-icon-pack>
<d-icon pack="myicons" name="arrow-right"></d-icon>

then maybe he could get something theme specific with

<d-icon-pack id="allicons" src="deliteful/icons/{{theme}}/icons.svg"></d-icon-pack>
<d-icon pack="allicons" name="arrow-right"></d-icon>

(...) so the user needs some way to load his custom icons.
I also wonder if there's some overlap w/the ticket about making custom themes.

There is the option to keep sets of icons within the theme folders of the widget that's using them, but I think it may be harder to manage. Also by sticking to the structure of a regular widget, I was hoping to fall in the case investigated here: #457 (comment) (not that it's a sufficient reason to do so)

[wkeese]

OK, thanks, makes sense.

When I vaguely mentioned "overlap w/the ticket about making custom themes", I was actually thinking of sharing code for things like:

• figuring out the theme name (based on navigator.userAgent)
• adjusting path by replacing {{theme}} with the name of the theme
• path remappings like mentioned in Theming: how an application developer can easily derive from one of our theme and provide its own theme to be used by the application #457 (comment)

What do you think about enhancing the theme! plugin so it can load SVG sprites in addition to CSS files, for example:

define([
    ...
    "delite/theme!./ToggleButton/themes/{{theme}}/ToggleButton.css",
    "delite/theme!./IconPack/themes/{{theme}}/fontawesome/ToggleButtonCheckmark.svg"
], ...

There is the option to keep sets of icons within the theme folders of the widget that's using them, but I think it may be harder to manage

Oh, I don't care what directory they are in.

[tkrugg]

That sounds good! I'll look into that.

[wkeese]

I think this article is a bit exaggerated but still, looks like more reasons to switch to SVG icons: https://speakerdeck.com/ninjanails/death-to-icon-fonts.

[wkeese]

Closing this since we no longer have plans to switch to SVG icons, and CheckBox, StarRating, and Combobox already specify their icons via CSS content: ....