[icon] Layers @rule to create icons based on multiple “keyframes”

This is 1/3 of the original topic of the CSS isn’t used for icons topic. I took the liberty to use SebastianZ’s list of downsides of current implementation.

The idea behind this is to start using proper ways of handling icons instead of other “hackish” ways of doing it. Consider the three main ways of using icons (font-based, svg-based, bitmap-based):

1. Font-based icons / icon fonts (There’s a great article about why icon fonts are often considered hacks written by Tyler Sticka back in 2015.)

• Accessibility issues
• Error prone (because of relying on specific Unicode characters referring to specific icons)
• Poor fallbacks

2. SVG icons

• Styling only really possible when embedded in HTML (discussion on the WICG)
• Alignment within text difficult (discussion on the CSSWG 1)

3. Pixel image icons

• No styling possible
• Alignment within text difficult
• Poor display on zooming or high dpi displays

So given these shortcomings I suggest the following. And this particular thread is about LAYERING mechanism used in suggested <icon> element.

@icon-layer iconbg {
  ...CSS stuff
  ...SVG paths
  ...semantic shapes
}
@icon-layer roundbadge {
  contents: attr(data-badge-number);
  ...CSS stuff
  ...SVG paths
  ...semantic shapes
}

• The idea is to have only one shape per @icon-layer which is not sized or rotated.
• To combine multiple layers you use what’s suggested here.
• Internal origo/origin (for it’s own shapes etc) should be defined by default from 0,0=center-center
• By design you’re not allowed to have more than one closed figure per icon-layer.
• icon-layer will not place the shape/figure, by default it will be placed symmetrical in the origo of the icon. To move it you need to use the ...-transform attribute.
• You can place the different layers in arrays X&Y…-X&-Y and orthogonality (R&Angle).
• If the size is not set to anything (0…100%) it will by design be set to height=100% or width=100% (as in it will try to fill the NxN space either by height or width, whatever comes first)