[csswg-drafts] [css-icon] CSS isn't used for icons - it should be (#4295)

Grovkillen has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-icon] CSS isn't used for icons - it should be ==
I'm developing a new front-end for the IoT OS "ESP Easy" and we really don't want to have any dependencies. Thus I have created my own framework called "guiEasy" which consists of a plain CSS file. The idea is to have everything modular and thus all element styling depend on global and element based variables to manipulate the GUI.

To get rid of static (but nice looking) font based icons and hard to tweak SVG based icons I stumbled upon this page:
https://cssicon.space/#/

It is a hackish way of creating icons using pure CSS and I have been starting to create icons this way. You may see how this is done here: https://grovkillen.com/guieasy

My idea is that CSS should be the main source of styling icons as well as everything else. That way the icons can adapt to not only color but form and style. If you mess around with the radius on the above site (main tab, radius=1 for very round style, radius=2...7 for semi round, radius=100 for sharp style) and you'll see that the icons themselves adapt to this style.

So my suggestion:

```
<icon>
<icon class=...>
<icon data-attribute=...>
... etc.
```
The above HTML element would be able to be styled using layers:

```
.classname {
  icon-background: iconbg;
  icon-layer-0: shadow;
  icon-layer-1: graphics;
  icon-layer-n: ....
  icon-badge: roundbadge;

  icon-background-color: #...;
  icon-layer-n-color: #...;
  icon-badge-color: #...;

  icon-background-transform: XXXX;
  icon-layer-n-transform: XXXX;
  icon-badge-transform: XXXX;

  ... Adding more icon related CSS stuff here...
}

@icon-layer iconbg {
  ...CSS stuff
  ...SVG paths
}
@icon-layer roundbadge {
  contents: attr(data-badge-number);
  ...CSS stuff
  ...SVG paths
}
```
The background is ALWAYS on bottom
The badge is ALWAYS on top

Badge = a notifying small element which could be used to show numbers of unread messages etc. It may fetch it's value from a set attribute.

You can by doing this combine multiple "keyframes" which are defined in the` @icon-layer` part of the CSS.

The icon element is by design always NNNxNNN in size and will (if not override) obey the size (height) of the font scope it's part of. Origo should be defined by default from 0,0=center-center and then you can place the different layers in arrays XY and orthogonality.

BAD IDEA or GREAT IDEA?

PS. a battery icon doesn't have to have multiple icons to represent charging, battery level etc. it could just adjust a attribute value etc. As an example you may add the class "one, two, three, four, or five" to have the wifi signal strength icon on my above linked site to have the bars filled in. Change the attribute for signal strength and you'll see that the dBm is updated in the icon as well.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4295 using your GitHub account

Received on Wednesday, 11 September 2019 04:08:11 UTC