ui: Native CSS Icon Composition (#12461)

This commit/PR beings to move away from using CSS preprocessing for our icons and towards using native CSS via native CSS property composition

.changelog/12461.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Move icons away from depending on a CSS preprocessor
+```

ui/packages/consul-ui/app/components/composite-row/index.scss

@@ -108,5 +108,5 @@
 %composite-row-header .policy-management dd::before,
 %composite-row-detail .policy-management::before {
   @extend %with-star-fill-mask, %as-pseudo;
-  background-color: rgb(var(--tone-brand-600));
+  --icon-color: rgb(var(--tone-brand-600));
 }

ui/packages/consul-ui/app/components/copy-button/skin.scss

@@ -1,22 +1,22 @@
 %copy-button {
   color: rgb(var(--tone-blue-500));
-  background-color: var(--transparent);
+  --icon-color: var(--transparent);
 }
 %copy-button::before {
   @extend %with-copy-action-mask, %as-pseudo;
-  background-color: rgb(var(--tone-gray-500));
+  --icon-color: rgb(var(--tone-gray-500));
 }
 %copy-button::after {
-  background-color: rgb(var(--tone-gray-050));
+  --icon-color: rgb(var(--tone-gray-050));
 }
 %copy-button:hover:not(:disabled):not(:active),
 %copy-button:focus {
   color: rgb(var(--tone-blue-500));
-  background-color: rgb(var(--tone-gray-050));
+  --icon-color: rgb(var(--tone-gray-050));
 }
 %copy-button:hover::before {
-  background-color: rgb(var(--tone-blue-500));
+  --icon-color: rgb(var(--tone-blue-500));
 }
 %copy-button:active {
-  background-color: rgb(var(--tone-gray-200));
+  --icon-color: rgb(var(--tone-gray-200));
 }

ui/packages/consul-ui/app/components/csv-list/index.scss

@@ -12,5 +12,6 @@
 %csv:not(:last-child)::after {
   display: inline;
   content: var(--csv-list-separator);
+  vertical-align: initial;
   margin-right: 0.3em;
 }

ui/packages/consul-ui/app/components/freetext-filter/skin.scss

@@ -23,7 +23,9 @@
     border: none;
   }
   &_label::after {
-    @extend %as-pseudo;
+    visibility: visible;
+    --icon-name: icon-search;
+    content: '';
     position: absolute;
     top: 50%;
     left: 50%;
@@ -32,9 +34,6 @@
     margin-left: -8px;
     margin-top: -8px;
   }
-  &_label::after {
-    @extend %with-search-mask;
-  }
   .popover-menu {
     background-color: rgb(var(--tone-gray-050));
     color: rgb(var(--tone-gray-800));

ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss

@@ -6,27 +6,22 @@
   color: inherit;
 }
 %main-nav-horizontal-popover-menu-trigger::after {
-  @extend %with-chevron-down-mask, %as-pseudo;
+  --icon-name: icon-chevron-down;
-  width: 16px;
+  content: '';
-  height: 16px;
-  position: relative;
 }
 %main-nav-horizontal-popover-menu-trigger[aria-expanded='true']::after {
-  @extend %with-chevron-up-mask;
+  transform: scaleY(-100%);
 }
-/**/
+
-/* reduced size hamburger menu */
 %main-nav-horizontal-toggle {
   display: none;
 }
 %main-nav-horizontal-toggle-button::before {
-  @extend %with-menu-mask, %as-pseudo;
+  --icon-name: icon-menu;
-  font-size: 1.2em;
+  --icon-color: rgb(var(--tone-gray-800));
+  content: '';
   cursor: pointer;
 }
-%main-nav-horizontal-toggle-button::before {
-  background-color: rgb(var(--tone-gray-800));
-}
 %main-nav-horizontal-action,
 %main-nav-horizontal-action-intent,
 %main-nav-horizontal-action-active {

ui/packages/consul-ui/app/components/modal-dialog/layout.scss

@@ -61,9 +61,8 @@
 %modal-window > header {
   position: relative;
 }
-%modal-window > header [data-a11y-dialog-hide] {
+%modal-window > header button {
   float: right;
-  text-indent: -9000px;
   width: 24px;
   height: 24px;
   margin-top: -3px;

ui/packages/consul-ui/app/components/modal-dialog/skin.scss

@@ -47,8 +47,7 @@
   border-width: 1px;
 }
 
-%modal-window > header [data-a11y-dialog-hide] {
+%modal-window > header button {
-  @extend %with-cancel-plain-icon;
   cursor: pointer;
   border: var(--decor-border-100);
   /*%frame-gray-050??*/
@@ -56,3 +55,8 @@
   border-color: rgb(var(--tone-gray-300));
   border-radius: var(--decor-radius-100);
 }
+%modal-window > header button::before {
+  @extend %with-cancel-plain-icon, %as-pseudo;
+  margin-left: -7px;
+  margin-top: -3px;
+}

ui/packages/consul-ui/app/components/oidc-select/index.hbs

@@ -75,7 +75,7 @@ as |chart|}}
   </StateChart>
 
   <State @matches="loading">
-    <Progress />
+    <Progress aria-label="Loading" />
   </State>
 
   <State @matches="loaded">

ui/packages/consul-ui/app/components/pill/index.scss

@@ -20,3 +20,15 @@ span.policy-node-identity::before {
 span.policy-service-identity::before {
   content: 'Service Identity: ';
 }
+%pill.leader::before {
+  @extend %with-star-outline-mask, %as-pseudo;
+}
+%pill.jwt::before {
+  @extend %with-logo-jwt-color-icon, %as-pseudo;
+}
+%pill.oidc::before {
+  @extend %with-logo-oidc-color-icon, %as-pseudo;
+}
+%pill.kubernetes::before {
+  @extend %with-logo-kubernetes-color-icon, %as-pseudo;
+}

ui/packages/consul-ui/app/components/pill/layout.scss

@@ -6,12 +6,11 @@
 }
 %pill::before {
   margin-right: 4px;
-  width: 0.75rem !important; /* 12px */
-  height: 0.75rem !important; /* 12px */
 }
 %pill-200 {
   @extend %pill;
   padding: 0 8px;
+  --icon-size: icon-200;
 }
 %pill-500 {
   @extend %pill;

ui/packages/consul-ui/app/components/progress/README.mdx

@@ -1,8 +1,21 @@
 # Progress
 
 Simple Progress component in lieu of a reliable/styleable cross browser
-`<progress />`.
+`<progress />`. Please consider making use of `aria-label` or `aria-labelled-by`.
 
 ```hbs preview-template
-<Progress />
+<Progress
+  aria-label="Loading"
+/>
+```
+
+The animated icon also automatically supports a `prefers-reduced-motion` class/setting. The example below uses a local class just for illustration purposes in these docs. You do not need to add this class anywhere, please use the above class-less example instead.
+
+```hbs preview-template
+<Progress
+  class={{class-map
+    'prefers-reduced-motion'
+  }}
+  aria-label="Loading"
+/>
 ```

ui/packages/consul-ui/app/components/progress/index.hbs

@@ -1,4 +1,5 @@
 <div
   class="progress indeterminate"
+  role="progressbar"
   ...attributes
 ></div>

ui/packages/consul-ui/app/components/progress/layout.scss

@@ -7,7 +7,3 @@
 %progress-native::-webkit-progress-value {
   display: none;
 }
-%progress-indeterminate {
-  height: 24px;
-  width: 24px;
-}

ui/packages/consul-ui/app/components/progress/skin.scss

@@ -1,7 +1,12 @@
 %progress-indeterminate {
-  @extend %loading-svg-prop;
+  width: 100%;
-  background-image: var(--loading-svg);
+  display: flex;
-  background-position: center;
+  align-items: center;
-  background-repeat: no-repeat;
+  justify-content: center;
-  background-color: transparent;
+  --icon-size: icon-700; /* 24px */
+  --icon-name: var(--icon-loading);
+  --icon-color: rgb(var(--tone-gray-500));
+}
+%progress-indeterminate::before {
+  content: '';
 }

ui/packages/consul-ui/app/components/secret-button/index.scss

@@ -9,13 +9,14 @@
 %secret-button span {
   visibility: hidden;
   position: absolute;
+  --icon-color: rgb(var(--tone-gray-500));
 }
 %secret-button em {
   margin-left: 22px;
 }
 %secret-button span::before {
   @extend %with-visibility-show-mask, %as-pseudo;
-  background-color: rgb(var(--tone-gray-500));
+  visibility: visible;
 }
 %secret-button input:checked + span::before {
   @extend %with-visibility-hide-mask;

ui/packages/consul-ui/app/components/topology-metrics/card/index.scss

@@ -56,23 +56,23 @@
     .partition dt::before,
     .nspace dt::before,
     .health dt::before {
-      background-color: rgb(var(--tone-gray-500));
+      --icon-color: rgb(var(--tone-gray-500));
     }
     .passing::before {
       @extend %with-check-circle-fill-mask, %as-pseudo;
-      background-color: rgb(var(--tone-green-500));
+      --icon-color: rgb(var(--tone-green-500));
     }
     .warning::before {
       @extend %with-alert-triangle-mask, %as-pseudo;
-      background-color: rgb(var(--tone-orange-500));
+      --icon-color: rgb(var(--tone-orange-500));
     }
     .critical::before {
       @extend %with-cancel-square-fill-mask, %as-pseudo;
-      background-color: rgb(var(--tone-red-500));
+      --icon-color: rgb(var(--tone-red-500));
     }
     .empty::before {
       @extend %with-minus-square-fill-mask, %as-pseudo;
-      color: rgb(var(--tone-gray-500));
+      --icon-color: rgb(var(--tone-gray-500));
     }
   }
   .details {
@@ -96,7 +96,7 @@
       span::before {
         margin-right: 0px;
         @extend %with-union-mask, %as-pseudo;
-        background-color: rgb(var(--tone-gray-500));
+        --icon-color: rgb(var(--tone-gray-500));
       }
       dl:first-child {
         grid-area: partition;

ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss

@@ -21,16 +21,16 @@
   &.deny > button::before,
   &.deny .tippy-arrow::after {
     @extend %with-cancel-square-fill-mask, %as-pseudo;
-    background-color: rgb(var(--tone-red-500));
+    --icon-color: rgb(var(--tone-red-500));
   }
   &.l7 > button::before,
   &.l7 .tippy-arrow::after {
     @extend %with-layers-mask, %as-pseudo;
-    background-color: rgb(var(--tone-gray-300));
+    --icon-color: rgb(var(--tone-gray-300));
   }
   &.not-defined > button::before,
   &.not-defined .tippy-arrow::after {
     @extend %with-alert-triangle-mask, %as-pseudo;
-    color: rgb(var(--tone-yellow-500));
+    --icon-color: rgb(var(--tone-yellow-500));
   }
 }

ui/packages/consul-ui/app/components/topology-metrics/status/index.scss

@@ -14,5 +14,7 @@
 }
 
 span.topology-metrics-status-loader::after {
-  @extend %with-loading-icon, %as-pseudo;
+  --icon-name: var(--icon-loading);
+  content: '';
+  margin-left: 0.5rem; /* 8px */
 }

ui/packages/consul-ui/app/modifiers/css-props.js

@@ -29,10 +29,14 @@ export default modifier(function($element, [returns], hash) {
         if (prop.charAt(prop.length - 1) === '-') {
           prop = prop.substr(0, prop.length - 1);
         }
-        if (typeof obj[prop] === 'undefined') {
+        if(hash.group) {
-          obj[prop] = {};
+          if (typeof obj[prop] === 'undefined') {
+            obj[prop] = {};
+          }
+          obj[prop][key] = value;
+        } else {
+          obj[key] = value;
         }
-        obj[prop][key] = value;
       }
     });
     returns(obj);

ui/packages/consul-ui/app/styles/base/icons/README.mdx

@@ -1,5 +1,87 @@
 # Iconography
 
+All our iconography uses native CSS properties for adding iconography from The
+Outside. You can also add icons using the same properties within `style=""`
+attributes, but you should think twice before adding decorative content into
+HTML and only do so if you have a good reason/have tried everything else.
+
+Available icons properties are:
+
+- `--icon-name`: See below for available names
+- `--icon-color`: By default our icons are set to be monochrome, using
+  `--icon-color` will color the icon, you can also use `currentColor`
+- `--icon-size`: Set the size of the icon, see below for available values. Our
+  values use a `icon-000` naming scheme similar to all our ther naming scales (and
+  `font-weight`). We default this to `icon-300` i.e. `1rem`/`16px` and `icon-000`
+  means 'use the font-size'
+- `--icon-resolution`: Set the resolution of the icon. Currently you can set
+  either `1` or `.5` here `resolution` happens to mean the thickness of the lines
+  used in the icon. 1 equals thicker lines and should be used at sizes lower than
+  `icon-500`. `.5` equals thinner lines and should be used at sizes larger than
+  `icon-500`.
+
+All of the above properties can be suffixed with `-start` or `-end`, these are
+mainly used for specifying icons using `style=""` attributes. Here `start` and
+`end` refer to either the `::before` or `::after` pseudo element to use to
+display the icon. If you are not using the `style=""` attribute (which you
+probably aren't) consider just using normal `::before` and `::after` CSS
+selectors.
+
+```css
+.selector::before {
+  --icon-name: icon-aws-color;
+  content: '';
+}
+```
+
+```css
+.selector::after {
+  --icon-name: icon-aws;
+  --icon-color: rgb(var(---white));
+  content: '';
+}
+```
+
+If you cannot use CSS or have a good reason to do so, you can very easily add
+icons in HTML using these CSS properties.
+
+```hbs preview-template
+<h2
+  style={{style-map
+    (array '--icon-name-start' 'icon-consul')
+    (array '--icon-color-start' 'rgb(var(--tone-strawberry-500))')
+    (array '--icon-name-end' 'icon-vault')
+    (array '--icon-color-end' 'var(--color-vault-500)')
+  }}
+>
+  Header Name
+</h2>
+```
+
+It's probably worth noting that we could make an icon component using the
+following. Under different circumstances this would give us an option that works
+"For Everyone, Everywhere" (in Every Framework as it's just native CSS).
+
+```hbs
+<span
+  class={{class-map
+    'visually-hidden'
+  }}
+  style={{style-map
+    (array '--icon-name-start' @name)
+    (array '--icon-color' @color)
+    (array '--icon-size' @size)
+  }}
+  ...attributes
+>{{yield}}</span>
+
+
+<Icon @name="icon-name" @color="#FF0000" @size="icon-300" />
+```
+
+
+## Deprecated
+
 Please prefer our Constructable `%placeholder` styles over singular CSS
 properties. If you need to drop back, to something not covered there then you
 can also use CSS properties directly.
@@ -9,12 +91,6 @@ All icons use a `%with-` prefix for example `%with-alert-circle-fill-icon` or
 the `%as-pseudo` placeholder to tell CSS that we are using the background on a
 pseudo element:
 
-```css
-.selector::before {
-  @extend %with-alert-circle-fill-mask, %as-pseudo;
-}
-```
-
 If you are not using a pseudo element for whatever reason, then you do not need
 to use `%as-pseudo`.
 
@@ -39,36 +115,61 @@ use `-mask`, use `-icon` instead:
 }
 ```
 
-## Structure Icons + Consul Specific Icons
-
 ```hbs preview-template
-<ul>
+<figure>
-{{#each (icons-debug 'structure') as |prop|}}
+    <select
+      onchange={{action (mut this.type) value="target.value"}}
+    >
+      <option>colored</option>
+      <option>monochrome</option>
+    </select>
+    <select
+      onchange={{action (mut this.theme) value="target.value"}}
+    >
+      <option>light</option>
+      <option>dark</option>
+    </select>
+    <input
+      oninput={{action (mut this.size) value="target.value"}}
+      type="range" min="100" max="900" step="100"
+    />
+    {{this.size}}
+</figure>
+<ul
+  {{css-props (set this 'icons')
+    prefix='icon-'
+  }}
+  class={{class-map
+    (concat 'theme-' (or this.theme 'light'))
+  }}
+  style={{style-map
+    (array '--icon-color' (if (eq this.type 'monochrome') 'rgb(var(--black))'))
+    (array '--icon-size' (concat 'icon-' (or this.size '500')))
+    (array '--icon-resolution' (if (gt this.size 500) '.5' '1'))
+  }}
+>
+{{#each-in this.icons as |prop value|}}
+{{#if (and
+    (not (contains prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
+    (not (string-includes prop '-24'))
+  )
+}}
+{{#let
+  (string-replace (string-replace prop '-16' '') '--' '')
+as |name|}}
   <li>
     <figure
-      {{with-copyable (concat "@extend %" prop.placeholder ", %as-pseudo;")}}
+      {{with-copyable (concat '--icon-name: ' name ';content: "";')}}
-      class={{concat 'debug-' prop.placeholder '-before'}}
+      style={{style-map
+        (array '--icon-name-start' name)
+      }}
     >
-      <figcaption>{{prop.name}}</figcaption>
+      <figcaption>{{name}}</figcaption>
     </figure>
   </li>
-{{/each}}
+{{/let}}
+{{/if}}
+{{/each-in}}
 </ul>
 ```
 
-## Flight Icons
-
-```hbs preview-template
-<ul>
-{{#each (icons-debug 'flight') as |prop|}}
-  <li>
-    <figure
-      {{with-copyable (concat "@extend %" prop.placeholder ", %as-pseudo;")}}
-      class={{concat 'debug-' prop.placeholder '-before'}}
-    >
-      <figcaption>{{prop.name}}</figcaption>
-    </figure>
-  </li>
-{{/each}}
-</ul>
-```

ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss

@@ -0,0 +1,89 @@
+*::before, *::after {
+  display: inline-block;
+  animation-play-state: paused;
+  animation-fill-mode: forwards;
+  animation-iteration-count: var(--icon-resolution, 1);
+  vertical-align: text-top;
+}
+*::before {
+  animation-name: var(--icon-name-start, var(--icon-name)),
+                  var(--icon-size-start, var(--icon-size, icon-000));
+  background-color: var(--icon-color-start, var(--icon-color));
+}
+*::after {
+  animation-name: var(--icon-name-end, var(--icon-name)),
+                  var(--icon-size-end, var(--icon-size, icon-000));
+  background-color: var(--icon-color-end, var(--icon-color));
+}
+
+[style*='--icon-color-start']::before {
+  color: var(--icon-color-start);
+}
+[style*='--icon-color-end']::after {
+  color: var(--icon-color-end);
+}
+[style*='--icon-name-start']::before,
+[style*='--icon-name-end']::after {
+  content: '';
+}
+
+@keyframes icon-000 {
+  100% {
+    width: 1.2em;
+    height: 1.2em;
+  }
+}
+@keyframes icon-100 {
+  100% {
+    width: 0.625rem; /* 10px */
+    height: 0.625rem; /* 10px */
+  }
+}
+@keyframes icon-200 {
+  100% {
+    width: 0.75rem; /* 12px */
+    height: 0.75rem; /* 12px */
+  }
+}
+@keyframes icon-300 {
+  100% {
+    width: 1rem; /* 16px */
+    height: 1rem; /* 16px */
+  }
+}
+@keyframes icon-400 {
+  100% {
+    width: 1.125rem; /* 18px */
+    height: 1.125rem; /* 18px */
+  }
+}
+@keyframes icon-500 {
+  100% {
+    width: 1.250rem; /* 20px */
+    height: 1.250rem; /* 20px */
+  }
+}
+@keyframes icon-600 {
+  100% {
+    width: 1.375rem; /* 22px */
+    height: 1.375rem; /* 22px */
+  }
+}
+@keyframes icon-700 {
+  100% {
+    width: 1.500rem; /* 24px */
+    height: 1.500rem; /* 24px */
+  }
+}
+@keyframes icon-800 {
+  100% {
+    width: 1.625rem; /* 26px */
+    height: 1.625rem; /* 26px */
+  }
+}
+@keyframes icon-900 {
+  100% {
+    width: 1.750rem; /* 28px */
+    height: 1.750rem; /* 28px */
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss

@@ -6,17 +6,6 @@
   --theme-dark-none: initial;
   --theme-light-none: ;
 }
-%with-icon {
-  background-repeat: no-repeat;
-  background-position: center;
-}
-%with-mask {
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  background-color: currentColor;
-}
 %with-glyph-icon {
   font-weight: var(--typo-weight-normal);
   background-color: rgb(var(--tone-gray-100));
@@ -24,13 +13,7 @@
   padding: 0 4px;
 }
 %as-pseudo {
-  display: inline-block;
   content: '';
-  visibility: visible;
-  background-size: contain;
-  width: 1rem; /* 16px */
-  height: 1rem; /* 16px */
-  vertical-align: text-top;
 }
 %led-icon {
   position: relative;

ui/packages/consul-ui/app/styles/base/icons/icons/activity/index.scss

@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/activity/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-activity {
+  50% {
+
+    background-color: var(--icon-color, var(--color-activity-500, currentColor));
+    -webkit-mask-image: var(--icon-activity-24);
+    mask-image: var(--icon-activity-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-activity-500, currentColor));
+    -webkit-mask-image: var(--icon-activity-16);
+    mask-image: var(--icon-activity-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/activity/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-activity-icon {
+  --icon-name: icon-activity;
+  content: '';
+}
+%with-activity-mask {
+  --icon-name: icon-activity;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/activity/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-activity-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.016 1a.75.75 0 01.698.521l3.306 10.33 1.47-4.341A.75.75 0 0112.2 7H15a.75.75 0 010 1.5h-2.262l-2.028 5.99a.75.75 0 01-1.424-.011L5.952 4.06 4.504 8.008A.75.75 0 013.8 8.5H1A.75.75 0 111 7h2.276l2.02-5.508c.11-.301.4-.499.72-.492z" clip-rule="evenodd"/></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/activity/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-activity-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M9.003 2a.75.75 0 01.71.519l5.278 16.27 2.294-7.265A.75.75 0 0118 11h4a.75.75 0 010 1.5h-3.45l-2.835 8.976a.75.75 0 01-1.428.005L8.99 5.151l-2.278 6.836A.75.75 0 016 12.5H2A.75.75 0 012 11h3.46l2.828-8.487A.75.75 0 019.003 2z" clip-rule="evenodd"/></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/index.scss

@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-alert-circle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-circle-fill-24);
+    mask-image: var(--icon-alert-circle-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-circle-fill-16);
+    mask-image: var(--icon-alert-circle-fill-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-alert-circle-fill-icon {
+  --icon-name: icon-alert-circle-fill;
+  content: '';
+}
+%with-alert-circle-fill-mask {
+  --icon-name: icon-alert-circle-fill;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-circle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zm0 6a1 1 0 100 2h.007a1 1 0 100-2H8z" clip-rule="evenodd"/></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-circle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm-.75 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/index.scss

@@ -0,0 +1,6 @@
+
+        @import '../alert-circle/property-16';
+        @import '../alert-circle/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-alert-circle-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-circle-24);
+    mask-image: var(--icon-alert-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-circle-16);
+    mask-image: var(--icon-alert-circle-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-alert-circle-outline-icon {
+  --icon-name: icon-alert-circle-outline;
+  content: '';
+}
+%with-alert-circle-outline-mask {
+  --icon-name: icon-alert-circle-outline;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/index.scss

@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-alert-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-circle-24);
+    mask-image: var(--icon-alert-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-circle-16);
+    mask-image: var(--icon-alert-circle-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-alert-circle-icon {
+  --icon-name: icon-alert-circle;
+  content: '';
+}
+%with-alert-circle-mask {
+  --icon-name: icon-alert-circle;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zM8 10a1 1 0 100 2h.007a1 1 0 100-2H8z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 7a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 7zM12 15a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/index.scss

@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-alert-octagon-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-octagon-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-octagon-fill-24);
+    mask-image: var(--icon-alert-octagon-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-octagon-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-octagon-fill-16);
+    mask-image: var(--icon-alert-octagon-fill-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-alert-octagon-fill-icon {
+  --icon-name: icon-alert-octagon-fill;
+  content: '';
+}
+%with-alert-octagon-fill-mask {
+  --icon-name: icon-alert-octagon-fill;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-octagon-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.882.805A2.75 2.75 0 015.827 0h4.346c.73 0 1.429.29 1.945.805l3.076 3.077A2.75 2.75 0 0116 5.827v4.346c0 .73-.29 1.429-.806 1.945l-3.076 3.076a2.75 2.75 0 01-1.945.806H5.827a2.75 2.75 0 01-1.945-.806L.805 12.118A2.75 2.75 0 010 10.173V5.827c0-.73.29-1.429.805-1.945L3.882.805zM7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zm1.75-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z" clip-rule="evenodd"/></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-octagon-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.585 1c-.73 0-1.429.29-1.945.805L1.805 6.64A2.75 2.75 0 001 8.585v6.83c0 .73.29 1.429.805 1.945l4.835 4.835A2.75 2.75 0 008.585 23h6.83c.73 0 1.429-.29 1.945-.805l4.835-4.835A2.75 2.75 0 0023 15.415v-6.83c0-.73-.29-1.429-.805-1.945L17.36 1.805A2.75 2.75 0 0015.415 1h-6.83zm2.665 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/index.scss

@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-alert-octagon {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-octagon-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-octagon-24);
+    mask-image: var(--icon-alert-octagon-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-octagon-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-octagon-16);
+    mask-image: var(--icon-alert-octagon-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-alert-octagon-icon {
+  --icon-name: icon-alert-octagon;
+  content: '';
+}
+%with-alert-octagon-mask {
+  --icon-name: icon-alert-octagon;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-octagon-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/><path fill-rule="evenodd" d="M3.882.805A2.75 2.75 0 015.827 0h4.346c.73 0 1.429.29 1.945.805l3.076 3.077A2.75 2.75 0 0116 5.827v4.346c0 .73-.29 1.429-.806 1.945l-3.076 3.076a2.75 2.75 0 01-1.945.806H5.827a2.75 2.75 0 01-1.945-.806L.805 12.118A2.75 2.75 0 010 10.173V5.827c0-.73.29-1.429.805-1.945L3.882.805zm1.945.695c-.332 0-.65.132-.884.366L1.866 4.943a1.25 1.25 0 00-.366.884v4.346c0 .332.132.65.366.884l3.077 3.077c.234.234.552.366.884.366h4.346c.332 0 .65-.132.884-.366l3.077-3.077a1.25 1.25 0 00.366-.884V5.827c0-.332-.132-.65-.366-.884l-3.077-3.077a1.25 1.25 0 00-.884-.366H5.827z" clip-rule="evenodd"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-octagon-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1zM12.75 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z"/><path fill-rule="evenodd" d="M6.64 1.805A2.75 2.75 0 018.585 1h6.83c.73 0 1.429.29 1.945.805l4.835 4.835A2.75 2.75 0 0123 8.585v6.83c0 .73-.29 1.429-.805 1.945l-4.835 4.835a2.75 2.75 0 01-1.945.805h-6.83a2.75 2.75 0 01-1.945-.805L1.805 17.36A2.75 2.75 0 011 15.415v-6.83c0-.73.29-1.429.805-1.945L6.64 1.805zm1.945.695c-.332 0-.65.132-.884.366L2.866 7.701a1.25 1.25 0 00-.366.884v6.83c0 .332.132.65.366.884l4.835 4.835c.234.234.552.366.884.366h6.83c.332 0 .65-.132.884-.366l4.835-4.835a1.25 1.25 0 00.366-.884v-6.83c0-.332-.132-.65-.366-.884l-4.835-4.835a1.25 1.25 0 00-.884-.366h-6.83z" clip-rule="evenodd"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/index.scss

@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-alert-triangle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-triangle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-triangle-fill-24);
+    mask-image: var(--icon-alert-triangle-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-triangle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-triangle-fill-16);
+    mask-image: var(--icon-alert-triangle-fill-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-alert-triangle-fill-icon {
+  --icon-name: icon-alert-triangle-fill;
+  content: '';
+}
+%with-alert-triangle-fill-mask {
+  --icon-name: icon-alert-triangle-fill;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-triangle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1a2.143 2.143 0 00-1.827 1.024l-5.88 9.768a2.125 2.125 0 00.762 2.915c.322.188.687.289 1.06.293h11.77a2.143 2.143 0 001.834-1.074 2.126 2.126 0 00-.006-2.124L9.829 2.028A2.149 2.149 0 008 1zM7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zm1.75-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z" clip-rule="evenodd"/></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-triangle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 2c-.472 0-.934.127-1.342.366a2.75 2.75 0 00-.984.99L1.363 17.81l-.006.01a2.86 2.86 0 00-.007 2.758c.23.423.566.778.975 1.03.41.25.877.386 1.357.392h16.637c.479-.006.947-.142 1.356-.393.41-.25.744-.606.976-1.029a2.86 2.86 0 00-.008-2.758L14.328 3.36l-.002-.004a2.75 2.75 0 00-.984-.99A2.651 2.651 0 0012 2zm-.75 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 17a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/index.scss

@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-alert-triangle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-triangle-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-triangle-24);
+    mask-image: var(--icon-alert-triangle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-triangle-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-triangle-16);
+    mask-image: var(--icon-alert-triangle-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-alert-triangle-icon {
+  --icon-name: icon-alert-triangle;
+  content: '';
+}
+%with-alert-triangle-mask {
+  --icon-name: icon-alert-triangle;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-triangle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 5.75a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"/><path fill-rule="evenodd" d="M6.953 1.273a2.143 2.143 0 012.874.751l.002.004 5.884 9.774a2.126 2.126 0 01-.768 2.905c-.322.188-.687.289-1.06.293H2.115a2.143 2.143 0 01-1.833-1.074 2.125 2.125 0 01.006-2.124l.006-.01 5.878-9.764.002-.004c.191-.313.46-.571.78-.75zm.502 1.53l-.001.002-5.872 9.754a.626.626 0 00.231.853.644.644 0 00.314.088h11.746a.643.643 0 00.544-.32.626.626 0 000-.62l-5.87-9.755-.002-.001A.635.635 0 008 2.5a.643.643 0 00-.545.304z" clip-rule="evenodd"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-triangle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11 17a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1zM12.75 8.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z"/><path fill-rule="evenodd" d="M10.658 2.366a2.651 2.651 0 012.684 0c.407.239.745.581.984.99l.002.004 8.315 14.46a2.86 2.86 0 01.008 2.758 2.757 2.757 0 01-.976 1.03c-.41.25-.877.386-1.357.392H3.682a2.653 2.653 0 01-1.357-.393 2.757 2.757 0 01-.975-1.029 2.86 2.86 0 01.007-2.758l.006-.01 8.31-14.45.001-.004a2.75 2.75 0 01.984-.99zm.313 1.744v.001L2.665 18.552a1.36 1.36 0 000 1.306c.108.198.262.36.443.47.18.11.382.169.586.172h16.61c.204-.003.406-.061.586-.172.181-.11.335-.272.444-.47a1.361 1.361 0 00-.001-1.306L13.03 4.112l-.001-.002a1.25 1.25 0 00-.446-.45 1.151 1.151 0 00-1.166 0 1.25 1.25 0 00-.446.45z" clip-rule="evenodd"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/index.scss

@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/keyframes.scss

@@ -0,0 +1,9 @@
+@keyframes icon-alibaba-color {
+  50% {
+    background-image: var(--icon-alibaba-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-alibaba-color-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-alibaba-color-icon {
+  --icon-name: icon-alibaba-color;
+  content: '';
+}
+%with-alibaba-color-mask {
+  --icon-name: icon-alibaba-color;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alibaba-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23ED6B1E"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alibaba-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23ED6B1E"><path d="M15.21 11.248H8.805v1.44h6.405v-1.44z"/><path d="M18.405 6h-4.233l1.022 1.456 3.1.944c.574.176.942.72.926 1.28v4.64a1.34 1.34 0 01-.927 1.28l-3.082.944L14.171 18h4.233a3.196 3.196 0 003.195-3.2V9.2c.016-1.76-1.422-3.2-3.195-3.2zM5.595 6h4.232L8.805 7.456 5.722 8.4c-.575.176-.942.72-.926 1.28v4.64c0 .576.367 1.104.926 1.28l3.083.944L9.827 18H5.595A3.207 3.207 0 012.4 14.8V9.2C2.4 7.44 3.838 6 5.595 6z"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/index.scss

@@ -0,0 +1,6 @@
+
+        @import '../alibaba-color/property-16';
+        @import '../alibaba-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-alibaba {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alibaba-500, currentColor));
+    -webkit-mask-image: var(--icon-alibaba-color-24);
+    mask-image: var(--icon-alibaba-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alibaba-500, currentColor));
+    -webkit-mask-image: var(--icon-alibaba-color-16);
+    mask-image: var(--icon-alibaba-color-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-alibaba-icon {
+  --icon-name: icon-alibaba;
+  content: '';
+}
+%with-alibaba-mask {
+  --icon-name: icon-alibaba;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alibaba-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-alibaba-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/align-center/index.scss

@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/align-center/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-align-center {
+  50% {
+
+    background-color: var(--icon-color, var(--color-align-center-500, currentColor));
+    -webkit-mask-image: var(--icon-align-center-24);
+    mask-image: var(--icon-align-center-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-align-center-500, currentColor));
+    -webkit-mask-image: var(--icon-align-center-16);
+    mask-image: var(--icon-align-center-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/align-center/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-align-center-icon {
+  --icon-name: icon-align-center;
+  content: '';
+}
+%with-align-center-mask {
+  --icon-name: icon-align-center;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/align-center/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-align-center-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM3.75 6a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM3.75 12a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/align-center/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-align-center-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM5.75 9a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H5.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM5.75 17a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H5.75z"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/index.scss

@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-align-justify {
+  50% {
+
+    background-color: var(--icon-color, var(--color-align-justify-500, currentColor));
+    -webkit-mask-image: var(--icon-align-justify-24);
+    mask-image: var(--icon-align-justify-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-align-justify-500, currentColor));
+    -webkit-mask-image: var(--icon-align-justify-16);
+    mask-image: var(--icon-align-justify-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-align-justify-icon {
+  --icon-name: icon-align-justify;
+  content: '';
+}
+%with-align-justify-mask {
+  --icon-name: icon-align-justify;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-align-justify-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1.75 6a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM1.75 12a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75z"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-align-justify-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2.75 9a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM2.75 17a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75z"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/align-left/index.scss

@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/align-left/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-align-left {
+  50% {
+
+    background-color: var(--icon-color, var(--color-align-left-500, currentColor));
+    -webkit-mask-image: var(--icon-align-left-24);
+    mask-image: var(--icon-align-left-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-align-left-500, currentColor));
+    -webkit-mask-image: var(--icon-align-left-16);
+    mask-image: var(--icon-align-left-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/align-left/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-align-left-icon {
+  --icon-name: icon-align-left;
+  content: '';
+}
+%with-align-left-mask {
+  --icon-name: icon-align-left;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/align-left/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-align-left-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1.75 6a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM1.75 12a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5z"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/align-left/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-align-left-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2.75 9a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H2.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM2.75 17a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H2.75z"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/align-right/index.scss

@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/align-right/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-align-right {
+  50% {
+
+    background-color: var(--icon-color, var(--color-align-right-500, currentColor));
+    -webkit-mask-image: var(--icon-align-right-24);
+    mask-image: var(--icon-align-right-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-align-right-500, currentColor));
+    -webkit-mask-image: var(--icon-align-right-16);
+    mask-image: var(--icon-align-right-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/align-right/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-align-right-icon {
+  --icon-name: icon-align-right;
+  content: '';
+}
+%with-align-right-mask {
+  --icon-name: icon-align-right;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/align-right/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-align-right-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM4.75 6a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM4.75 12a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5z"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/align-right/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-align-right-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM6.75 9a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H6.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM6.75 17a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H6.75z"/></g></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/index.scss

@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/keyframes.scss

@@ -0,0 +1,9 @@
+@keyframes icon-amazon-eks-color {
+  50% {
+    background-image: var(--icon-amazon-eks-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-amazon-eks-color-16);
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/placeholders.scss

@@ -0,0 +1,10 @@
+
+%with-amazon-eks-color-icon {
+  --icon-name: icon-amazon-eks-color;
+  content: '';
+}
+%with-amazon-eks-color-mask {
+  --icon-name: icon-amazon-eks-color;
+  content: '';
+}
+  

ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/property-16.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-amazon-eks-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="url(%23amazon-eks-color-16__paint0_linear_879_141)" fill-rule="evenodd" d="M6.381 10.148h.897V8.121l1.837 2.027h1.164L7.997 7.642l2.169-2.195H8.963L7.278 7.146V5.447h-.897v4.701z" clip-rule="evenodd"/><path fill="url(%23amazon-eks-color-16__paint1_linear_879_141)" d="M8.532 3.803l3.186 1.81a.173.173 0 01.088.149v3.62c0 .06.033.118.088.149l2.842 1.615a.176.176 0 00.264-.15V3.947a.173.173 0 00-.088-.15L8.708.274a.176.176 0 00-.264.15v3.23c0 .062.034.119.088.15z"/><path fill="url(%23amazon-eks-color-16__paint2_linear_879_141)" d="M11.273 10.288l-3.185 1.81a.178.178 0 01-.176 0l-3.63-2.062a.173.173 0 01-.088-.15V5.762c0-.062.034-.119.088-.15l3.186-1.81a.172.172 0 00.088-.15V.424a.176.176 0 00-.264-.15L1.088 3.798a.173.173 0 00-.088.15V11.7c0 .061.033.118.088.15l6.824 3.876c.054.03.122.03.176 0l6.204-3.524a.172.172 0 000-.3l-2.843-1.615a.178.178 0 00-.176 0z"/><defs><linearGradient id="amazon-eks-color-16__paint0_linear_879_141" x1="10.691" x2="8.521" y1="9.879" y2="4.634" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-16__paint1_linear_879_141" x1="15.693" x2="9.546" y1="10.544" y2="-.213" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-16__paint2_linear_879_141" x1="9.433" x2="2.732" y1="14.904" y2="2.88" gradientUnits="userSpaceOnUse"><stop stop-color="%232775FF"/><stop offset="1" stop-color="%23188DFF"/></linearGradient></defs></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/property-24.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-amazon-eks-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="url(%23amazon-eks-color-24__paint0_linear_879_136)" d="M9.866 8.473h.924v2.725l2.661-2.725h1.22l-2.92 3.002 3.105 3.465h-1.183l-2.883-3.233v3.233h-.924V8.473z"/><path fill="url(%23amazon-eks-color-24__paint1_linear_879_136)" d="M12.76 5.907l4.551 2.627a.252.252 0 01.126.217v5.254c0 .09.048.172.125.217l4.061 2.344A.251.251 0 0022 16.35V6.117a.251.251 0 00-.125-.217L13.012.784a.251.251 0 00-.377.217V5.69c0 .09.048.172.126.217z"/><path fill="url(%23amazon-eks-color-24__paint2_linear_879_136)" d="M16.676 15.322l-4.55 2.626a.25.25 0 01-.252 0L6.69 14.955a.252.252 0 01-.126-.217V8.75c0-.09.048-.172.126-.217l4.55-2.627a.25.25 0 00.126-.217V1a.251.251 0 00-.377-.217L2.125 5.9A.251.251 0 002 6.117v11.255c0 .09.048.172.125.217l9.75 5.627a.25.25 0 00.25 0l8.863-5.115a.251.251 0 000-.435l-4.06-2.344a.25.25 0 00-.252 0z"/><defs><linearGradient id="amazon-eks-color-24__paint0_linear_879_136" x1="15.383" x2="12.246" y1="14.57" y2="7.514" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-24__paint1_linear_879_136" x1="22.99" x2="13.995" y1="15.694" y2=".202" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-24__paint2_linear_879_136" x1="14.046" x2="4.239" y1="22.021" y2="4.702" gradientUnits="userSpaceOnUse"><stop stop-color="%232775FF"/><stop offset="1" stop-color="%23188DFF"/></linearGradient></defs></svg>');
+}

ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/index.scss

@@ -0,0 +1,6 @@
+
+        @import '../amazon-eks-color/property-16';
+        @import '../amazon-eks-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      

ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/keyframes.scss

@@ -0,0 +1,15 @@
+@keyframes icon-amazon-eks {
+  50% {
+
+    background-color: var(--icon-color, var(--color-amazon-eks-500, currentColor));
+    -webkit-mask-image: var(--icon-amazon-eks-color-24);
+    mask-image: var(--icon-amazon-eks-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-amazon-eks-500, currentColor));
+    -webkit-mask-image: var(--icon-amazon-eks-color-16);
+    mask-image: var(--icon-amazon-eks-color-16);
+  }
+}