feat(icon): support custom naming and selector

This PR allows for custom selector strategies for icons.

Especially for Fontawesome Pro there are icons which share the exact same words but in a different order ("foo-bar" and "bar-foo" are 2 different icons). This wouldn't work using the default fui logic

i.icon.foo.bar::before {}
Now, it's possible to adjust 3 new variables which would allow different icon class selectors

1. Ordered selector
@iconClassSeparator: " "; // a space separator automatically forces order
// or
@iconForcedOrder: true;
results in

i.icon[class*="foo bar"]::before {}
2. Dashed one word selector
@iconClassSeparator: "-";
results in

i.icon.foo-bar::before {}
3. Use data attribute instead of classname (this was originally planned as default for 3.0) and optionall use a custom class separator
@iconClassSeparator: "_";
@iconForcedOrder: true;
@iconForcedAttribute: data-icon
results in

i.icon[data-icon*="foo_bar"]::before {}
I also simplified the generateIcon function so it can be reused for duotone icons (because the only difference is the pseudo selector)

Author: lubber-de

src/definitions/elements/icon.less

@@ -513,11 +513,14 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     }
 }
 
-.generateIcons(@map, @fontFamily) {
+.generateIcons(@map, @fontFamily: false, @pseudo: before) {
     each(@map, {
         @escapedKey: replace(@key, "^([0-9])", "\3$1 ");
-        @normalizedKey: replace(@escapedKey, "_", ".", "g");
-        i.icon.@{normalizedKey}::before {
+        @normalizedKey: replace(@escapedKey, "_", @iconClassSeparator, "g");
+        @unorderedKey: e(%(".%s::%s",@normalizedKey, @pseudo));
+        @orderedKey: e(%('[%s*="%s"]::%s', @iconForcedAttribute, @normalizedKey, @pseudo));
+        @selectorKey: if(@iconForcedOrder or @iconClassSeparator = " ", @orderedKey, @unorderedKey);
+        i.icon@{selectorKey} {
             content: "@{value}";
             & when not (@fontFamily = false) {
                 font-family: @fontFamily;
@@ -526,19 +529,9 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     });
 };
 
-.generateSecondaryIcons(@map) {
-    each(@map, {
-        @escapedKey: replace(@key, "^([0-9])", "\3$1 ");
-        @normalizedKey: replace(@escapedKey, "_", ".", "g");
-        i.icon.@{normalizedKey}::after {
-            content: "@{value}";
-        }
-    });
-};
-
 & when (@variationIconDeprecated) {
     /* Deprecated *In/Out Naming Conflict) */
-    .generateIcons(@icon-deprecated-map, false);
+    .generateIcons(@icon-deprecated-map);
 }
 
 & when (@variationIconSolid) {
@@ -547,10 +540,10 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     *******************************/
 
     /* Icons */
-    .generateIcons(@icon-map, false);
+    .generateIcons(@icon-map);
     & when (@variationIconAliases) {
         /* Aliases */
-        .generateIcons(@icon-aliases-map, false);
+        .generateIcons(@icon-aliases-map);
     }
 }
 
@@ -564,10 +557,10 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     }
 
     /* Icons */
-    .generateIcons(@icon-outline-map, false);
+    .generateIcons(@icon-outline-map);
     & when (@variationIconAliases) {
         /* Aliases */
-        .generateIcons(@icon-outline-aliases-map, false);
+        .generateIcons(@icon-outline-aliases-map);
     }
 }
 
@@ -580,10 +573,10 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     i.icon.thin {
         font-family: @thinFontName;
     }
-    .generateIcons(@icon-thin-map, false);
+    .generateIcons(@icon-thin-map);
     & when (@variationIconAliases) {
         /* Aliases */
-        .generateIcons(@icon-thin-aliases-map, false);
+        .generateIcons(@icon-thin-aliases-map);
     }
 }
 
@@ -630,13 +623,13 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
         opacity: @duotoneSecondaryOpacity;
     }
 
-    .generateIcons(@icon-duotone-map, false);
-    .generateSecondaryIcons(@icon-duotone-secondary-map);
+    .generateIcons(@icon-duotone-map);
+    .generateIcons(@icon-duotone-secondary-map, false, after);
 
     & when (@variationIconAliases) {
         /* Aliases */
-        .generateIcons(@icon-duotone-aliases-map, false);
-        .generateSecondaryIcons(@icon-duotone-secondary-aliases-map);
+        .generateIcons(@icon-duotone-aliases-map);
+        .generateIcons(@icon-duotone-secondary-aliases-map, false, after);
     }
 
     /*

src/themes/default/elements/icon.variables

@@ -78,7 +78,10 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
     };
 };
 
-// Underscores in map keys will be replaced by dots to separate classnames at compile time
+// Underscores in map keys will be replaced by @iconClassSeparator to separate classnames at compile time
+@iconClassSeparator: ".";
+@iconForcedOrder: false;
+@iconForcedAttribute: class;
 
 /* Deprecated (In/Out Naming Conflict) */
 @icon-deprecated-map: {