@getflip/swirl-components 0.149.1 → 0.151.0

package/dist/collection/components/swirl-icon/icons/swirl-icon-mark-chat-read.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconMarkChatRead {
   constructor() {
+    this.color = undefined;
     this.size = 24;
   }
   render() {
     const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const styles = {
+      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+    };
     const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M11.5666 11.45L13.9333 9.08331C14.0666 8.94998 14.2222 8.88609 14.4 8.89165C14.5778 8.8972 14.7333 8.96665 14.8666 9.09998C14.9889 9.23331 15.0528 9.38887 15.0583 9.56665C15.0639 9.74442 15 9.89998 14.8666 10.0333L12.0333 12.8666C11.9 13 11.7444 13.0666 11.5666 13.0666C11.3889 13.0666 11.2333 13 11.1 12.8666L9.68331 11.4333C9.56109 11.3111 9.4972 11.1583 9.49165 10.975C9.48609 10.7916 9.54998 10.6333 9.68331 10.5C9.80554 10.3778 9.96109 10.3166 10.15 10.3166C10.3389 10.3166 10.4944 10.3778 10.6166 10.5L11.5666 11.45ZM3.99998 12L2.46665 13.5333C2.25554 13.7444 2.01387 13.7916 1.74165 13.675C1.46942 13.5583 1.33331 13.35 1.33331 13.05V2.66665C1.33331 2.29998 1.46387 1.98609 1.72498 1.72498C1.98609 1.46387 2.29998 1.33331 2.66665 1.33331H13.3333C13.7 1.33331 14.0139 1.46387 14.275 1.72498C14.5361 1.98609 14.6666 2.29998 14.6666 2.66665V6.66665C14.6666 6.85553 14.6028 7.01387 14.475 7.14165C14.3472 7.26942 14.1889 7.33331 14 7.33331C13.8111 7.33331 13.6528 7.26942 13.525 7.14165C13.3972 7.01387 13.3333 6.85553 13.3333 6.66665V2.66665H2.66665V11.4166L3.43331 10.6666H7.33331C7.5222 10.6666 7.68054 10.7305 7.80831 10.8583C7.93609 10.9861 7.99998 11.1444 7.99998 11.3333C7.99998 11.5222 7.93609 11.6805 7.80831 11.8083C7.68054 11.9361 7.5222 12 7.33331 12H3.99998Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M17.35 18.175L20.9 14.625C21.1 14.425 21.3333 14.3292 21.6 14.3375C21.8667 14.3458 22.1 14.45 22.3 14.65C22.4833 14.85 22.5792 15.0833 22.5875 15.35C22.5958 15.6167 22.5 15.85 22.3 16.05L18.05 20.3C17.85 20.5 17.6167 20.6 17.35 20.6C17.0833 20.6 16.85 20.5 16.65 20.3L14.525 18.15C14.3417 17.9667 14.2458 17.7375 14.2375 17.4625C14.2292 17.1875 14.325 16.95 14.525 16.75C14.7083 16.5667 14.9417 16.475 15.225 16.475C15.5083 16.475 15.7417 16.5667 15.925 16.75L17.35 18.175ZM6 19L3.7 21.3C3.38333 21.6167 3.02083 21.6875 2.6125 21.5125C2.20417 21.3375 2 21.025 2 20.575V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V11C22 11.2833 21.9042 11.5208 21.7125 11.7125C21.5208 11.9042 21.2833 12 21 12C20.7167 12 20.4792 11.9042 20.2875 11.7125C20.0958 11.5208 20 11.2833 20 11V5H4V18.125L5.15 17H11C11.2833 17 11.5208 17.0958 11.7125 17.2875C11.9042 17.4792 12 17.7167 12 18C12 18.2833 11.9042 18.5208 11.7125 18.7125C11.5208 18.9042 11.2833 19 11 19H6Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M20.2416 20.0375L24.3833 15.8958C24.6166 15.6625 24.8889 15.5507 25.2 15.5604C25.5111 15.5701 25.7833 15.6916 26.0166 15.925C26.2305 16.1583 26.3423 16.4305 26.3521 16.7416C26.3618 17.0528 26.25 17.325 26.0166 17.5583L21.0583 22.5166C20.825 22.75 20.5528 22.8666 20.2416 22.8666C19.9305 22.8666 19.6583 22.75 19.425 22.5166L16.9458 20.0083C16.7319 19.7944 16.6201 19.5271 16.6104 19.2062C16.6007 18.8854 16.7125 18.6083 16.9458 18.375C17.1597 18.1611 17.4319 18.0541 17.7625 18.0541C18.093 18.0541 18.3653 18.1611 18.5791 18.375L20.2416 20.0375ZM6.99998 21L4.31665 23.6833C3.9472 24.0528 3.52429 24.1354 3.0479 23.9312C2.57151 23.7271 2.33331 23.3625 2.33331 22.8375V4.66665C2.33331 4.02498 2.56179 3.47567 3.01873 3.01873C3.47567 2.56179 4.02498 2.33331 4.66665 2.33331H23.3333C23.975 2.33331 24.5243 2.56179 24.9812 3.01873C25.4382 3.47567 25.6666 4.02498 25.6666 4.66665V11.6666C25.6666 11.9972 25.5548 12.2743 25.3312 12.4979C25.1076 12.7215 24.8305 12.8333 24.5 12.8333C24.1694 12.8333 23.8923 12.7215 23.6687 12.4979C23.4451 12.2743 23.3333 11.9972 23.3333 11.6666V4.66665H4.66665V19.9791L6.00831 18.6666H12.8333C13.1639 18.6666 13.441 18.7785 13.6646 19.0021C13.8882 19.2257 14 19.5028 14 19.8333C14 20.1639 13.8882 20.441 13.6646 20.6646C13.441 20.8882 13.1639 21 12.8333 21H6.99998Z", fill: "currentColor" })))));
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M11.5666 11.45L13.9333 9.08331C14.0666 8.94998 14.2222 8.88609 14.4 8.89165C14.5778 8.8972 14.7333 8.96665 14.8666 9.09998C14.9889 9.23331 15.0528 9.38887 15.0583 9.56665C15.0639 9.74442 15 9.89998 14.8666 10.0333L12.0333 12.8666C11.9 13 11.7444 13.0666 11.5666 13.0666C11.3889 13.0666 11.2333 13 11.1 12.8666L9.68331 11.4333C9.56109 11.3111 9.4972 11.1583 9.49165 10.975C9.48609 10.7916 9.54998 10.6333 9.68331 10.5C9.80554 10.3778 9.96109 10.3166 10.15 10.3166C10.3389 10.3166 10.4944 10.3778 10.6166 10.5L11.5666 11.45ZM3.99998 12L2.46665 13.5333C2.25554 13.7444 2.01387 13.7916 1.74165 13.675C1.46942 13.5583 1.33331 13.35 1.33331 13.05V2.66665C1.33331 2.29998 1.46387 1.98609 1.72498 1.72498C1.98609 1.46387 2.29998 1.33331 2.66665 1.33331H13.3333C13.7 1.33331 14.0139 1.46387 14.275 1.72498C14.5361 1.98609 14.6666 2.29998 14.6666 2.66665V6.66665C14.6666 6.85553 14.6028 7.01387 14.475 7.14165C14.3472 7.26942 14.1889 7.33331 14 7.33331C13.8111 7.33331 13.6528 7.26942 13.525 7.14165C13.3972 7.01387 13.3333 6.85553 13.3333 6.66665V2.66665H2.66665V11.4166L3.43331 10.6666H7.33331C7.5222 10.6666 7.68054 10.7305 7.80831 10.8583C7.93609 10.9861 7.99998 11.1444 7.99998 11.3333C7.99998 11.5222 7.93609 11.6805 7.80831 11.8083C7.68054 11.9361 7.5222 12 7.33331 12H3.99998Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M17.35 18.175L20.9 14.625C21.1 14.425 21.3333 14.3292 21.6 14.3375C21.8667 14.3458 22.1 14.45 22.3 14.65C22.4833 14.85 22.5792 15.0833 22.5875 15.35C22.5958 15.6167 22.5 15.85 22.3 16.05L18.05 20.3C17.85 20.5 17.6167 20.6 17.35 20.6C17.0833 20.6 16.85 20.5 16.65 20.3L14.525 18.15C14.3417 17.9667 14.2458 17.7375 14.2375 17.4625C14.2292 17.1875 14.325 16.95 14.525 16.75C14.7083 16.5667 14.9417 16.475 15.225 16.475C15.5083 16.475 15.7417 16.5667 15.925 16.75L17.35 18.175ZM6 19L3.7 21.3C3.38333 21.6167 3.02083 21.6875 2.6125 21.5125C2.20417 21.3375 2 21.025 2 20.575V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V11C22 11.2833 21.9042 11.5208 21.7125 11.7125C21.5208 11.9042 21.2833 12 21 12C20.7167 12 20.4792 11.9042 20.2875 11.7125C20.0958 11.5208 20 11.2833 20 11V5H4V18.125L5.15 17H11C11.2833 17 11.5208 17.0958 11.7125 17.2875C11.9042 17.4792 12 17.7167 12 18C12 18.2833 11.9042 18.5208 11.7125 18.7125C11.5208 18.9042 11.2833 19 11 19H6Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M20.2416 20.0375L24.3833 15.8958C24.6166 15.6625 24.8889 15.5507 25.2 15.5604C25.5111 15.5701 25.7833 15.6916 26.0166 15.925C26.2305 16.1583 26.3423 16.4305 26.3521 16.7416C26.3618 17.0528 26.25 17.325 26.0166 17.5583L21.0583 22.5166C20.825 22.75 20.5528 22.8666 20.2416 22.8666C19.9305 22.8666 19.6583 22.75 19.425 22.5166L16.9458 20.0083C16.7319 19.7944 16.6201 19.5271 16.6104 19.2062C16.6007 18.8854 16.7125 18.6083 16.9458 18.375C17.1597 18.1611 17.4319 18.0541 17.7625 18.0541C18.093 18.0541 18.3653 18.1611 18.5791 18.375L20.2416 20.0375ZM6.99998 21L4.31665 23.6833C3.9472 24.0528 3.52429 24.1354 3.0479 23.9312C2.57151 23.7271 2.33331 23.3625 2.33331 22.8375V4.66665C2.33331 4.02498 2.56179 3.47567 3.01873 3.01873C3.47567 2.56179 4.02498 2.33331 4.66665 2.33331H23.3333C23.975 2.33331 24.5243 2.56179 24.9812 3.01873C25.4382 3.47567 25.6666 4.02498 25.6666 4.66665V11.6666C25.6666 11.9972 25.5548 12.2743 25.3312 12.4979C25.1076 12.7215 24.8305 12.8333 24.5 12.8333C24.1694 12.8333 23.8923 12.7215 23.6687 12.4979C23.4451 12.2743 23.3333 11.9972 23.3333 11.6666V4.66665H4.66665V19.9791L6.00831 18.6666H12.8333C13.1639 18.6666 13.441 18.7785 13.6646 19.0021C13.8882 19.2257 14 19.5028 14 19.8333C14 20.1639 13.8882 20.441 13.6646 20.6646C13.441 20.8882 13.1639 21 12.8333 21H6.99998Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-mark-chat-read"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconMarkChatRead {
   }
   static get properties() {
     return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconColor",
+          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "references": {
+            "SwirlIconColor": {
+              "location": "import",
+              "path": "../swirl-icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
       "size": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/swirl-icon/icons/swirl-icon-mark-chat-unread.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconMarkChatUnread {
   constructor() {
+    this.color = undefined;
     this.size = 24;
   }
   render() {
     const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const styles = {
+      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+    };
     const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M3.99998 12L2.46665 13.5333C2.25554 13.7444 2.01387 13.7917 1.74165 13.675C1.46942 13.5583 1.33331 13.35 1.33331 13.05V2.66667C1.33331 2.3 1.46387 1.98611 1.72498 1.725C1.98609 1.46389 2.29998 1.33333 2.66665 1.33333H9.39998C9.35553 1.55556 9.33331 1.77778 9.33331 2C9.33331 2.22222 9.35553 2.44444 9.39998 2.66667H2.66665V10.6667H13.3333V5.26667C13.5889 5.21111 13.8278 5.13611 14.05 5.04167C14.2722 4.94722 14.4778 4.82222 14.6666 4.66667V10.6667C14.6666 11.0333 14.5361 11.3472 14.275 11.6083C14.0139 11.8694 13.7 12 13.3333 12H3.99998ZM12.6666 4C12.1111 4 11.6389 3.80556 11.25 3.41667C10.8611 3.02778 10.6666 2.55556 10.6666 2C10.6666 1.44444 10.8611 0.972222 11.25 0.583333C11.6389 0.194444 12.1111 0 12.6666 0C13.2222 0 13.6944 0.194444 14.0833 0.583333C14.4722 0.972222 14.6666 1.44444 14.6666 2C14.6666 2.55556 14.4722 3.02778 14.0833 3.41667C13.6944 3.80556 13.2222 4 12.6666 4Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M6 18L3.7 20.3C3.38333 20.6167 3.02083 20.6875 2.6125 20.5125C2.20417 20.3375 2 20.025 2 19.575V4C2 3.45 2.19583 2.97917 2.5875 2.5875C2.97917 2.19583 3.45 2 4 2H14.1C14.0333 2.33333 14 2.66667 14 3C14 3.33333 14.0333 3.66667 14.1 4H4V16H20V7.9C20.3833 7.81667 20.7417 7.70417 21.075 7.5625C21.4083 7.42083 21.7167 7.23333 22 7V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H6ZM19 6C18.1667 6 17.4583 5.70833 16.875 5.125C16.2917 4.54167 16 3.83333 16 3C16 2.16667 16.2917 1.45833 16.875 0.875C17.4583 0.291667 18.1667 0 19 0C19.8333 0 20.5417 0.291667 21.125 0.875C21.7083 1.45833 22 2.16667 22 3C22 3.83333 21.7083 4.54167 21.125 5.125C20.5417 5.70833 19.8333 6 19 6Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M7.00001 21L4.31668 23.6833C3.94723 24.0528 3.52432 24.1354 3.04793 23.9313C2.57154 23.7271 2.33334 23.3625 2.33334 22.8375V4.66667C2.33334 4.025 2.56182 3.47569 3.01876 3.01875C3.4757 2.56181 4.02501 2.33333 4.66668 2.33333H16.45C16.3722 2.72222 16.3333 3.11111 16.3333 3.5C16.3333 3.88889 16.3722 4.27778 16.45 4.66667H4.66668V18.6667H23.3333V9.21667C23.7806 9.11944 24.1986 8.98819 24.5875 8.82292C24.9764 8.65764 25.3361 8.43889 25.6667 8.16667V18.6667C25.6667 19.3083 25.4382 19.8576 24.9813 20.3146C24.5243 20.7715 23.975 21 23.3333 21H7.00001ZM22.1667 7C21.1945 7 20.3681 6.65972 19.6875 5.97917C19.007 5.29861 18.6667 4.47222 18.6667 3.5C18.6667 2.52778 19.007 1.70139 19.6875 1.02083C20.3681 0.340278 21.1945 0 22.1667 0C23.1389 0 23.9653 0.340278 24.6458 1.02083C25.3264 1.70139 25.6667 2.52778 25.6667 3.5C25.6667 4.47222 25.3264 5.29861 24.6458 5.97917C23.9653 6.65972 23.1389 7 22.1667 7Z", fill: "currentColor" })))));
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M3.99998 12L2.46665 13.5333C2.25554 13.7444 2.01387 13.7917 1.74165 13.675C1.46942 13.5583 1.33331 13.35 1.33331 13.05V2.66667C1.33331 2.3 1.46387 1.98611 1.72498 1.725C1.98609 1.46389 2.29998 1.33333 2.66665 1.33333H9.39998C9.35553 1.55556 9.33331 1.77778 9.33331 2C9.33331 2.22222 9.35553 2.44444 9.39998 2.66667H2.66665V10.6667H13.3333V5.26667C13.5889 5.21111 13.8278 5.13611 14.05 5.04167C14.2722 4.94722 14.4778 4.82222 14.6666 4.66667V10.6667C14.6666 11.0333 14.5361 11.3472 14.275 11.6083C14.0139 11.8694 13.7 12 13.3333 12H3.99998ZM12.6666 4C12.1111 4 11.6389 3.80556 11.25 3.41667C10.8611 3.02778 10.6666 2.55556 10.6666 2C10.6666 1.44444 10.8611 0.972222 11.25 0.583333C11.6389 0.194444 12.1111 0 12.6666 0C13.2222 0 13.6944 0.194444 14.0833 0.583333C14.4722 0.972222 14.6666 1.44444 14.6666 2C14.6666 2.55556 14.4722 3.02778 14.0833 3.41667C13.6944 3.80556 13.2222 4 12.6666 4Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M6 18L3.7 20.3C3.38333 20.6167 3.02083 20.6875 2.6125 20.5125C2.20417 20.3375 2 20.025 2 19.575V4C2 3.45 2.19583 2.97917 2.5875 2.5875C2.97917 2.19583 3.45 2 4 2H14.1C14.0333 2.33333 14 2.66667 14 3C14 3.33333 14.0333 3.66667 14.1 4H4V16H20V7.9C20.3833 7.81667 20.7417 7.70417 21.075 7.5625C21.4083 7.42083 21.7167 7.23333 22 7V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H6ZM19 6C18.1667 6 17.4583 5.70833 16.875 5.125C16.2917 4.54167 16 3.83333 16 3C16 2.16667 16.2917 1.45833 16.875 0.875C17.4583 0.291667 18.1667 0 19 0C19.8333 0 20.5417 0.291667 21.125 0.875C21.7083 1.45833 22 2.16667 22 3C22 3.83333 21.7083 4.54167 21.125 5.125C20.5417 5.70833 19.8333 6 19 6Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M7.00001 21L4.31668 23.6833C3.94723 24.0528 3.52432 24.1354 3.04793 23.9313C2.57154 23.7271 2.33334 23.3625 2.33334 22.8375V4.66667C2.33334 4.025 2.56182 3.47569 3.01876 3.01875C3.4757 2.56181 4.02501 2.33333 4.66668 2.33333H16.45C16.3722 2.72222 16.3333 3.11111 16.3333 3.5C16.3333 3.88889 16.3722 4.27778 16.45 4.66667H4.66668V18.6667H23.3333V9.21667C23.7806 9.11944 24.1986 8.98819 24.5875 8.82292C24.9764 8.65764 25.3361 8.43889 25.6667 8.16667V18.6667C25.6667 19.3083 25.4382 19.8576 24.9813 20.3146C24.5243 20.7715 23.975 21 23.3333 21H7.00001ZM22.1667 7C21.1945 7 20.3681 6.65972 19.6875 5.97917C19.007 5.29861 18.6667 4.47222 18.6667 3.5C18.6667 2.52778 19.007 1.70139 19.6875 1.02083C20.3681 0.340278 21.1945 0 22.1667 0C23.1389 0 23.9653 0.340278 24.6458 1.02083C25.3264 1.70139 25.6667 2.52778 25.6667 3.5C25.6667 4.47222 25.3264 5.29861 24.6458 5.97917C23.9653 6.65972 23.1389 7 22.1667 7Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-mark-chat-unread"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconMarkChatUnread {
   }
   static get properties() {
     return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconColor",
+          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "references": {
+            "SwirlIconColor": {
+              "location": "import",
+              "path": "../swirl-icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
       "size": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/swirl-icon/icons/swirl-icon-mention.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconMention {
   constructor() {
+    this.color = undefined;
     this.size = 24;
   }
   render() {
     const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const styles = {
+      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+    };
     const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M8.00001 14.7833C7.06668 14.7833 6.1889 14.6056 5.36668 14.25C4.54445 13.8945 3.8249 13.4085 3.20801 12.792C2.59156 12.1751 2.10556 11.4556 1.75001 10.6333C1.39445 9.81112 1.21667 8.93334 1.21667 8.00001C1.21667 7.06668 1.39445 6.1889 1.75001 5.36668C2.10556 4.54445 2.59156 3.8249 3.20801 3.20801C3.8249 2.59156 4.54445 2.10556 5.36668 1.75001C6.1889 1.39445 7.06668 1.21667 8.00001 1.21667C8.93334 1.21667 9.81112 1.39445 10.6333 1.75001C11.4556 2.10556 12.1751 2.59156 12.792 3.20801C13.4085 3.8249 13.8945 4.54445 14.25 5.36668C14.6056 6.1889 14.7833 7.06668 14.7833 8.00001V8.96668C14.7833 9.65556 14.5529 10.2333 14.092 10.7C13.6307 11.1667 13.0556 11.4 12.3667 11.4C11.9556 11.4 11.5749 11.3085 11.2247 11.1253C10.8749 10.9418 10.5889 10.7 10.3667 10.4C10.0778 10.7111 9.73068 10.9556 9.32534 11.1333C8.91956 11.3111 8.47779 11.4 8.00001 11.4C7.06668 11.4 6.26667 11.0696 5.60001 10.4087C4.93334 9.74734 4.60001 8.94445 4.60001 8.00001C4.60001 7.06668 4.93334 6.26667 5.60001 5.60001C6.26667 4.93334 7.06668 4.60001 8.00001 4.60001C8.94445 4.60001 9.74734 4.93045 10.4087 5.59134C11.0696 6.25268 11.4 7.05556 11.4 8.00001V8.93334C11.4 9.24445 11.4945 9.4889 11.6833 9.66668C11.8722 9.84445 12.1 9.93334 12.3667 9.93334C12.6222 9.93334 12.8471 9.84445 13.0413 9.66668C13.236 9.4889 13.3333 9.24445 13.3333 8.93334V8.00001C13.3333 6.54445 12.8082 5.29156 11.758 4.24134C10.7082 3.19156 9.45556 2.66667 8.00001 2.66667C6.54445 2.66667 5.29156 3.19156 4.24134 4.24134C3.19156 5.29156 2.66667 6.54445 2.66667 8.00001C2.66667 9.45556 3.19156 10.7082 4.24134 11.758C5.29156 12.8082 6.54445 13.3333 8.00001 13.3333H10.6C10.8111 13.3333 10.9862 13.4027 11.1253 13.5413C11.264 13.6805 11.3333 13.8556 11.3333 14.0667C11.3333 14.2667 11.264 14.4362 11.1253 14.5753C10.9862 14.714 10.8111 14.7833 10.6 14.7833H8.00001ZM8.00001 9.93334C8.53334 9.93334 8.9889 9.74445 9.36668 9.36668C9.74445 8.9889 9.93334 8.53334 9.93334 8.00001C9.93334 7.46668 9.74445 7.01112 9.36668 6.63334C8.9889 6.25556 8.53334 6.06668 8.00001 6.06668C7.46668 6.06668 7.01112 6.25556 6.63334 6.63334C6.25556 7.01112 6.06668 7.46668 6.06668 8.00001C6.06668 8.53334 6.25556 8.9889 6.63334 9.36668C7.01112 9.74445 7.46668 9.93334 8.00001 9.93334Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 22.175C10.6 22.175 9.28335 21.9083 8.05001 21.375C6.81668 20.8417 5.73735 20.1127 4.81201 19.188C3.88735 18.2627 3.15835 17.1833 2.62501 15.95C2.09168 14.7167 1.82501 13.4 1.82501 12C1.82501 10.6 2.09168 9.28335 2.62501 8.05001C3.15835 6.81668 3.88735 5.73735 4.81201 4.81201C5.73735 3.88735 6.81668 3.15835 8.05001 2.62501C9.28335 2.09168 10.6 1.82501 12 1.82501C13.4 1.82501 14.7167 2.09168 15.95 2.62501C17.1833 3.15835 18.2627 3.88735 19.188 4.81201C20.1127 5.73735 20.8417 6.81668 21.375 8.05001C21.9083 9.28335 22.175 10.6 22.175 12V13.45C22.175 14.4833 21.8293 15.35 21.138 16.05C20.446 16.75 19.5833 17.1 18.55 17.1C17.9333 17.1 17.3623 16.9627 16.837 16.688C16.3123 16.4127 15.8833 16.05 15.55 15.6C15.1167 16.0667 14.596 16.4333 13.988 16.7C13.3793 16.9667 12.7167 17.1 12 17.1C10.6 17.1 9.40001 16.6043 8.40001 15.613C7.40001 14.621 6.90001 13.4167 6.90001 12C6.90001 10.6 7.40001 9.40001 8.40001 8.40001C9.40001 7.40001 10.6 6.90001 12 6.90001C13.4167 6.90001 14.621 7.39568 15.613 8.38701C16.6043 9.37901 17.1 10.5833 17.1 12V13.4C17.1 13.8667 17.2417 14.2333 17.525 14.5C17.8083 14.7667 18.15 14.9 18.55 14.9C18.9333 14.9 19.2707 14.7667 19.562 14.5C19.854 14.2333 20 13.8667 20 13.4V12C20 9.81668 19.2123 7.93735 17.637 6.36201C16.0623 4.78735 14.1833 4.00001 12 4.00001C9.81668 4.00001 7.93735 4.78735 6.36201 6.36201C4.78735 7.93735 4.00001 9.81668 4.00001 12C4.00001 14.1833 4.78735 16.0623 6.36201 17.637C7.93735 19.2123 9.81668 20 12 20H15.9C16.2167 20 16.4793 20.104 16.688 20.312C16.896 20.5207 17 20.7833 17 21.1C17 21.4 16.896 21.6543 16.688 21.863C16.4793 22.071 16.2167 22.175 15.9 22.175H12ZM12 14.9C12.8 14.9 13.4833 14.6167 14.05 14.05C14.6167 13.4833 14.9 12.8 14.9 12C14.9 11.2 14.6167 10.5167 14.05 9.95001C13.4833 9.38335 12.8 9.10001 12 9.10001C11.2 9.10001 10.5167 9.38335 9.95001 9.95001C9.38335 10.5167 9.10001 11.2 9.10001 12C9.10001 12.8 9.38335 13.4833 9.95001 14.05C10.5167 14.6167 11.2 14.9 12 14.9Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 25.8708C12.3667 25.8708 10.8306 25.5597 9.39168 24.9375C7.95279 24.3153 6.69357 23.4648 5.61401 22.386C4.53524 21.3064 3.68474 20.0472 3.06251 18.6083C2.44029 17.1694 2.12918 15.6333 2.12918 14C2.12918 12.3667 2.44029 10.8305 3.06251 9.39165C3.68474 7.95276 4.53524 6.69354 5.61401 5.61398C6.69357 4.53521 7.95279 3.68471 9.39168 3.06248C10.8306 2.44026 12.3667 2.12915 14 2.12915C15.6333 2.12915 17.1695 2.44026 18.6083 3.06248C20.0472 3.68471 21.3065 4.53521 22.386 5.61398C23.4648 6.69354 24.3153 7.95276 24.9375 9.39165C25.5597 10.8305 25.8708 12.3667 25.8708 14V15.6916C25.8708 16.8972 25.4676 17.9083 24.661 18.725C23.8537 19.5416 22.8472 19.95 21.6417 19.95C20.9222 19.95 20.2561 19.7898 19.6432 19.4693C19.0311 19.1481 18.5306 18.725 18.1417 18.2C17.6361 18.7444 17.0287 19.1722 16.3193 19.4833C15.6092 19.7944 14.8361 19.95 14 19.95C12.3667 19.95 10.9667 19.3717 9.80001 18.2151C8.63335 17.0578 8.05001 15.6528 8.05001 14C8.05001 12.3667 8.63335 10.9666 9.80001 9.79998C10.9667 8.63332 12.3667 8.04998 14 8.04998C15.6528 8.04998 17.0578 8.62826 18.2152 9.78482C19.3717 10.9422 19.95 12.3472 19.95 14V15.6333C19.95 16.1778 20.1153 16.6055 20.4458 16.9167C20.7764 17.2278 21.175 17.3833 21.6417 17.3833C22.0889 17.3833 22.4825 17.2278 22.8223 16.9167C23.163 16.6055 23.3333 16.1778 23.3333 15.6333V14C23.3333 11.4528 22.4144 9.26021 20.5765 7.42232C18.7394 5.58521 16.5472 4.66665 14 4.66665C11.4528 4.66665 9.26024 5.58521 7.42235 7.42232C5.58524 9.26021 4.66668 11.4528 4.66668 14C4.66668 16.5472 5.58524 18.7394 7.42235 20.5765C9.26024 22.4144 11.4528 23.3333 14 23.3333H18.55C18.9195 23.3333 19.2259 23.4546 19.4693 23.6973C19.712 23.9408 19.8333 24.2472 19.8333 24.6166C19.8333 24.9666 19.712 25.2634 19.4693 25.5068C19.2259 25.7495 18.9195 25.8708 18.55 25.8708H14ZM14 17.3833C14.9333 17.3833 15.7306 17.0528 16.3917 16.3917C17.0528 15.7305 17.3833 14.9333 17.3833 14C17.3833 13.0667 17.0528 12.2694 16.3917 11.6083C15.7306 10.9472 14.9333 10.6167 14 10.6167C13.0667 10.6167 12.2695 10.9472 11.6083 11.6083C10.9472 12.2694 10.6167 13.0667 10.6167 14C10.6167 14.9333 10.9472 15.7305 11.6083 16.3917C12.2695 17.0528 13.0667 17.3833 14 17.3833Z", fill: "currentColor" })))));
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M8.00001 14.7833C7.06668 14.7833 6.1889 14.6056 5.36668 14.25C4.54445 13.8945 3.8249 13.4085 3.20801 12.792C2.59156 12.1751 2.10556 11.4556 1.75001 10.6333C1.39445 9.81112 1.21667 8.93334 1.21667 8.00001C1.21667 7.06668 1.39445 6.1889 1.75001 5.36668C2.10556 4.54445 2.59156 3.8249 3.20801 3.20801C3.8249 2.59156 4.54445 2.10556 5.36668 1.75001C6.1889 1.39445 7.06668 1.21667 8.00001 1.21667C8.93334 1.21667 9.81112 1.39445 10.6333 1.75001C11.4556 2.10556 12.1751 2.59156 12.792 3.20801C13.4085 3.8249 13.8945 4.54445 14.25 5.36668C14.6056 6.1889 14.7833 7.06668 14.7833 8.00001V8.96668C14.7833 9.65556 14.5529 10.2333 14.092 10.7C13.6307 11.1667 13.0556 11.4 12.3667 11.4C11.9556 11.4 11.5749 11.3085 11.2247 11.1253C10.8749 10.9418 10.5889 10.7 10.3667 10.4C10.0778 10.7111 9.73068 10.9556 9.32534 11.1333C8.91956 11.3111 8.47779 11.4 8.00001 11.4C7.06668 11.4 6.26667 11.0696 5.60001 10.4087C4.93334 9.74734 4.60001 8.94445 4.60001 8.00001C4.60001 7.06668 4.93334 6.26667 5.60001 5.60001C6.26667 4.93334 7.06668 4.60001 8.00001 4.60001C8.94445 4.60001 9.74734 4.93045 10.4087 5.59134C11.0696 6.25268 11.4 7.05556 11.4 8.00001V8.93334C11.4 9.24445 11.4945 9.4889 11.6833 9.66668C11.8722 9.84445 12.1 9.93334 12.3667 9.93334C12.6222 9.93334 12.8471 9.84445 13.0413 9.66668C13.236 9.4889 13.3333 9.24445 13.3333 8.93334V8.00001C13.3333 6.54445 12.8082 5.29156 11.758 4.24134C10.7082 3.19156 9.45556 2.66667 8.00001 2.66667C6.54445 2.66667 5.29156 3.19156 4.24134 4.24134C3.19156 5.29156 2.66667 6.54445 2.66667 8.00001C2.66667 9.45556 3.19156 10.7082 4.24134 11.758C5.29156 12.8082 6.54445 13.3333 8.00001 13.3333H10.6C10.8111 13.3333 10.9862 13.4027 11.1253 13.5413C11.264 13.6805 11.3333 13.8556 11.3333 14.0667C11.3333 14.2667 11.264 14.4362 11.1253 14.5753C10.9862 14.714 10.8111 14.7833 10.6 14.7833H8.00001ZM8.00001 9.93334C8.53334 9.93334 8.9889 9.74445 9.36668 9.36668C9.74445 8.9889 9.93334 8.53334 9.93334 8.00001C9.93334 7.46668 9.74445 7.01112 9.36668 6.63334C8.9889 6.25556 8.53334 6.06668 8.00001 6.06668C7.46668 6.06668 7.01112 6.25556 6.63334 6.63334C6.25556 7.01112 6.06668 7.46668 6.06668 8.00001C6.06668 8.53334 6.25556 8.9889 6.63334 9.36668C7.01112 9.74445 7.46668 9.93334 8.00001 9.93334Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 22.175C10.6 22.175 9.28335 21.9083 8.05001 21.375C6.81668 20.8417 5.73735 20.1127 4.81201 19.188C3.88735 18.2627 3.15835 17.1833 2.62501 15.95C2.09168 14.7167 1.82501 13.4 1.82501 12C1.82501 10.6 2.09168 9.28335 2.62501 8.05001C3.15835 6.81668 3.88735 5.73735 4.81201 4.81201C5.73735 3.88735 6.81668 3.15835 8.05001 2.62501C9.28335 2.09168 10.6 1.82501 12 1.82501C13.4 1.82501 14.7167 2.09168 15.95 2.62501C17.1833 3.15835 18.2627 3.88735 19.188 4.81201C20.1127 5.73735 20.8417 6.81668 21.375 8.05001C21.9083 9.28335 22.175 10.6 22.175 12V13.45C22.175 14.4833 21.8293 15.35 21.138 16.05C20.446 16.75 19.5833 17.1 18.55 17.1C17.9333 17.1 17.3623 16.9627 16.837 16.688C16.3123 16.4127 15.8833 16.05 15.55 15.6C15.1167 16.0667 14.596 16.4333 13.988 16.7C13.3793 16.9667 12.7167 17.1 12 17.1C10.6 17.1 9.40001 16.6043 8.40001 15.613C7.40001 14.621 6.90001 13.4167 6.90001 12C6.90001 10.6 7.40001 9.40001 8.40001 8.40001C9.40001 7.40001 10.6 6.90001 12 6.90001C13.4167 6.90001 14.621 7.39568 15.613 8.38701C16.6043 9.37901 17.1 10.5833 17.1 12V13.4C17.1 13.8667 17.2417 14.2333 17.525 14.5C17.8083 14.7667 18.15 14.9 18.55 14.9C18.9333 14.9 19.2707 14.7667 19.562 14.5C19.854 14.2333 20 13.8667 20 13.4V12C20 9.81668 19.2123 7.93735 17.637 6.36201C16.0623 4.78735 14.1833 4.00001 12 4.00001C9.81668 4.00001 7.93735 4.78735 6.36201 6.36201C4.78735 7.93735 4.00001 9.81668 4.00001 12C4.00001 14.1833 4.78735 16.0623 6.36201 17.637C7.93735 19.2123 9.81668 20 12 20H15.9C16.2167 20 16.4793 20.104 16.688 20.312C16.896 20.5207 17 20.7833 17 21.1C17 21.4 16.896 21.6543 16.688 21.863C16.4793 22.071 16.2167 22.175 15.9 22.175H12ZM12 14.9C12.8 14.9 13.4833 14.6167 14.05 14.05C14.6167 13.4833 14.9 12.8 14.9 12C14.9 11.2 14.6167 10.5167 14.05 9.95001C13.4833 9.38335 12.8 9.10001 12 9.10001C11.2 9.10001 10.5167 9.38335 9.95001 9.95001C9.38335 10.5167 9.10001 11.2 9.10001 12C9.10001 12.8 9.38335 13.4833 9.95001 14.05C10.5167 14.6167 11.2 14.9 12 14.9Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 25.8708C12.3667 25.8708 10.8306 25.5597 9.39168 24.9375C7.95279 24.3153 6.69357 23.4648 5.61401 22.386C4.53524 21.3064 3.68474 20.0472 3.06251 18.6083C2.44029 17.1694 2.12918 15.6333 2.12918 14C2.12918 12.3667 2.44029 10.8305 3.06251 9.39165C3.68474 7.95276 4.53524 6.69354 5.61401 5.61398C6.69357 4.53521 7.95279 3.68471 9.39168 3.06248C10.8306 2.44026 12.3667 2.12915 14 2.12915C15.6333 2.12915 17.1695 2.44026 18.6083 3.06248C20.0472 3.68471 21.3065 4.53521 22.386 5.61398C23.4648 6.69354 24.3153 7.95276 24.9375 9.39165C25.5597 10.8305 25.8708 12.3667 25.8708 14V15.6916C25.8708 16.8972 25.4676 17.9083 24.661 18.725C23.8537 19.5416 22.8472 19.95 21.6417 19.95C20.9222 19.95 20.2561 19.7898 19.6432 19.4693C19.0311 19.1481 18.5306 18.725 18.1417 18.2C17.6361 18.7444 17.0287 19.1722 16.3193 19.4833C15.6092 19.7944 14.8361 19.95 14 19.95C12.3667 19.95 10.9667 19.3717 9.80001 18.2151C8.63335 17.0578 8.05001 15.6528 8.05001 14C8.05001 12.3667 8.63335 10.9666 9.80001 9.79998C10.9667 8.63332 12.3667 8.04998 14 8.04998C15.6528 8.04998 17.0578 8.62826 18.2152 9.78482C19.3717 10.9422 19.95 12.3472 19.95 14V15.6333C19.95 16.1778 20.1153 16.6055 20.4458 16.9167C20.7764 17.2278 21.175 17.3833 21.6417 17.3833C22.0889 17.3833 22.4825 17.2278 22.8223 16.9167C23.163 16.6055 23.3333 16.1778 23.3333 15.6333V14C23.3333 11.4528 22.4144 9.26021 20.5765 7.42232C18.7394 5.58521 16.5472 4.66665 14 4.66665C11.4528 4.66665 9.26024 5.58521 7.42235 7.42232C5.58524 9.26021 4.66668 11.4528 4.66668 14C4.66668 16.5472 5.58524 18.7394 7.42235 20.5765C9.26024 22.4144 11.4528 23.3333 14 23.3333H18.55C18.9195 23.3333 19.2259 23.4546 19.4693 23.6973C19.712 23.9408 19.8333 24.2472 19.8333 24.6166C19.8333 24.9666 19.712 25.2634 19.4693 25.5068C19.2259 25.7495 18.9195 25.8708 18.55 25.8708H14ZM14 17.3833C14.9333 17.3833 15.7306 17.0528 16.3917 16.3917C17.0528 15.7305 17.3833 14.9333 17.3833 14C17.3833 13.0667 17.0528 12.2694 16.3917 11.6083C15.7306 10.9472 14.9333 10.6167 14 10.6167C13.0667 10.6167 12.2695 10.9472 11.6083 11.6083C10.9472 12.2694 10.6167 13.0667 10.6167 14C10.6167 14.9333 10.9472 15.7305 11.6083 16.3917C12.2695 17.0528 13.0667 17.3833 14 17.3833Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-mention"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconMention {
   }
   static get properties() {
     return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconColor",
+          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "references": {
+            "SwirlIconColor": {
+              "location": "import",
+              "path": "../swirl-icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
       "size": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/swirl-icon/icons/swirl-icon-menu-book.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconMenuBook {
   constructor() {
+    this.color = undefined;
     this.size = 24;
   }
   render() {
     const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const styles = {
+      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+    };
     const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M9.33333 5.85008C9.33333 5.75008 9.36945 5.6473 9.44167 5.54175C9.51389 5.43619 9.59445 5.36675 9.68333 5.33341C10.0056 5.2223 10.3278 5.13897 10.65 5.08341C10.9722 5.02786 11.3111 5.00008 11.6667 5.00008C11.8889 5.00008 12.1083 5.01397 12.325 5.04175C12.5417 5.06953 12.7556 5.10564 12.9667 5.15008C13.0667 5.1723 13.1528 5.22786 13.225 5.31675C13.2972 5.40564 13.3333 5.50564 13.3333 5.61675C13.3333 5.80564 13.2722 5.94453 13.15 6.03341C13.0278 6.1223 12.8722 6.14453 12.6833 6.10008C12.5278 6.06675 12.3639 6.04175 12.1917 6.02508C12.0194 6.00841 11.8444 6.00008 11.6667 6.00008C11.3778 6.00008 11.0944 6.02786 10.8167 6.08341C10.5389 6.13897 10.2722 6.21119 10.0167 6.30008C9.81667 6.37786 9.65278 6.3723 9.525 6.28341C9.39722 6.19453 9.33333 6.05008 9.33333 5.85008ZM9.33333 9.51675C9.33333 9.41675 9.36945 9.31397 9.44167 9.20841C9.51389 9.10286 9.59445 9.03341 9.68333 9.00008C10.0056 8.88897 10.3278 8.80564 10.65 8.75008C10.9722 8.69453 11.3111 8.66675 11.6667 8.66675C11.8889 8.66675 12.1083 8.68064 12.325 8.70841C12.5417 8.73619 12.7556 8.7723 12.9667 8.81675C13.0667 8.83897 13.1528 8.89453 13.225 8.98341C13.2972 9.0723 13.3333 9.1723 13.3333 9.28341C13.3333 9.4723 13.2722 9.61119 13.15 9.70008C13.0278 9.78897 12.8722 9.81119 12.6833 9.76675C12.5278 9.73341 12.3639 9.70841 12.1917 9.69175C12.0194 9.67508 11.8444 9.66675 11.6667 9.66675C11.3778 9.66675 11.0944 9.69175 10.8167 9.74175C10.5389 9.79175 10.2722 9.86119 10.0167 9.95008C9.81667 10.0279 9.65278 10.0251 9.525 9.94175C9.39722 9.85841 9.33333 9.71675 9.33333 9.51675ZM9.33333 7.68341C9.33333 7.58341 9.36945 7.48064 9.44167 7.37508C9.51389 7.26953 9.59445 7.20008 9.68333 7.16675C10.0056 7.05564 10.3278 6.9723 10.65 6.91675C10.9722 6.86119 11.3111 6.83341 11.6667 6.83341C11.8889 6.83341 12.1083 6.8473 12.325 6.87508C12.5417 6.90286 12.7556 6.93897 12.9667 6.98341C13.0667 7.00564 13.1528 7.06119 13.225 7.15008C13.2972 7.23897 13.3333 7.33897 13.3333 7.45008C13.3333 7.63897 13.2722 7.77786 13.15 7.86675C13.0278 7.95564 12.8722 7.97786 12.6833 7.93341C12.5278 7.90008 12.3639 7.87508 12.1917 7.85841C12.0194 7.84175 11.8444 7.83341 11.6667 7.83341C11.3778 7.83341 11.0944 7.86119 10.8167 7.91675C10.5389 7.9723 10.2722 8.04453 10.0167 8.13341C9.81667 8.21119 9.65278 8.20564 9.525 8.11675C9.39722 8.02786 9.33333 7.88341 9.33333 7.68341ZM4.33333 10.6667C4.85556 10.6667 5.36389 10.7251 5.85833 10.8417C6.35278 10.9584 6.84445 11.1334 7.33333 11.3667V4.80008C6.87778 4.53341 6.39445 4.33341 5.88333 4.20008C5.37222 4.06675 4.85556 4.00008 4.33333 4.00008C3.93333 4.00008 3.53611 4.03897 3.14167 4.11675C2.74722 4.19453 2.36667 4.31119 2 4.46675V11.0667C2.38889 10.9334 2.775 10.8334 3.15833 10.7667C3.54167 10.7001 3.93333 10.6667 4.33333 10.6667ZM8.66667 11.3667C9.15556 11.1334 9.64722 10.9584 10.1417 10.8417C10.6361 10.7251 11.1444 10.6667 11.6667 10.6667C12.0667 10.6667 12.4583 10.7001 12.8417 10.7667C13.225 10.8334 13.6111 10.9334 14 11.0667V4.46675C13.6333 4.31119 13.2528 4.19453 12.8583 4.11675C12.4639 4.03897 12.0667 4.00008 11.6667 4.00008C11.1444 4.00008 10.6278 4.06675 10.1167 4.20008C9.60556 4.33341 9.12222 4.53341 8.66667 4.80008V11.3667ZM8 12.9834C7.84445 12.9834 7.69722 12.964 7.55833 12.9251C7.41945 12.8862 7.28889 12.8334 7.16667 12.7667C6.73333 12.5112 6.27778 12.3195 5.8 12.1917C5.32222 12.064 4.83333 12.0001 4.33333 12.0001C3.86667 12.0001 3.40833 12.0612 2.95833 12.1834C2.50833 12.3056 2.07778 12.4779 1.66667 12.7001C1.43333 12.8223 1.20833 12.8167 0.991668 12.6834C0.775001 12.5501 0.666668 12.3556 0.666668 12.1001V4.06675C0.666668 3.94453 0.697223 3.82786 0.758335 3.71675C0.819446 3.60564 0.911112 3.5223 1.03333 3.46675C1.54445 3.20008 2.07778 3.00008 2.63333 2.86675C3.18889 2.73341 3.75556 2.66675 4.33333 2.66675C4.97778 2.66675 5.60833 2.75008 6.225 2.91675C6.84167 3.08341 7.43333 3.33341 8 3.66675C8.56667 3.33341 9.15833 3.08341 9.775 2.91675C10.3917 2.75008 11.0222 2.66675 11.6667 2.66675C12.2444 2.66675 12.8111 2.73341 13.3667 2.86675C13.9222 3.00008 14.4556 3.20008 14.9667 3.46675C15.0889 3.5223 15.1806 3.60564 15.2417 3.71675C15.3028 3.82786 15.3333 3.94453 15.3333 4.06675V12.1001C15.3333 12.3556 15.225 12.5501 15.0083 12.6834C14.7917 12.8167 14.5667 12.8223 14.3333 12.7001C13.9222 12.4779 13.4917 12.3056 13.0417 12.1834C12.5917 12.0612 12.1333 12.0001 11.6667 12.0001C11.1667 12.0001 10.6778 12.064 10.2 12.1917C9.72222 12.3195 9.26667 12.5112 8.83333 12.7667C8.71111 12.8334 8.58056 12.8862 8.44167 12.9251C8.30278 12.964 8.15556 12.9834 8 12.9834Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M14 8.775C14 8.625 14.0542 8.47083 14.1625 8.3125C14.2708 8.15417 14.3917 8.05 14.525 8C15.0083 7.83333 15.4917 7.70833 15.975 7.625C16.4583 7.54167 16.9667 7.5 17.5 7.5C17.8333 7.5 18.1625 7.52083 18.4875 7.5625C18.8125 7.60417 19.1333 7.65833 19.45 7.725C19.6 7.75833 19.7292 7.84167 19.8375 7.975C19.9458 8.10833 20 8.25833 20 8.425C20 8.70833 19.9083 8.91667 19.725 9.05C19.5417 9.18333 19.3083 9.21667 19.025 9.15C18.7917 9.1 18.5458 9.0625 18.2875 9.0375C18.0292 9.0125 17.7667 9 17.5 9C17.0667 9 16.6417 9.04167 16.225 9.125C15.8083 9.20833 15.4083 9.31667 15.025 9.45C14.725 9.56667 14.4792 9.55833 14.2875 9.425C14.0958 9.29167 14 9.075 14 8.775ZM14 14.275C14 14.125 14.0542 13.9708 14.1625 13.8125C14.2708 13.6542 14.3917 13.55 14.525 13.5C15.0083 13.3333 15.4917 13.2083 15.975 13.125C16.4583 13.0417 16.9667 13 17.5 13C17.8333 13 18.1625 13.0208 18.4875 13.0625C18.8125 13.1042 19.1333 13.1583 19.45 13.225C19.6 13.2583 19.7292 13.3417 19.8375 13.475C19.9458 13.6083 20 13.7583 20 13.925C20 14.2083 19.9083 14.4167 19.725 14.55C19.5417 14.6833 19.3083 14.7167 19.025 14.65C18.7917 14.6 18.5458 14.5625 18.2875 14.5375C18.0292 14.5125 17.7667 14.5 17.5 14.5C17.0667 14.5 16.6417 14.5375 16.225 14.6125C15.8083 14.6875 15.4083 14.7917 15.025 14.925C14.725 15.0417 14.4792 15.0375 14.2875 14.9125C14.0958 14.7875 14 14.575 14 14.275ZM14 11.525C14 11.375 14.0542 11.2208 14.1625 11.0625C14.2708 10.9042 14.3917 10.8 14.525 10.75C15.0083 10.5833 15.4917 10.4583 15.975 10.375C16.4583 10.2917 16.9667 10.25 17.5 10.25C17.8333 10.25 18.1625 10.2708 18.4875 10.3125C18.8125 10.3542 19.1333 10.4083 19.45 10.475C19.6 10.5083 19.7292 10.5917 19.8375 10.725C19.9458 10.8583 20 11.0083 20 11.175C20 11.4583 19.9083 11.6667 19.725 11.8C19.5417 11.9333 19.3083 11.9667 19.025 11.9C18.7917 11.85 18.5458 11.8125 18.2875 11.7875C18.0292 11.7625 17.7667 11.75 17.5 11.75C17.0667 11.75 16.6417 11.7917 16.225 11.875C15.8083 11.9583 15.4083 12.0667 15.025 12.2C14.725 12.3167 14.4792 12.3083 14.2875 12.175C14.0958 12.0417 14 11.825 14 11.525ZM6.5 16C7.28333 16 8.04583 16.0875 8.7875 16.2625C9.52917 16.4375 10.2667 16.7 11 17.05V7.2C10.3167 6.8 9.59167 6.5 8.825 6.3C8.05833 6.1 7.28333 6 6.5 6C5.9 6 5.30417 6.05833 4.7125 6.175C4.12083 6.29167 3.55 6.46667 3 6.7V16.6C3.58333 16.4 4.1625 16.25 4.7375 16.15C5.3125 16.05 5.9 16 6.5 16ZM13 17.05C13.7333 16.7 14.4708 16.4375 15.2125 16.2625C15.9542 16.0875 16.7167 16 17.5 16C18.1 16 18.6875 16.05 19.2625 16.15C19.8375 16.25 20.4167 16.4 21 16.6V6.7C20.45 6.46667 19.8792 6.29167 19.2875 6.175C18.6958 6.05833 18.1 6 17.5 6C16.7167 6 15.9417 6.1 15.175 6.3C14.4083 6.5 13.6833 6.8 13 7.2V17.05ZM12 19.475C11.7667 19.475 11.5458 19.4458 11.3375 19.3875C11.1292 19.3292 10.9333 19.25 10.75 19.15C10.1 18.7667 9.41667 18.4792 8.7 18.2875C7.98333 18.0958 7.25 18 6.5 18C5.8 18 5.1125 18.0917 4.4375 18.275C3.7625 18.4583 3.11667 18.7167 2.5 19.05C2.15 19.2333 1.8125 19.225 1.4875 19.025C1.1625 18.825 1 18.5333 1 18.15V6.1C1 5.91667 1.04583 5.74167 1.1375 5.575C1.22917 5.40833 1.36667 5.28333 1.55 5.2C2.31667 4.8 3.11667 4.5 3.95 4.3C4.78333 4.1 5.63333 4 6.5 4C7.46667 4 8.4125 4.125 9.3375 4.375C10.2625 4.625 11.15 5 12 5.5C12.85 5 13.7375 4.625 14.6625 4.375C15.5875 4.125 16.5333 4 17.5 4C18.3667 4 19.2167 4.1 20.05 4.3C20.8833 4.5 21.6833 4.8 22.45 5.2C22.6333 5.28333 22.7708 5.40833 22.8625 5.575C22.9542 5.74167 23 5.91667 23 6.1V18.15C23 18.5333 22.8375 18.825 22.5125 19.025C22.1875 19.225 21.85 19.2333 21.5 19.05C20.8833 18.7167 20.2375 18.4583 19.5625 18.275C18.8875 18.0917 18.2 18 17.5 18C16.75 18 16.0167 18.0958 15.3 18.2875C14.5833 18.4792 13.9 18.7667 13.25 19.15C13.0667 19.25 12.8708 19.3292 12.6625 19.3875C12.4542 19.4458 12.2333 19.475 12 19.475Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M16.3333 10.2376C16.3333 10.0626 16.3965 9.88272 16.5229 9.698C16.6493 9.51328 16.7903 9.39175 16.9458 9.33341C17.5097 9.13897 18.0736 8.99314 18.6375 8.89591C19.2014 8.79869 19.7944 8.75008 20.4167 8.75008C20.8056 8.75008 21.1896 8.77439 21.5687 8.823C21.9479 8.87161 22.3222 8.9348 22.6917 9.01258C22.8667 9.05147 23.0174 9.14869 23.1437 9.30425C23.2701 9.4598 23.3333 9.6348 23.3333 9.82925C23.3333 10.1598 23.2264 10.4029 23.0125 10.5584C22.7986 10.714 22.5264 10.7529 22.1958 10.6751C21.9236 10.6167 21.6368 10.573 21.3354 10.5438C21.034 10.5147 20.7278 10.5001 20.4167 10.5001C19.9111 10.5001 19.4153 10.5487 18.9292 10.6459C18.4431 10.7431 17.9764 10.8695 17.5292 11.0251C17.1792 11.1612 16.8924 11.1515 16.6687 10.9959C16.4451 10.8404 16.3333 10.5876 16.3333 10.2376ZM16.3333 16.6542C16.3333 16.4792 16.3965 16.2994 16.5229 16.1147C16.6493 15.9299 16.7903 15.8084 16.9458 15.7501C17.5097 15.5556 18.0736 15.4098 18.6375 15.3126C19.2014 15.2154 19.7944 15.1667 20.4167 15.1667C20.8056 15.1667 21.1896 15.1911 21.5687 15.2397C21.9479 15.2883 22.3222 15.3515 22.6917 15.4292C22.8667 15.4681 23.0174 15.5654 23.1437 15.7209C23.2701 15.8765 23.3333 16.0515 23.3333 16.2459C23.3333 16.5765 23.2264 16.8195 23.0125 16.9751C22.7986 17.1306 22.5264 17.1695 22.1958 17.0917C21.9236 17.0334 21.6368 16.9897 21.3354 16.9605C21.034 16.9313 20.7278 16.9167 20.4167 16.9167C19.9111 16.9167 19.4153 16.9605 18.9292 17.048C18.4431 17.1355 17.9764 17.257 17.5292 17.4126C17.1792 17.5487 16.8924 17.5438 16.6687 17.398C16.4451 17.2522 16.3333 17.0042 16.3333 16.6542ZM16.3333 13.4459C16.3333 13.2709 16.3965 13.0911 16.5229 12.9063C16.6493 12.7216 16.7903 12.6001 16.9458 12.5417C17.5097 12.3473 18.0736 12.2015 18.6375 12.1042C19.2014 12.007 19.7944 11.9584 20.4167 11.9584C20.8056 11.9584 21.1896 11.9827 21.5687 12.0313C21.9479 12.0799 22.3222 12.1431 22.6917 12.2209C22.8667 12.2598 23.0174 12.357 23.1437 12.5126C23.2701 12.6681 23.3333 12.8431 23.3333 13.0376C23.3333 13.3681 23.2264 13.6112 23.0125 13.7667C22.7986 13.9223 22.5264 13.9612 22.1958 13.8834C21.9236 13.8251 21.6368 13.7813 21.3354 13.7522C21.034 13.723 20.7278 13.7084 20.4167 13.7084C19.9111 13.7084 19.4153 13.757 18.9292 13.8542C18.4431 13.9515 17.9764 14.0779 17.5292 14.2334C17.1792 14.3695 16.8924 14.3598 16.6687 14.2042C16.4451 14.0487 16.3333 13.7959 16.3333 13.4459ZM7.58333 18.6667C8.49722 18.6667 9.3868 18.7688 10.2521 18.973C11.1174 19.1772 11.9778 19.4834 12.8333 19.8917V8.40008C12.0361 7.93341 11.1903 7.58341 10.2958 7.35008C9.40139 7.11675 8.49722 7.00008 7.58333 7.00008C6.88333 7.00008 6.18819 7.06814 5.49791 7.20425C4.80764 7.34036 4.14166 7.54453 3.5 7.81675V19.3667C4.18055 19.1334 4.85625 18.9584 5.52708 18.8417C6.19791 18.7251 6.88333 18.6667 7.58333 18.6667ZM15.1667 19.8917C16.0222 19.4834 16.8826 19.1772 17.7479 18.973C18.6132 18.7688 19.5028 18.6667 20.4167 18.6667C21.1167 18.6667 21.8021 18.7251 22.4729 18.8417C23.1437 18.9584 23.8194 19.1334 24.5 19.3667V7.81675C23.8583 7.54453 23.1924 7.34036 22.5021 7.20425C21.8118 7.06814 21.1167 7.00008 20.4167 7.00008C19.5028 7.00008 18.5986 7.11675 17.7042 7.35008C16.8097 7.58341 15.9639 7.93341 15.1667 8.40008V19.8917ZM14 22.7209C13.7278 22.7209 13.4701 22.6869 13.2271 22.6188C12.984 22.5508 12.7556 22.4584 12.5417 22.3417C11.7833 21.8945 10.9861 21.5591 10.15 21.3355C9.31389 21.1119 8.45833 21.0001 7.58333 21.0001C6.76666 21.0001 5.96458 21.107 5.17708 21.3209C4.38958 21.5348 3.63611 21.8362 2.91666 22.2251C2.50833 22.439 2.11458 22.4292 1.73541 22.1959C1.35625 21.9626 1.16666 21.6223 1.16666 21.1751V7.11675C1.16666 6.90286 1.22014 6.69869 1.32708 6.50425C1.43403 6.3098 1.59444 6.16397 1.80833 6.06675C2.70278 5.60008 3.63611 5.25008 4.60833 5.01675C5.58055 4.78341 6.57222 4.66675 7.58333 4.66675C8.71111 4.66675 9.81458 4.81258 10.8937 5.10425C11.9729 5.39591 13.0083 5.83341 14 6.41675C14.9917 5.83341 16.0271 5.39591 17.1062 5.10425C18.1854 4.81258 19.2889 4.66675 20.4167 4.66675C21.4278 4.66675 22.4194 4.78341 23.3917 5.01675C24.3639 5.25008 25.2972 5.60008 26.1917 6.06675C26.4056 6.16397 26.566 6.3098 26.6729 6.50425C26.7799 6.69869 26.8333 6.90286 26.8333 7.11675V21.1751C26.8333 21.6223 26.6437 21.9626 26.2646 22.1959C25.8854 22.4292 25.4917 22.439 25.0833 22.2251C24.3639 21.8362 23.6104 21.5348 22.8229 21.3209C22.0354 21.107 21.2333 21.0001 20.4167 21.0001C19.5417 21.0001 18.6861 21.1119 17.85 21.3355C17.0139 21.5591 16.2167 21.8945 15.4583 22.3417C15.2444 22.4584 15.016 22.5508 14.7729 22.6188C14.5299 22.6869 14.2722 22.7209 14 22.7209Z", fill: "currentColor" })))));
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M9.33333 5.85008C9.33333 5.75008 9.36945 5.6473 9.44167 5.54175C9.51389 5.43619 9.59445 5.36675 9.68333 5.33341C10.0056 5.2223 10.3278 5.13897 10.65 5.08341C10.9722 5.02786 11.3111 5.00008 11.6667 5.00008C11.8889 5.00008 12.1083 5.01397 12.325 5.04175C12.5417 5.06953 12.7556 5.10564 12.9667 5.15008C13.0667 5.1723 13.1528 5.22786 13.225 5.31675C13.2972 5.40564 13.3333 5.50564 13.3333 5.61675C13.3333 5.80564 13.2722 5.94453 13.15 6.03341C13.0278 6.1223 12.8722 6.14453 12.6833 6.10008C12.5278 6.06675 12.3639 6.04175 12.1917 6.02508C12.0194 6.00841 11.8444 6.00008 11.6667 6.00008C11.3778 6.00008 11.0944 6.02786 10.8167 6.08341C10.5389 6.13897 10.2722 6.21119 10.0167 6.30008C9.81667 6.37786 9.65278 6.3723 9.525 6.28341C9.39722 6.19453 9.33333 6.05008 9.33333 5.85008ZM9.33333 9.51675C9.33333 9.41675 9.36945 9.31397 9.44167 9.20841C9.51389 9.10286 9.59445 9.03341 9.68333 9.00008C10.0056 8.88897 10.3278 8.80564 10.65 8.75008C10.9722 8.69453 11.3111 8.66675 11.6667 8.66675C11.8889 8.66675 12.1083 8.68064 12.325 8.70841C12.5417 8.73619 12.7556 8.7723 12.9667 8.81675C13.0667 8.83897 13.1528 8.89453 13.225 8.98341C13.2972 9.0723 13.3333 9.1723 13.3333 9.28341C13.3333 9.4723 13.2722 9.61119 13.15 9.70008C13.0278 9.78897 12.8722 9.81119 12.6833 9.76675C12.5278 9.73341 12.3639 9.70841 12.1917 9.69175C12.0194 9.67508 11.8444 9.66675 11.6667 9.66675C11.3778 9.66675 11.0944 9.69175 10.8167 9.74175C10.5389 9.79175 10.2722 9.86119 10.0167 9.95008C9.81667 10.0279 9.65278 10.0251 9.525 9.94175C9.39722 9.85841 9.33333 9.71675 9.33333 9.51675ZM9.33333 7.68341C9.33333 7.58341 9.36945 7.48064 9.44167 7.37508C9.51389 7.26953 9.59445 7.20008 9.68333 7.16675C10.0056 7.05564 10.3278 6.9723 10.65 6.91675C10.9722 6.86119 11.3111 6.83341 11.6667 6.83341C11.8889 6.83341 12.1083 6.8473 12.325 6.87508C12.5417 6.90286 12.7556 6.93897 12.9667 6.98341C13.0667 7.00564 13.1528 7.06119 13.225 7.15008C13.2972 7.23897 13.3333 7.33897 13.3333 7.45008C13.3333 7.63897 13.2722 7.77786 13.15 7.86675C13.0278 7.95564 12.8722 7.97786 12.6833 7.93341C12.5278 7.90008 12.3639 7.87508 12.1917 7.85841C12.0194 7.84175 11.8444 7.83341 11.6667 7.83341C11.3778 7.83341 11.0944 7.86119 10.8167 7.91675C10.5389 7.9723 10.2722 8.04453 10.0167 8.13341C9.81667 8.21119 9.65278 8.20564 9.525 8.11675C9.39722 8.02786 9.33333 7.88341 9.33333 7.68341ZM4.33333 10.6667C4.85556 10.6667 5.36389 10.7251 5.85833 10.8417C6.35278 10.9584 6.84445 11.1334 7.33333 11.3667V4.80008C6.87778 4.53341 6.39445 4.33341 5.88333 4.20008C5.37222 4.06675 4.85556 4.00008 4.33333 4.00008C3.93333 4.00008 3.53611 4.03897 3.14167 4.11675C2.74722 4.19453 2.36667 4.31119 2 4.46675V11.0667C2.38889 10.9334 2.775 10.8334 3.15833 10.7667C3.54167 10.7001 3.93333 10.6667 4.33333 10.6667ZM8.66667 11.3667C9.15556 11.1334 9.64722 10.9584 10.1417 10.8417C10.6361 10.7251 11.1444 10.6667 11.6667 10.6667C12.0667 10.6667 12.4583 10.7001 12.8417 10.7667C13.225 10.8334 13.6111 10.9334 14 11.0667V4.46675C13.6333 4.31119 13.2528 4.19453 12.8583 4.11675C12.4639 4.03897 12.0667 4.00008 11.6667 4.00008C11.1444 4.00008 10.6278 4.06675 10.1167 4.20008C9.60556 4.33341 9.12222 4.53341 8.66667 4.80008V11.3667ZM8 12.9834C7.84445 12.9834 7.69722 12.964 7.55833 12.9251C7.41945 12.8862 7.28889 12.8334 7.16667 12.7667C6.73333 12.5112 6.27778 12.3195 5.8 12.1917C5.32222 12.064 4.83333 12.0001 4.33333 12.0001C3.86667 12.0001 3.40833 12.0612 2.95833 12.1834C2.50833 12.3056 2.07778 12.4779 1.66667 12.7001C1.43333 12.8223 1.20833 12.8167 0.991668 12.6834C0.775001 12.5501 0.666668 12.3556 0.666668 12.1001V4.06675C0.666668 3.94453 0.697223 3.82786 0.758335 3.71675C0.819446 3.60564 0.911112 3.5223 1.03333 3.46675C1.54445 3.20008 2.07778 3.00008 2.63333 2.86675C3.18889 2.73341 3.75556 2.66675 4.33333 2.66675C4.97778 2.66675 5.60833 2.75008 6.225 2.91675C6.84167 3.08341 7.43333 3.33341 8 3.66675C8.56667 3.33341 9.15833 3.08341 9.775 2.91675C10.3917 2.75008 11.0222 2.66675 11.6667 2.66675C12.2444 2.66675 12.8111 2.73341 13.3667 2.86675C13.9222 3.00008 14.4556 3.20008 14.9667 3.46675C15.0889 3.5223 15.1806 3.60564 15.2417 3.71675C15.3028 3.82786 15.3333 3.94453 15.3333 4.06675V12.1001C15.3333 12.3556 15.225 12.5501 15.0083 12.6834C14.7917 12.8167 14.5667 12.8223 14.3333 12.7001C13.9222 12.4779 13.4917 12.3056 13.0417 12.1834C12.5917 12.0612 12.1333 12.0001 11.6667 12.0001C11.1667 12.0001 10.6778 12.064 10.2 12.1917C9.72222 12.3195 9.26667 12.5112 8.83333 12.7667C8.71111 12.8334 8.58056 12.8862 8.44167 12.9251C8.30278 12.964 8.15556 12.9834 8 12.9834Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M14 8.775C14 8.625 14.0542 8.47083 14.1625 8.3125C14.2708 8.15417 14.3917 8.05 14.525 8C15.0083 7.83333 15.4917 7.70833 15.975 7.625C16.4583 7.54167 16.9667 7.5 17.5 7.5C17.8333 7.5 18.1625 7.52083 18.4875 7.5625C18.8125 7.60417 19.1333 7.65833 19.45 7.725C19.6 7.75833 19.7292 7.84167 19.8375 7.975C19.9458 8.10833 20 8.25833 20 8.425C20 8.70833 19.9083 8.91667 19.725 9.05C19.5417 9.18333 19.3083 9.21667 19.025 9.15C18.7917 9.1 18.5458 9.0625 18.2875 9.0375C18.0292 9.0125 17.7667 9 17.5 9C17.0667 9 16.6417 9.04167 16.225 9.125C15.8083 9.20833 15.4083 9.31667 15.025 9.45C14.725 9.56667 14.4792 9.55833 14.2875 9.425C14.0958 9.29167 14 9.075 14 8.775ZM14 14.275C14 14.125 14.0542 13.9708 14.1625 13.8125C14.2708 13.6542 14.3917 13.55 14.525 13.5C15.0083 13.3333 15.4917 13.2083 15.975 13.125C16.4583 13.0417 16.9667 13 17.5 13C17.8333 13 18.1625 13.0208 18.4875 13.0625C18.8125 13.1042 19.1333 13.1583 19.45 13.225C19.6 13.2583 19.7292 13.3417 19.8375 13.475C19.9458 13.6083 20 13.7583 20 13.925C20 14.2083 19.9083 14.4167 19.725 14.55C19.5417 14.6833 19.3083 14.7167 19.025 14.65C18.7917 14.6 18.5458 14.5625 18.2875 14.5375C18.0292 14.5125 17.7667 14.5 17.5 14.5C17.0667 14.5 16.6417 14.5375 16.225 14.6125C15.8083 14.6875 15.4083 14.7917 15.025 14.925C14.725 15.0417 14.4792 15.0375 14.2875 14.9125C14.0958 14.7875 14 14.575 14 14.275ZM14 11.525C14 11.375 14.0542 11.2208 14.1625 11.0625C14.2708 10.9042 14.3917 10.8 14.525 10.75C15.0083 10.5833 15.4917 10.4583 15.975 10.375C16.4583 10.2917 16.9667 10.25 17.5 10.25C17.8333 10.25 18.1625 10.2708 18.4875 10.3125C18.8125 10.3542 19.1333 10.4083 19.45 10.475C19.6 10.5083 19.7292 10.5917 19.8375 10.725C19.9458 10.8583 20 11.0083 20 11.175C20 11.4583 19.9083 11.6667 19.725 11.8C19.5417 11.9333 19.3083 11.9667 19.025 11.9C18.7917 11.85 18.5458 11.8125 18.2875 11.7875C18.0292 11.7625 17.7667 11.75 17.5 11.75C17.0667 11.75 16.6417 11.7917 16.225 11.875C15.8083 11.9583 15.4083 12.0667 15.025 12.2C14.725 12.3167 14.4792 12.3083 14.2875 12.175C14.0958 12.0417 14 11.825 14 11.525ZM6.5 16C7.28333 16 8.04583 16.0875 8.7875 16.2625C9.52917 16.4375 10.2667 16.7 11 17.05V7.2C10.3167 6.8 9.59167 6.5 8.825 6.3C8.05833 6.1 7.28333 6 6.5 6C5.9 6 5.30417 6.05833 4.7125 6.175C4.12083 6.29167 3.55 6.46667 3 6.7V16.6C3.58333 16.4 4.1625 16.25 4.7375 16.15C5.3125 16.05 5.9 16 6.5 16ZM13 17.05C13.7333 16.7 14.4708 16.4375 15.2125 16.2625C15.9542 16.0875 16.7167 16 17.5 16C18.1 16 18.6875 16.05 19.2625 16.15C19.8375 16.25 20.4167 16.4 21 16.6V6.7C20.45 6.46667 19.8792 6.29167 19.2875 6.175C18.6958 6.05833 18.1 6 17.5 6C16.7167 6 15.9417 6.1 15.175 6.3C14.4083 6.5 13.6833 6.8 13 7.2V17.05ZM12 19.475C11.7667 19.475 11.5458 19.4458 11.3375 19.3875C11.1292 19.3292 10.9333 19.25 10.75 19.15C10.1 18.7667 9.41667 18.4792 8.7 18.2875C7.98333 18.0958 7.25 18 6.5 18C5.8 18 5.1125 18.0917 4.4375 18.275C3.7625 18.4583 3.11667 18.7167 2.5 19.05C2.15 19.2333 1.8125 19.225 1.4875 19.025C1.1625 18.825 1 18.5333 1 18.15V6.1C1 5.91667 1.04583 5.74167 1.1375 5.575C1.22917 5.40833 1.36667 5.28333 1.55 5.2C2.31667 4.8 3.11667 4.5 3.95 4.3C4.78333 4.1 5.63333 4 6.5 4C7.46667 4 8.4125 4.125 9.3375 4.375C10.2625 4.625 11.15 5 12 5.5C12.85 5 13.7375 4.625 14.6625 4.375C15.5875 4.125 16.5333 4 17.5 4C18.3667 4 19.2167 4.1 20.05 4.3C20.8833 4.5 21.6833 4.8 22.45 5.2C22.6333 5.28333 22.7708 5.40833 22.8625 5.575C22.9542 5.74167 23 5.91667 23 6.1V18.15C23 18.5333 22.8375 18.825 22.5125 19.025C22.1875 19.225 21.85 19.2333 21.5 19.05C20.8833 18.7167 20.2375 18.4583 19.5625 18.275C18.8875 18.0917 18.2 18 17.5 18C16.75 18 16.0167 18.0958 15.3 18.2875C14.5833 18.4792 13.9 18.7667 13.25 19.15C13.0667 19.25 12.8708 19.3292 12.6625 19.3875C12.4542 19.4458 12.2333 19.475 12 19.475Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M16.3333 10.2376C16.3333 10.0626 16.3965 9.88272 16.5229 9.698C16.6493 9.51328 16.7903 9.39175 16.9458 9.33341C17.5097 9.13897 18.0736 8.99314 18.6375 8.89591C19.2014 8.79869 19.7944 8.75008 20.4167 8.75008C20.8056 8.75008 21.1896 8.77439 21.5687 8.823C21.9479 8.87161 22.3222 8.9348 22.6917 9.01258C22.8667 9.05147 23.0174 9.14869 23.1437 9.30425C23.2701 9.4598 23.3333 9.6348 23.3333 9.82925C23.3333 10.1598 23.2264 10.4029 23.0125 10.5584C22.7986 10.714 22.5264 10.7529 22.1958 10.6751C21.9236 10.6167 21.6368 10.573 21.3354 10.5438C21.034 10.5147 20.7278 10.5001 20.4167 10.5001C19.9111 10.5001 19.4153 10.5487 18.9292 10.6459C18.4431 10.7431 17.9764 10.8695 17.5292 11.0251C17.1792 11.1612 16.8924 11.1515 16.6687 10.9959C16.4451 10.8404 16.3333 10.5876 16.3333 10.2376ZM16.3333 16.6542C16.3333 16.4792 16.3965 16.2994 16.5229 16.1147C16.6493 15.9299 16.7903 15.8084 16.9458 15.7501C17.5097 15.5556 18.0736 15.4098 18.6375 15.3126C19.2014 15.2154 19.7944 15.1667 20.4167 15.1667C20.8056 15.1667 21.1896 15.1911 21.5687 15.2397C21.9479 15.2883 22.3222 15.3515 22.6917 15.4292C22.8667 15.4681 23.0174 15.5654 23.1437 15.7209C23.2701 15.8765 23.3333 16.0515 23.3333 16.2459C23.3333 16.5765 23.2264 16.8195 23.0125 16.9751C22.7986 17.1306 22.5264 17.1695 22.1958 17.0917C21.9236 17.0334 21.6368 16.9897 21.3354 16.9605C21.034 16.9313 20.7278 16.9167 20.4167 16.9167C19.9111 16.9167 19.4153 16.9605 18.9292 17.048C18.4431 17.1355 17.9764 17.257 17.5292 17.4126C17.1792 17.5487 16.8924 17.5438 16.6687 17.398C16.4451 17.2522 16.3333 17.0042 16.3333 16.6542ZM16.3333 13.4459C16.3333 13.2709 16.3965 13.0911 16.5229 12.9063C16.6493 12.7216 16.7903 12.6001 16.9458 12.5417C17.5097 12.3473 18.0736 12.2015 18.6375 12.1042C19.2014 12.007 19.7944 11.9584 20.4167 11.9584C20.8056 11.9584 21.1896 11.9827 21.5687 12.0313C21.9479 12.0799 22.3222 12.1431 22.6917 12.2209C22.8667 12.2598 23.0174 12.357 23.1437 12.5126C23.2701 12.6681 23.3333 12.8431 23.3333 13.0376C23.3333 13.3681 23.2264 13.6112 23.0125 13.7667C22.7986 13.9223 22.5264 13.9612 22.1958 13.8834C21.9236 13.8251 21.6368 13.7813 21.3354 13.7522C21.034 13.723 20.7278 13.7084 20.4167 13.7084C19.9111 13.7084 19.4153 13.757 18.9292 13.8542C18.4431 13.9515 17.9764 14.0779 17.5292 14.2334C17.1792 14.3695 16.8924 14.3598 16.6687 14.2042C16.4451 14.0487 16.3333 13.7959 16.3333 13.4459ZM7.58333 18.6667C8.49722 18.6667 9.3868 18.7688 10.2521 18.973C11.1174 19.1772 11.9778 19.4834 12.8333 19.8917V8.40008C12.0361 7.93341 11.1903 7.58341 10.2958 7.35008C9.40139 7.11675 8.49722 7.00008 7.58333 7.00008C6.88333 7.00008 6.18819 7.06814 5.49791 7.20425C4.80764 7.34036 4.14166 7.54453 3.5 7.81675V19.3667C4.18055 19.1334 4.85625 18.9584 5.52708 18.8417C6.19791 18.7251 6.88333 18.6667 7.58333 18.6667ZM15.1667 19.8917C16.0222 19.4834 16.8826 19.1772 17.7479 18.973C18.6132 18.7688 19.5028 18.6667 20.4167 18.6667C21.1167 18.6667 21.8021 18.7251 22.4729 18.8417C23.1437 18.9584 23.8194 19.1334 24.5 19.3667V7.81675C23.8583 7.54453 23.1924 7.34036 22.5021 7.20425C21.8118 7.06814 21.1167 7.00008 20.4167 7.00008C19.5028 7.00008 18.5986 7.11675 17.7042 7.35008C16.8097 7.58341 15.9639 7.93341 15.1667 8.40008V19.8917ZM14 22.7209C13.7278 22.7209 13.4701 22.6869 13.2271 22.6188C12.984 22.5508 12.7556 22.4584 12.5417 22.3417C11.7833 21.8945 10.9861 21.5591 10.15 21.3355C9.31389 21.1119 8.45833 21.0001 7.58333 21.0001C6.76666 21.0001 5.96458 21.107 5.17708 21.3209C4.38958 21.5348 3.63611 21.8362 2.91666 22.2251C2.50833 22.439 2.11458 22.4292 1.73541 22.1959C1.35625 21.9626 1.16666 21.6223 1.16666 21.1751V7.11675C1.16666 6.90286 1.22014 6.69869 1.32708 6.50425C1.43403 6.3098 1.59444 6.16397 1.80833 6.06675C2.70278 5.60008 3.63611 5.25008 4.60833 5.01675C5.58055 4.78341 6.57222 4.66675 7.58333 4.66675C8.71111 4.66675 9.81458 4.81258 10.8937 5.10425C11.9729 5.39591 13.0083 5.83341 14 6.41675C14.9917 5.83341 16.0271 5.39591 17.1062 5.10425C18.1854 4.81258 19.2889 4.66675 20.4167 4.66675C21.4278 4.66675 22.4194 4.78341 23.3917 5.01675C24.3639 5.25008 25.2972 5.60008 26.1917 6.06675C26.4056 6.16397 26.566 6.3098 26.6729 6.50425C26.7799 6.69869 26.8333 6.90286 26.8333 7.11675V21.1751C26.8333 21.6223 26.6437 21.9626 26.2646 22.1959C25.8854 22.4292 25.4917 22.439 25.0833 22.2251C24.3639 21.8362 23.6104 21.5348 22.8229 21.3209C22.0354 21.107 21.2333 21.0001 20.4167 21.0001C19.5417 21.0001 18.6861 21.1119 17.85 21.3355C17.0139 21.5591 16.2167 21.8945 15.4583 22.3417C15.2444 22.4584 15.016 22.5508 14.7729 22.6188C14.5299 22.6869 14.2722 22.7209 14 22.7209Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-menu-book"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconMenuBook {
   }
   static get properties() {
     return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconColor",
+          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "references": {
+            "SwirlIconColor": {
+              "location": "import",
+              "path": "../swirl-icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
       "size": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/swirl-icon/icons/swirl-icon-menu-filled.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconMenuFilled {
   constructor() {
+    this.color = undefined;
     this.size = 24;
   }
   render() {
     const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const styles = {
+      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+    };
     const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M2 3.33333C2 2.59695 2.59695 2 3.33333 2H6C6.73638 2 7.33333 2.59695 7.33333 3.33333V6C7.33333 6.73638 6.73638 7.33333 6 7.33333H3.33333C2.59695 7.33333 2 6.73638 2 6V3.33333Z", fill: "currentColor" }), h("path", { d: "M2 10C2 9.26362 2.59695 8.66667 3.33333 8.66667H6C6.73638 8.66667 7.33333 9.26362 7.33333 10V12.6667C7.33333 13.403 6.73638 14 6 14H3.33333C2.59695 14 2 13.403 2 12.6667V10Z", fill: "currentColor" }), h("path", { d: "M8.66667 3.33333C8.66667 2.59695 9.26362 2 10 2H12.6667C13.403 2 14 2.59695 14 3.33333V6C14 6.73638 13.403 7.33333 12.6667 7.33333H10C9.26362 7.33333 8.66667 6.73638 8.66667 6V3.33333Z", fill: "currentColor" }), h("path", { d: "M8.66667 10C8.66667 9.26362 9.26362 8.66667 10 8.66667H12.6667C13.403 8.66667 14 9.26362 14 10V12.6667C14 13.403 13.403 14 12.6667 14H10C9.26362 14 8.66667 13.403 8.66667 12.6667V10Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M3 5C3 3.89543 3.89543 3 5 3H9C10.1046 3 11 3.89543 11 5V9C11 10.1046 10.1046 11 9 11H5C3.89543 11 3 10.1046 3 9V5Z", fill: "currentColor" }), h("path", { d: "M3 15C3 13.8954 3.89543 13 5 13H9C10.1046 13 11 13.8954 11 15V19C11 20.1046 10.1046 21 9 21H5C3.89543 21 3 20.1046 3 19V15Z", fill: "currentColor" }), h("path", { d: "M13 5C13 3.89543 13.8954 3 15 3H19C20.1046 3 21 3.89543 21 5V9C21 10.1046 20.1046 11 19 11H15C13.8954 11 13 10.1046 13 9V5Z", fill: "currentColor" }), h("path", { d: "M13 15C13 13.8954 13.8954 13 15 13H19C20.1046 13 21 13.8954 21 15V19C21 20.1046 20.1046 21 19 21H15C13.8954 21 13 20.1046 13 19V15Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M3.5 5.83333C3.5 4.54467 4.54467 3.5 5.83333 3.5H10.5C11.7887 3.5 12.8333 4.54467 12.8333 5.83333V10.5C12.8333 11.7887 11.7887 12.8333 10.5 12.8333H5.83333C4.54467 12.8333 3.5 11.7887 3.5 10.5V5.83333Z", fill: "currentColor" }), h("path", { d: "M3.5 17.5C3.5 16.2113 4.54467 15.1667 5.83333 15.1667H10.5C11.7887 15.1667 12.8333 16.2113 12.8333 17.5V22.1667C12.8333 23.4553 11.7887 24.5 10.5 24.5H5.83333C4.54467 24.5 3.5 23.4553 3.5 22.1667V17.5Z", fill: "currentColor" }), h("path", { d: "M15.1667 5.83333C15.1667 4.54467 16.2113 3.5 17.5 3.5H22.1667C23.4553 3.5 24.5 4.54467 24.5 5.83333V10.5C24.5 11.7887 23.4553 12.8333 22.1667 12.8333H17.5C16.2113 12.8333 15.1667 11.7887 15.1667 10.5V5.83333Z", fill: "currentColor" }), h("path", { d: "M15.1667 17.5C15.1667 16.2113 16.2113 15.1667 17.5 15.1667H22.1667C23.4553 15.1667 24.5 16.2113 24.5 17.5V22.1667C24.5 23.4553 23.4553 24.5 22.1667 24.5H17.5C16.2113 24.5 15.1667 23.4553 15.1667 22.1667V17.5Z", fill: "currentColor" })))));
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M2 3.33333C2 2.59695 2.59695 2 3.33333 2H6C6.73638 2 7.33333 2.59695 7.33333 3.33333V6C7.33333 6.73638 6.73638 7.33333 6 7.33333H3.33333C2.59695 7.33333 2 6.73638 2 6V3.33333Z", fill: "currentColor" }), h("path", { d: "M2 10C2 9.26362 2.59695 8.66667 3.33333 8.66667H6C6.73638 8.66667 7.33333 9.26362 7.33333 10V12.6667C7.33333 13.403 6.73638 14 6 14H3.33333C2.59695 14 2 13.403 2 12.6667V10Z", fill: "currentColor" }), h("path", { d: "M8.66667 3.33333C8.66667 2.59695 9.26362 2 10 2H12.6667C13.403 2 14 2.59695 14 3.33333V6C14 6.73638 13.403 7.33333 12.6667 7.33333H10C9.26362 7.33333 8.66667 6.73638 8.66667 6V3.33333Z", fill: "currentColor" }), h("path", { d: "M8.66667 10C8.66667 9.26362 9.26362 8.66667 10 8.66667H12.6667C13.403 8.66667 14 9.26362 14 10V12.6667C14 13.403 13.403 14 12.6667 14H10C9.26362 14 8.66667 13.403 8.66667 12.6667V10Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M3 5C3 3.89543 3.89543 3 5 3H9C10.1046 3 11 3.89543 11 5V9C11 10.1046 10.1046 11 9 11H5C3.89543 11 3 10.1046 3 9V5Z", fill: "currentColor" }), h("path", { d: "M3 15C3 13.8954 3.89543 13 5 13H9C10.1046 13 11 13.8954 11 15V19C11 20.1046 10.1046 21 9 21H5C3.89543 21 3 20.1046 3 19V15Z", fill: "currentColor" }), h("path", { d: "M13 5C13 3.89543 13.8954 3 15 3H19C20.1046 3 21 3.89543 21 5V9C21 10.1046 20.1046 11 19 11H15C13.8954 11 13 10.1046 13 9V5Z", fill: "currentColor" }), h("path", { d: "M13 15C13 13.8954 13.8954 13 15 13H19C20.1046 13 21 13.8954 21 15V19C21 20.1046 20.1046 21 19 21H15C13.8954 21 13 20.1046 13 19V15Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M3.5 5.83333C3.5 4.54467 4.54467 3.5 5.83333 3.5H10.5C11.7887 3.5 12.8333 4.54467 12.8333 5.83333V10.5C12.8333 11.7887 11.7887 12.8333 10.5 12.8333H5.83333C4.54467 12.8333 3.5 11.7887 3.5 10.5V5.83333Z", fill: "currentColor" }), h("path", { d: "M3.5 17.5C3.5 16.2113 4.54467 15.1667 5.83333 15.1667H10.5C11.7887 15.1667 12.8333 16.2113 12.8333 17.5V22.1667C12.8333 23.4553 11.7887 24.5 10.5 24.5H5.83333C4.54467 24.5 3.5 23.4553 3.5 22.1667V17.5Z", fill: "currentColor" }), h("path", { d: "M15.1667 5.83333C15.1667 4.54467 16.2113 3.5 17.5 3.5H22.1667C23.4553 3.5 24.5 4.54467 24.5 5.83333V10.5C24.5 11.7887 23.4553 12.8333 22.1667 12.8333H17.5C16.2113 12.8333 15.1667 11.7887 15.1667 10.5V5.83333Z", fill: "currentColor" }), h("path", { d: "M15.1667 17.5C15.1667 16.2113 16.2113 15.1667 17.5 15.1667H22.1667C23.4553 15.1667 24.5 16.2113 24.5 17.5V22.1667C24.5 23.4553 23.4553 24.5 22.1667 24.5H17.5C16.2113 24.5 15.1667 23.4553 15.1667 22.1667V17.5Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-menu-filled"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconMenuFilled {
   }
   static get properties() {
     return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconColor",
+          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "references": {
+            "SwirlIconColor": {
+              "location": "import",
+              "path": "../swirl-icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
       "size": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/swirl-icon/icons/swirl-icon-menu-outlined.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconMenuOutlined {
   constructor() {
+    this.color = undefined;
     this.size = 24;
   }
   render() {
     const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const styles = {
+      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+    };
     const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M6 3.33333V6H3.33333V3.33333H6ZM3.33333 2C2.59695 2 2 2.59695 2 3.33333V6C2 6.73638 2.59695 7.33333 3.33333 7.33333H6C6.73638 7.33333 7.33333 6.73638 7.33333 6V3.33333C7.33333 2.59695 6.73638 2 6 2H3.33333Z", fill: "currentColor" }), h("path", { d: "M6 10V12.6667H3.33333V10H6ZM3.33333 8.66667C2.59695 8.66667 2 9.26362 2 10V12.6667C2 13.403 2.59695 14 3.33333 14H6C6.73638 14 7.33333 13.403 7.33333 12.6667V10C7.33333 9.26362 6.73638 8.66667 6 8.66667H3.33333Z", fill: "currentColor" }), h("path", { d: "M12.6667 3.33333V6H10V3.33333H12.6667ZM10 2C9.26362 2 8.66667 2.59695 8.66667 3.33333V6C8.66667 6.73638 9.26362 7.33333 10 7.33333H12.6667C13.403 7.33333 14 6.73638 14 6V3.33333C14 2.59695 13.403 2 12.6667 2H10Z", fill: "currentColor" }), h("path", { d: "M12.6667 10V12.6667H10V10H12.6667ZM10 8.66667C9.26362 8.66667 8.66667 9.26362 8.66667 10V12.6667C8.66667 13.403 9.26362 14 10 14H12.6667C13.403 14 14 13.403 14 12.6667V10C14 9.26362 13.403 8.66667 12.6667 8.66667H10Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M9 5V9H5V5H9ZM5 3C3.89543 3 3 3.89543 3 5V9C3 10.1046 3.89543 11 5 11H9C10.1046 11 11 10.1046 11 9V5C11 3.89543 10.1046 3 9 3H5Z", fill: "currentColor" }), h("path", { d: "M9 15V19H5V15H9ZM5 13C3.89543 13 3 13.8954 3 15V19C3 20.1046 3.89543 21 5 21H9C10.1046 21 11 20.1046 11 19V15C11 13.8954 10.1046 13 9 13H5Z", fill: "currentColor" }), h("path", { d: "M19 5V9H15V5H19ZM15 3C13.8954 3 13 3.89543 13 5V9C13 10.1046 13.8954 11 15 11H19C20.1046 11 21 10.1046 21 9V5C21 3.89543 20.1046 3 19 3H15Z", fill: "currentColor" }), h("path", { d: "M19 15V19H15V15H19ZM15 13C13.8954 13 13 13.8954 13 15V19C13 20.1046 13.8954 21 15 21H19C20.1046 21 21 20.1046 21 19V15C21 13.8954 20.1046 13 19 13H15Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M10.5 5.83333V10.5H5.83333V5.83333H10.5ZM5.83333 3.5C4.54467 3.5 3.5 4.54467 3.5 5.83333V10.5C3.5 11.7887 4.54467 12.8333 5.83333 12.8333H10.5C11.7887 12.8333 12.8333 11.7887 12.8333 10.5V5.83333C12.8333 4.54467 11.7887 3.5 10.5 3.5H5.83333Z", fill: "currentColor" }), h("path", { d: "M10.5 17.5V22.1667H5.83333V17.5H10.5ZM5.83333 15.1667C4.54467 15.1667 3.5 16.2113 3.5 17.5V22.1667C3.5 23.4553 4.54467 24.5 5.83333 24.5H10.5C11.7887 24.5 12.8333 23.4553 12.8333 22.1667V17.5C12.8333 16.2113 11.7887 15.1667 10.5 15.1667H5.83333Z", fill: "currentColor" }), h("path", { d: "M22.1667 5.83333V10.5H17.5V5.83333H22.1667ZM17.5 3.5C16.2113 3.5 15.1667 4.54467 15.1667 5.83333V10.5C15.1667 11.7887 16.2113 12.8333 17.5 12.8333H22.1667C23.4553 12.8333 24.5 11.7887 24.5 10.5V5.83333C24.5 4.54467 23.4553 3.5 22.1667 3.5H17.5Z", fill: "currentColor" }), h("path", { d: "M22.1667 17.5V22.1667H17.5V17.5H22.1667ZM17.5 15.1667C16.2113 15.1667 15.1667 16.2113 15.1667 17.5V22.1667C15.1667 23.4553 16.2113 24.5 17.5 24.5H22.1667C23.4553 24.5 24.5 23.4553 24.5 22.1667V17.5C24.5 16.2113 23.4553 15.1667 22.1667 15.1667H17.5Z", fill: "currentColor" })))));
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M6 3.33333V6H3.33333V3.33333H6ZM3.33333 2C2.59695 2 2 2.59695 2 3.33333V6C2 6.73638 2.59695 7.33333 3.33333 7.33333H6C6.73638 7.33333 7.33333 6.73638 7.33333 6V3.33333C7.33333 2.59695 6.73638 2 6 2H3.33333Z", fill: "currentColor" }), h("path", { d: "M6 10V12.6667H3.33333V10H6ZM3.33333 8.66667C2.59695 8.66667 2 9.26362 2 10V12.6667C2 13.403 2.59695 14 3.33333 14H6C6.73638 14 7.33333 13.403 7.33333 12.6667V10C7.33333 9.26362 6.73638 8.66667 6 8.66667H3.33333Z", fill: "currentColor" }), h("path", { d: "M12.6667 3.33333V6H10V3.33333H12.6667ZM10 2C9.26362 2 8.66667 2.59695 8.66667 3.33333V6C8.66667 6.73638 9.26362 7.33333 10 7.33333H12.6667C13.403 7.33333 14 6.73638 14 6V3.33333C14 2.59695 13.403 2 12.6667 2H10Z", fill: "currentColor" }), h("path", { d: "M12.6667 10V12.6667H10V10H12.6667ZM10 8.66667C9.26362 8.66667 8.66667 9.26362 8.66667 10V12.6667C8.66667 13.403 9.26362 14 10 14H12.6667C13.403 14 14 13.403 14 12.6667V10C14 9.26362 13.403 8.66667 12.6667 8.66667H10Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M9 5V9H5V5H9ZM5 3C3.89543 3 3 3.89543 3 5V9C3 10.1046 3.89543 11 5 11H9C10.1046 11 11 10.1046 11 9V5C11 3.89543 10.1046 3 9 3H5Z", fill: "currentColor" }), h("path", { d: "M9 15V19H5V15H9ZM5 13C3.89543 13 3 13.8954 3 15V19C3 20.1046 3.89543 21 5 21H9C10.1046 21 11 20.1046 11 19V15C11 13.8954 10.1046 13 9 13H5Z", fill: "currentColor" }), h("path", { d: "M19 5V9H15V5H19ZM15 3C13.8954 3 13 3.89543 13 5V9C13 10.1046 13.8954 11 15 11H19C20.1046 11 21 10.1046 21 9V5C21 3.89543 20.1046 3 19 3H15Z", fill: "currentColor" }), h("path", { d: "M19 15V19H15V15H19ZM15 13C13.8954 13 13 13.8954 13 15V19C13 20.1046 13.8954 21 15 21H19C20.1046 21 21 20.1046 21 19V15C21 13.8954 20.1046 13 19 13H15Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M10.5 5.83333V10.5H5.83333V5.83333H10.5ZM5.83333 3.5C4.54467 3.5 3.5 4.54467 3.5 5.83333V10.5C3.5 11.7887 4.54467 12.8333 5.83333 12.8333H10.5C11.7887 12.8333 12.8333 11.7887 12.8333 10.5V5.83333C12.8333 4.54467 11.7887 3.5 10.5 3.5H5.83333Z", fill: "currentColor" }), h("path", { d: "M10.5 17.5V22.1667H5.83333V17.5H10.5ZM5.83333 15.1667C4.54467 15.1667 3.5 16.2113 3.5 17.5V22.1667C3.5 23.4553 4.54467 24.5 5.83333 24.5H10.5C11.7887 24.5 12.8333 23.4553 12.8333 22.1667V17.5C12.8333 16.2113 11.7887 15.1667 10.5 15.1667H5.83333Z", fill: "currentColor" }), h("path", { d: "M22.1667 5.83333V10.5H17.5V5.83333H22.1667ZM17.5 3.5C16.2113 3.5 15.1667 4.54467 15.1667 5.83333V10.5C15.1667 11.7887 16.2113 12.8333 17.5 12.8333H22.1667C23.4553 12.8333 24.5 11.7887 24.5 10.5V5.83333C24.5 4.54467 23.4553 3.5 22.1667 3.5H17.5Z", fill: "currentColor" }), h("path", { d: "M22.1667 17.5V22.1667H17.5V17.5H22.1667ZM17.5 15.1667C16.2113 15.1667 15.1667 16.2113 15.1667 17.5V22.1667C15.1667 23.4553 16.2113 24.5 17.5 24.5H22.1667C23.4553 24.5 24.5 23.4553 24.5 22.1667V17.5C24.5 16.2113 23.4553 15.1667 22.1667 15.1667H17.5Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-menu-outlined"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconMenuOutlined {
   }
   static get properties() {
     return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconColor",
+          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "references": {
+            "SwirlIconColor": {
+              "location": "import",
+              "path": "../swirl-icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
       "size": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/swirl-icon/icons/swirl-icon-menu.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconMenu {
   constructor() {
+    this.color = undefined;
     this.size = 24;
   }
   render() {
     const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const styles = {
+      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+    };
     const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M2.66667 12C2.47778 12 2.31956 11.936 2.192 11.808C2.064 11.6804 2 11.5222 2 11.3333C2 11.1444 2.064 10.9862 2.192 10.8587C2.31956 10.7307 2.47778 10.6667 2.66667 10.6667H13.3333C13.5222 10.6667 13.6804 10.7307 13.808 10.8587C13.936 10.9862 14 11.1444 14 11.3333C14 11.5222 13.936 11.6804 13.808 11.808C13.6804 11.936 13.5222 12 13.3333 12H2.66667ZM2.66667 8.66667C2.47778 8.66667 2.31956 8.60267 2.192 8.47467C2.064 8.34711 2 8.18889 2 8C2 7.81111 2.064 7.65267 2.192 7.52467C2.31956 7.39711 2.47778 7.33333 2.66667 7.33333H13.3333C13.5222 7.33333 13.6804 7.39711 13.808 7.52467C13.936 7.65267 14 7.81111 14 8C14 8.18889 13.936 8.34711 13.808 8.47467C13.6804 8.60267 13.5222 8.66667 13.3333 8.66667H2.66667ZM2.66667 5.33333C2.47778 5.33333 2.31956 5.26956 2.192 5.142C2.064 5.014 2 4.85556 2 4.66667C2 4.47778 2.064 4.31933 2.192 4.19133C2.31956 4.06378 2.47778 4 2.66667 4H13.3333C13.5222 4 13.6804 4.06378 13.808 4.19133C13.936 4.31933 14 4.47778 14 4.66667C14 4.85556 13.936 5.014 13.808 5.142C13.6804 5.26956 13.5222 5.33333 13.3333 5.33333H2.66667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M4 18C3.71667 18 3.47933 17.904 3.288 17.712C3.096 17.5207 3 17.2833 3 17C3 16.7167 3.096 16.4793 3.288 16.288C3.47933 16.096 3.71667 16 4 16H20C20.2833 16 20.5207 16.096 20.712 16.288C20.904 16.4793 21 16.7167 21 17C21 17.2833 20.904 17.5207 20.712 17.712C20.5207 17.904 20.2833 18 20 18H4ZM4 13C3.71667 13 3.47933 12.904 3.288 12.712C3.096 12.5207 3 12.2833 3 12C3 11.7167 3.096 11.479 3.288 11.287C3.47933 11.0957 3.71667 11 4 11H20C20.2833 11 20.5207 11.0957 20.712 11.287C20.904 11.479 21 11.7167 21 12C21 12.2833 20.904 12.5207 20.712 12.712C20.5207 12.904 20.2833 13 20 13H4ZM4 8C3.71667 8 3.47933 7.90433 3.288 7.713C3.096 7.521 3 7.28333 3 7C3 6.71667 3.096 6.479 3.288 6.287C3.47933 6.09567 3.71667 6 4 6H20C20.2833 6 20.5207 6.09567 20.712 6.287C20.904 6.479 21 6.71667 21 7C21 7.28333 20.904 7.521 20.712 7.713C20.5207 7.90433 20.2833 8 20 8H4Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M4.66667 21C4.33611 21 4.05922 20.888 3.836 20.664C3.612 20.4408 3.5 20.1639 3.5 19.8333C3.5 19.5028 3.612 19.2259 3.836 19.0027C4.05922 18.7787 4.33611 18.6667 4.66667 18.6667H23.3333C23.6639 18.6667 23.9408 18.7787 24.164 19.0027C24.388 19.2259 24.5 19.5028 24.5 19.8333C24.5 20.1639 24.388 20.4408 24.164 20.664C23.9408 20.888 23.6639 21 23.3333 21H4.66667ZM4.66667 15.1667C4.33611 15.1667 4.05922 15.0547 3.836 14.8307C3.612 14.6074 3.5 14.3306 3.5 14C3.5 13.6694 3.612 13.3922 3.836 13.1682C4.05922 12.9449 4.33611 12.8333 4.66667 12.8333H23.3333C23.6639 12.8333 23.9408 12.9449 24.164 13.1682C24.388 13.3922 24.5 13.6694 24.5 14C24.5 14.3306 24.388 14.6074 24.164 14.8307C23.9408 15.0547 23.6639 15.1667 23.3333 15.1667H4.66667ZM4.66667 9.33333C4.33611 9.33333 4.05922 9.22172 3.836 8.9985C3.612 8.7745 3.5 8.49722 3.5 8.16667C3.5 7.83611 3.612 7.55883 3.836 7.33483C4.05922 7.11161 4.33611 7 4.66667 7H23.3333C23.6639 7 23.9408 7.11161 24.164 7.33483C24.388 7.55883 24.5 7.83611 24.5 8.16667C24.5 8.49722 24.388 8.7745 24.164 8.9985C23.9408 9.22172 23.6639 9.33333 23.3333 9.33333H4.66667Z", fill: "currentColor" })))));
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M2.66667 12C2.47778 12 2.31956 11.936 2.192 11.808C2.064 11.6804 2 11.5222 2 11.3333C2 11.1444 2.064 10.9862 2.192 10.8587C2.31956 10.7307 2.47778 10.6667 2.66667 10.6667H13.3333C13.5222 10.6667 13.6804 10.7307 13.808 10.8587C13.936 10.9862 14 11.1444 14 11.3333C14 11.5222 13.936 11.6804 13.808 11.808C13.6804 11.936 13.5222 12 13.3333 12H2.66667ZM2.66667 8.66667C2.47778 8.66667 2.31956 8.60267 2.192 8.47467C2.064 8.34711 2 8.18889 2 8C2 7.81111 2.064 7.65267 2.192 7.52467C2.31956 7.39711 2.47778 7.33333 2.66667 7.33333H13.3333C13.5222 7.33333 13.6804 7.39711 13.808 7.52467C13.936 7.65267 14 7.81111 14 8C14 8.18889 13.936 8.34711 13.808 8.47467C13.6804 8.60267 13.5222 8.66667 13.3333 8.66667H2.66667ZM2.66667 5.33333C2.47778 5.33333 2.31956 5.26956 2.192 5.142C2.064 5.014 2 4.85556 2 4.66667C2 4.47778 2.064 4.31933 2.192 4.19133C2.31956 4.06378 2.47778 4 2.66667 4H13.3333C13.5222 4 13.6804 4.06378 13.808 4.19133C13.936 4.31933 14 4.47778 14 4.66667C14 4.85556 13.936 5.014 13.808 5.142C13.6804 5.26956 13.5222 5.33333 13.3333 5.33333H2.66667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M4 18C3.71667 18 3.47933 17.904 3.288 17.712C3.096 17.5207 3 17.2833 3 17C3 16.7167 3.096 16.4793 3.288 16.288C3.47933 16.096 3.71667 16 4 16H20C20.2833 16 20.5207 16.096 20.712 16.288C20.904 16.4793 21 16.7167 21 17C21 17.2833 20.904 17.5207 20.712 17.712C20.5207 17.904 20.2833 18 20 18H4ZM4 13C3.71667 13 3.47933 12.904 3.288 12.712C3.096 12.5207 3 12.2833 3 12C3 11.7167 3.096 11.479 3.288 11.287C3.47933 11.0957 3.71667 11 4 11H20C20.2833 11 20.5207 11.0957 20.712 11.287C20.904 11.479 21 11.7167 21 12C21 12.2833 20.904 12.5207 20.712 12.712C20.5207 12.904 20.2833 13 20 13H4ZM4 8C3.71667 8 3.47933 7.90433 3.288 7.713C3.096 7.521 3 7.28333 3 7C3 6.71667 3.096 6.479 3.288 6.287C3.47933 6.09567 3.71667 6 4 6H20C20.2833 6 20.5207 6.09567 20.712 6.287C20.904 6.479 21 6.71667 21 7C21 7.28333 20.904 7.521 20.712 7.713C20.5207 7.90433 20.2833 8 20 8H4Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M4.66667 21C4.33611 21 4.05922 20.888 3.836 20.664C3.612 20.4408 3.5 20.1639 3.5 19.8333C3.5 19.5028 3.612 19.2259 3.836 19.0027C4.05922 18.7787 4.33611 18.6667 4.66667 18.6667H23.3333C23.6639 18.6667 23.9408 18.7787 24.164 19.0027C24.388 19.2259 24.5 19.5028 24.5 19.8333C24.5 20.1639 24.388 20.4408 24.164 20.664C23.9408 20.888 23.6639 21 23.3333 21H4.66667ZM4.66667 15.1667C4.33611 15.1667 4.05922 15.0547 3.836 14.8307C3.612 14.6074 3.5 14.3306 3.5 14C3.5 13.6694 3.612 13.3922 3.836 13.1682C4.05922 12.9449 4.33611 12.8333 4.66667 12.8333H23.3333C23.6639 12.8333 23.9408 12.9449 24.164 13.1682C24.388 13.3922 24.5 13.6694 24.5 14C24.5 14.3306 24.388 14.6074 24.164 14.8307C23.9408 15.0547 23.6639 15.1667 23.3333 15.1667H4.66667ZM4.66667 9.33333C4.33611 9.33333 4.05922 9.22172 3.836 8.9985C3.612 8.7745 3.5 8.49722 3.5 8.16667C3.5 7.83611 3.612 7.55883 3.836 7.33483C4.05922 7.11161 4.33611 7 4.66667 7H23.3333C23.6639 7 23.9408 7.11161 24.164 7.33483C24.388 7.55883 24.5 7.83611 24.5 8.16667C24.5 8.49722 24.388 8.7745 24.164 8.9985C23.9408 9.22172 23.6639 9.33333 23.3333 9.33333H4.66667Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-menu"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconMenu {
   }
   static get properties() {
     return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconColor",
+          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "references": {
+            "SwirlIconColor": {
+              "location": "import",
+              "path": "../swirl-icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
       "size": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/swirl-icon/icons/swirl-icon-message.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconMessage {
   constructor() {
+    this.color = undefined;
     this.size = 24;
   }
   render() {
     const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const styles = {
+      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+    };
     const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M4.66665 9.33325H8.68331C8.8722 9.33325 9.02776 9.26925 9.14998 9.14125C9.2722 9.0137 9.33331 8.85547 9.33331 8.66659C9.33331 8.4777 9.26953 8.31925 9.14198 8.19125C9.01398 8.0637 8.85553 7.99992 8.66665 7.99992H4.64998C4.46109 7.99992 4.30554 8.0637 4.18331 8.19125C4.06109 8.31925 3.99998 8.4777 3.99998 8.66659C3.99998 8.85547 4.06376 9.0137 4.19131 9.14125C4.31931 9.26925 4.47776 9.33325 4.66665 9.33325ZM4.66665 7.33325H11.35C11.5389 7.33325 11.6944 7.26925 11.8166 7.14125C11.9389 7.0137 12 6.85547 12 6.66659C12 6.4777 11.936 6.31925 11.808 6.19125C11.6804 6.0637 11.5222 5.99992 11.3333 5.99992H4.64998C4.46109 5.99992 4.30554 6.0637 4.18331 6.19125C4.06109 6.31925 3.99998 6.4777 3.99998 6.66659C3.99998 6.85547 4.06376 7.0137 4.19131 7.14125C4.31931 7.26925 4.47776 7.33325 4.66665 7.33325ZM4.66665 5.33325H11.35C11.5389 5.33325 11.6944 5.26947 11.8166 5.14192C11.9389 5.01392 12 4.85547 12 4.66659C12 4.4777 11.936 4.31925 11.808 4.19125C11.6804 4.0637 11.5222 3.99992 11.3333 3.99992H4.64998C4.46109 3.99992 4.30554 4.0637 4.18331 4.19125C4.06109 4.31925 3.99998 4.4777 3.99998 4.66659C3.99998 4.85547 4.06376 5.01392 4.19131 5.14192C4.31931 5.26947 4.47776 5.33325 4.66665 5.33325ZM1.33331 13.0499V2.66659C1.33331 2.29992 1.46398 1.98592 1.72531 1.72459C1.9862 1.4637 2.29998 1.33325 2.66665 1.33325H13.3333C13.7 1.33325 14.014 1.4637 14.2753 1.72459C14.5362 1.98592 14.6666 2.29992 14.6666 2.66659V10.6666C14.6666 11.0333 14.5362 11.3473 14.2753 11.6086C14.014 11.8695 13.7 11.9999 13.3333 11.9999H3.99998L2.46665 13.5333C2.25554 13.7444 2.01376 13.7915 1.74131 13.6746C1.46931 13.5581 1.33331 13.3499 1.33331 13.0499ZM2.66665 11.4499L3.44998 10.6666H13.3333V2.66659H2.66665V11.4499Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M7 14H13.025C13.3083 14 13.5417 13.904 13.725 13.712C13.9083 13.5207 14 13.2833 14 13C14 12.7167 13.9043 12.479 13.713 12.287C13.521 12.0957 13.2833 12 13 12H6.975C6.69167 12 6.45833 12.0957 6.275 12.287C6.09167 12.479 6 12.7167 6 13C6 13.2833 6.09567 13.5207 6.287 13.712C6.479 13.904 6.71667 14 7 14ZM7 11H17.025C17.3083 11 17.5417 10.904 17.725 10.712C17.9083 10.5207 18 10.2833 18 10C18 9.71667 17.904 9.479 17.712 9.287C17.5207 9.09567 17.2833 9 17 9H6.975C6.69167 9 6.45833 9.09567 6.275 9.287C6.09167 9.479 6 9.71667 6 10C6 10.2833 6.09567 10.5207 6.287 10.712C6.479 10.904 6.71667 11 7 11ZM7 8H17.025C17.3083 8 17.5417 7.90433 17.725 7.713C17.9083 7.521 18 7.28333 18 7C18 6.71667 17.904 6.479 17.712 6.287C17.5207 6.09567 17.2833 6 17 6H6.975C6.69167 6 6.45833 6.09567 6.275 6.287C6.09167 6.479 6 6.71667 6 7C6 7.28333 6.09567 7.521 6.287 7.713C6.479 7.90433 6.71667 8 7 8ZM2 19.575V4C2 3.45 2.196 2.979 2.588 2.587C2.97933 2.19567 3.45 2 4 2H20C20.55 2 21.021 2.19567 21.413 2.587C21.8043 2.979 22 3.45 22 4V16C22 16.55 21.8043 17.021 21.413 17.413C21.021 17.8043 20.55 18 20 18H6L3.7 20.3C3.38333 20.6167 3.02067 20.6873 2.612 20.512C2.204 20.3373 2 20.025 2 19.575ZM4 17.175L5.175 16H20V4H4V17.175Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M8.16665 16.3333H15.1958C15.5264 16.3333 15.7986 16.2213 16.0125 15.9973C16.2264 15.774 16.3333 15.4971 16.3333 15.1666C16.3333 14.836 16.2217 14.5588 15.9985 14.3348C15.7745 14.1115 15.4972 13.9999 15.1666 13.9999H8.13748C7.80692 13.9999 7.5347 14.1115 7.32081 14.3348C7.10692 14.5588 6.99998 14.836 6.99998 15.1666C6.99998 15.4971 7.11159 15.774 7.33481 15.9973C7.55881 16.2213 7.83609 16.3333 8.16665 16.3333ZM8.16665 12.8333H19.8625C20.193 12.8333 20.4653 12.7213 20.6791 12.4973C20.893 12.274 21 11.9971 21 11.6666C21 11.336 20.888 11.0588 20.664 10.8348C20.4408 10.6115 20.1639 10.4999 19.8333 10.4999H8.13748C7.80692 10.4999 7.5347 10.6115 7.32081 10.8348C7.10692 11.0588 6.99998 11.336 6.99998 11.6666C6.99998 11.9971 7.11159 12.274 7.33481 12.4973C7.55881 12.7213 7.83609 12.8333 8.16665 12.8333ZM8.16665 9.33325H19.8625C20.193 9.33325 20.4653 9.22164 20.6791 8.99842C20.893 8.77442 21 8.49714 21 8.16659C21 7.83603 20.888 7.55875 20.664 7.33475C20.4408 7.11153 20.1639 6.99992 19.8333 6.99992H8.13748C7.80692 6.99992 7.5347 7.11153 7.32081 7.33475C7.10692 7.55875 6.99998 7.83603 6.99998 8.16659C6.99998 8.49714 7.11159 8.77442 7.33481 8.99842C7.55881 9.22164 7.83609 9.33325 8.16665 9.33325ZM2.33331 22.8374V4.66659C2.33331 4.02492 2.56198 3.47542 3.01931 3.01809C3.47587 2.56153 4.02498 2.33325 4.66665 2.33325H23.3333C23.975 2.33325 24.5245 2.56153 24.9818 3.01809C25.4384 3.47542 25.6666 4.02492 25.6666 4.66659V18.6666C25.6666 19.3083 25.4384 19.8578 24.9818 20.3151C24.5245 20.7716 23.975 20.9999 23.3333 20.9999H6.99998L4.31665 23.6833C3.9472 24.0527 3.52409 24.1351 3.04731 23.9306C2.57131 23.7268 2.33331 23.3624 2.33331 22.8374ZM4.66665 20.0374L6.03748 18.6666H23.3333V4.66659H4.66665V20.0374Z", fill: "currentColor" })))));
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M4.66665 9.33325H8.68331C8.8722 9.33325 9.02776 9.26925 9.14998 9.14125C9.2722 9.0137 9.33331 8.85547 9.33331 8.66659C9.33331 8.4777 9.26953 8.31925 9.14198 8.19125C9.01398 8.0637 8.85553 7.99992 8.66665 7.99992H4.64998C4.46109 7.99992 4.30554 8.0637 4.18331 8.19125C4.06109 8.31925 3.99998 8.4777 3.99998 8.66659C3.99998 8.85547 4.06376 9.0137 4.19131 9.14125C4.31931 9.26925 4.47776 9.33325 4.66665 9.33325ZM4.66665 7.33325H11.35C11.5389 7.33325 11.6944 7.26925 11.8166 7.14125C11.9389 7.0137 12 6.85547 12 6.66659C12 6.4777 11.936 6.31925 11.808 6.19125C11.6804 6.0637 11.5222 5.99992 11.3333 5.99992H4.64998C4.46109 5.99992 4.30554 6.0637 4.18331 6.19125C4.06109 6.31925 3.99998 6.4777 3.99998 6.66659C3.99998 6.85547 4.06376 7.0137 4.19131 7.14125C4.31931 7.26925 4.47776 7.33325 4.66665 7.33325ZM4.66665 5.33325H11.35C11.5389 5.33325 11.6944 5.26947 11.8166 5.14192C11.9389 5.01392 12 4.85547 12 4.66659C12 4.4777 11.936 4.31925 11.808 4.19125C11.6804 4.0637 11.5222 3.99992 11.3333 3.99992H4.64998C4.46109 3.99992 4.30554 4.0637 4.18331 4.19125C4.06109 4.31925 3.99998 4.4777 3.99998 4.66659C3.99998 4.85547 4.06376 5.01392 4.19131 5.14192C4.31931 5.26947 4.47776 5.33325 4.66665 5.33325ZM1.33331 13.0499V2.66659C1.33331 2.29992 1.46398 1.98592 1.72531 1.72459C1.9862 1.4637 2.29998 1.33325 2.66665 1.33325H13.3333C13.7 1.33325 14.014 1.4637 14.2753 1.72459C14.5362 1.98592 14.6666 2.29992 14.6666 2.66659V10.6666C14.6666 11.0333 14.5362 11.3473 14.2753 11.6086C14.014 11.8695 13.7 11.9999 13.3333 11.9999H3.99998L2.46665 13.5333C2.25554 13.7444 2.01376 13.7915 1.74131 13.6746C1.46931 13.5581 1.33331 13.3499 1.33331 13.0499ZM2.66665 11.4499L3.44998 10.6666H13.3333V2.66659H2.66665V11.4499Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M7 14H13.025C13.3083 14 13.5417 13.904 13.725 13.712C13.9083 13.5207 14 13.2833 14 13C14 12.7167 13.9043 12.479 13.713 12.287C13.521 12.0957 13.2833 12 13 12H6.975C6.69167 12 6.45833 12.0957 6.275 12.287C6.09167 12.479 6 12.7167 6 13C6 13.2833 6.09567 13.5207 6.287 13.712C6.479 13.904 6.71667 14 7 14ZM7 11H17.025C17.3083 11 17.5417 10.904 17.725 10.712C17.9083 10.5207 18 10.2833 18 10C18 9.71667 17.904 9.479 17.712 9.287C17.5207 9.09567 17.2833 9 17 9H6.975C6.69167 9 6.45833 9.09567 6.275 9.287C6.09167 9.479 6 9.71667 6 10C6 10.2833 6.09567 10.5207 6.287 10.712C6.479 10.904 6.71667 11 7 11ZM7 8H17.025C17.3083 8 17.5417 7.90433 17.725 7.713C17.9083 7.521 18 7.28333 18 7C18 6.71667 17.904 6.479 17.712 6.287C17.5207 6.09567 17.2833 6 17 6H6.975C6.69167 6 6.45833 6.09567 6.275 6.287C6.09167 6.479 6 6.71667 6 7C6 7.28333 6.09567 7.521 6.287 7.713C6.479 7.90433 6.71667 8 7 8ZM2 19.575V4C2 3.45 2.196 2.979 2.588 2.587C2.97933 2.19567 3.45 2 4 2H20C20.55 2 21.021 2.19567 21.413 2.587C21.8043 2.979 22 3.45 22 4V16C22 16.55 21.8043 17.021 21.413 17.413C21.021 17.8043 20.55 18 20 18H6L3.7 20.3C3.38333 20.6167 3.02067 20.6873 2.612 20.512C2.204 20.3373 2 20.025 2 19.575ZM4 17.175L5.175 16H20V4H4V17.175Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M8.16665 16.3333H15.1958C15.5264 16.3333 15.7986 16.2213 16.0125 15.9973C16.2264 15.774 16.3333 15.4971 16.3333 15.1666C16.3333 14.836 16.2217 14.5588 15.9985 14.3348C15.7745 14.1115 15.4972 13.9999 15.1666 13.9999H8.13748C7.80692 13.9999 7.5347 14.1115 7.32081 14.3348C7.10692 14.5588 6.99998 14.836 6.99998 15.1666C6.99998 15.4971 7.11159 15.774 7.33481 15.9973C7.55881 16.2213 7.83609 16.3333 8.16665 16.3333ZM8.16665 12.8333H19.8625C20.193 12.8333 20.4653 12.7213 20.6791 12.4973C20.893 12.274 21 11.9971 21 11.6666C21 11.336 20.888 11.0588 20.664 10.8348C20.4408 10.6115 20.1639 10.4999 19.8333 10.4999H8.13748C7.80692 10.4999 7.5347 10.6115 7.32081 10.8348C7.10692 11.0588 6.99998 11.336 6.99998 11.6666C6.99998 11.9971 7.11159 12.274 7.33481 12.4973C7.55881 12.7213 7.83609 12.8333 8.16665 12.8333ZM8.16665 9.33325H19.8625C20.193 9.33325 20.4653 9.22164 20.6791 8.99842C20.893 8.77442 21 8.49714 21 8.16659C21 7.83603 20.888 7.55875 20.664 7.33475C20.4408 7.11153 20.1639 6.99992 19.8333 6.99992H8.13748C7.80692 6.99992 7.5347 7.11153 7.32081 7.33475C7.10692 7.55875 6.99998 7.83603 6.99998 8.16659C6.99998 8.49714 7.11159 8.77442 7.33481 8.99842C7.55881 9.22164 7.83609 9.33325 8.16665 9.33325ZM2.33331 22.8374V4.66659C2.33331 4.02492 2.56198 3.47542 3.01931 3.01809C3.47587 2.56153 4.02498 2.33325 4.66665 2.33325H23.3333C23.975 2.33325 24.5245 2.56153 24.9818 3.01809C25.4384 3.47542 25.6666 4.02492 25.6666 4.66659V18.6666C25.6666 19.3083 25.4384 19.8578 24.9818 20.3151C24.5245 20.7716 23.975 20.9999 23.3333 20.9999H6.99998L4.31665 23.6833C3.9472 24.0527 3.52409 24.1351 3.04731 23.9306C2.57131 23.7268 2.33331 23.3624 2.33331 22.8374ZM4.66665 20.0374L6.03748 18.6666H23.3333V4.66659H4.66665V20.0374Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-message"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconMessage {
   }
   static get properties() {
     return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconColor",
+          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "references": {
+            "SwirlIconColor": {
+              "location": "import",
+              "path": "../swirl-icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
       "size": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/swirl-icon/icons/swirl-icon-mic.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconMic {
   constructor() {
+    this.color = undefined;
     this.size = 24;
   }
   render() {
     const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const styles = {
+      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+    };
     const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M8.00002 9.33337C7.44446 9.33337 6.97224 9.13893 6.58335 8.75004C6.19446 8.36115 6.00002 7.88893 6.00002 7.33337V3.33337C6.00002 2.77782 6.19446 2.3056 6.58335 1.91671C6.97224 1.52782 7.44446 1.33337 8.00002 1.33337C8.55557 1.33337 9.0278 1.52782 9.41669 1.91671C9.80557 2.3056 10 2.77782 10 3.33337V7.33337C10 7.88893 9.80557 8.36115 9.41669 8.75004C9.0278 9.13893 8.55557 9.33337 8.00002 9.33337ZM8.00002 14C7.81113 14 7.65291 13.936 7.52535 13.808C7.39735 13.6805 7.33335 13.5223 7.33335 13.3334V11.95C6.30002 11.8056 5.42224 11.3723 4.70002 10.65C3.9778 9.92782 3.53891 9.06115 3.38335 8.05004C3.35002 7.86115 3.40002 7.69449 3.53335 7.55004C3.66669 7.4056 3.84446 7.33337 4.06669 7.33337C4.22224 7.33337 4.36113 7.3916 4.48335 7.50804C4.60557 7.62493 4.68335 7.76671 4.71669 7.93337C4.86113 8.71115 5.23891 9.36115 5.85002 9.88337C6.46113 10.4056 7.1778 10.6667 8.00002 10.6667C8.82224 10.6667 9.53891 10.4056 10.15 9.88337C10.7611 9.36115 11.1389 8.71115 11.2834 7.93337C11.3167 7.76671 11.3974 7.62493 11.5254 7.50804C11.6529 7.3916 11.7945 7.33337 11.95 7.33337C12.1611 7.33337 12.3334 7.4056 12.4667 7.55004C12.6 7.69449 12.65 7.86115 12.6167 8.05004C12.4611 9.06115 12.0222 9.92782 11.3 10.65C10.5778 11.3723 9.70002 11.8056 8.66669 11.95V13.3334C8.66669 13.5223 8.60291 13.6805 8.47535 13.808C8.34735 13.936 8.18891 14 8.00002 14ZM8.00002 8.00004C8.18891 8.00004 8.34735 7.93604 8.47535 7.80804C8.60291 7.68049 8.66669 7.52226 8.66669 7.33337V3.33337C8.66669 3.14449 8.60291 2.98604 8.47535 2.85804C8.34735 2.73049 8.18891 2.66671 8.00002 2.66671C7.81113 2.66671 7.65291 2.73049 7.52535 2.85804C7.39735 2.98604 7.33335 3.14449 7.33335 3.33337V7.33337C7.33335 7.52226 7.39735 7.68049 7.52535 7.80804C7.65291 7.93604 7.81113 8.00004 8.00002 8.00004Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 14C11.1667 14 10.4583 13.7083 9.875 13.125C9.29166 12.5417 9 11.8333 9 11V5C9 4.16667 9.29166 3.45833 9.875 2.875C10.4583 2.29167 11.1667 2 12 2C12.8333 2 13.5417 2.29167 14.125 2.875C14.7083 3.45833 15 4.16667 15 5V11C15 11.8333 14.7083 12.5417 14.125 13.125C13.5417 13.7083 12.8333 14 12 14ZM12 21C11.7167 21 11.4793 20.904 11.288 20.712C11.096 20.5207 11 20.2833 11 20V17.925C9.45 17.7083 8.13333 17.0583 7.05 15.975C5.96666 14.8917 5.30833 13.5917 5.075 12.075C5.025 11.7917 5.1 11.5417 5.3 11.325C5.5 11.1083 5.76666 11 6.1 11C6.33333 11 6.54166 11.0873 6.725 11.262C6.90833 11.4373 7.025 11.65 7.075 11.9C7.29166 13.0667 7.85833 14.0417 8.775 14.825C9.69166 15.6083 10.7667 16 12 16C13.2333 16 14.3083 15.6083 15.225 14.825C16.1417 14.0417 16.7083 13.0667 16.925 11.9C16.975 11.65 17.096 11.4373 17.288 11.262C17.4793 11.0873 17.6917 11 17.925 11C18.2417 11 18.5 11.1083 18.7 11.325C18.9 11.5417 18.975 11.7917 18.925 12.075C18.6917 13.5917 18.0333 14.8917 16.95 15.975C15.8667 17.0583 14.55 17.7083 13 17.925V20C13 20.2833 12.9043 20.5207 12.713 20.712C12.521 20.904 12.2833 21 12 21ZM12 12C12.2833 12 12.521 11.904 12.713 11.712C12.9043 11.5207 13 11.2833 13 11V5C13 4.71667 12.9043 4.479 12.713 4.287C12.521 4.09567 12.2833 4 12 4C11.7167 4 11.4793 4.09567 11.288 4.287C11.096 4.479 11 4.71667 11 5V11C11 11.2833 11.096 11.5207 11.288 11.712C11.4793 11.904 11.7167 12 12 12Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 16.3334C13.0278 16.3334 12.2014 15.9931 11.5208 15.3125C10.8403 14.632 10.5 13.8056 10.5 12.8334V5.83337C10.5 4.86115 10.8403 4.03476 11.5208 3.35421C12.2014 2.67365 13.0278 2.33337 14 2.33337C14.9722 2.33337 15.7986 2.67365 16.4792 3.35421C17.1597 4.03476 17.5 4.86115 17.5 5.83337V12.8334C17.5 13.8056 17.1597 14.632 16.4792 15.3125C15.7986 15.9931 14.9722 16.3334 14 16.3334ZM14 24.5C13.6694 24.5 13.3925 24.388 13.1693 24.164C12.9453 23.9408 12.8333 23.6639 12.8333 23.3334V20.9125C11.025 20.6598 9.48888 19.9014 8.22499 18.6375C6.9611 17.3737 6.19304 15.857 5.92082 14.0875C5.86249 13.757 5.94999 13.4653 6.18332 13.2125C6.41665 12.9598 6.72776 12.8334 7.11665 12.8334C7.38888 12.8334 7.63193 12.9353 7.84582 13.139C8.05971 13.3436 8.19582 13.5917 8.25415 13.8834C8.50693 15.2445 9.16804 16.382 10.2375 17.2959C11.3069 18.2098 12.5611 18.6667 14 18.6667C15.4389 18.6667 16.693 18.2098 17.7625 17.2959C18.8319 16.382 19.493 15.2445 19.7458 13.8834C19.8042 13.5917 19.9453 13.3436 20.1693 13.139C20.3925 12.9353 20.6403 12.8334 20.9125 12.8334C21.2819 12.8334 21.5833 12.9598 21.8167 13.2125C22.05 13.4653 22.1375 13.757 22.0792 14.0875C21.8069 15.857 21.0389 17.3737 19.775 18.6375C18.5111 19.9014 16.975 20.6598 15.1667 20.9125V23.3334C15.1667 23.6639 15.055 23.9408 14.8318 24.164C14.6078 24.388 14.3305 24.5 14 24.5ZM14 14C14.3305 14 14.6078 13.888 14.8318 13.664C15.055 13.4408 15.1667 13.1639 15.1667 12.8334V5.83337C15.1667 5.50282 15.055 5.22554 14.8318 5.00154C14.6078 4.77832 14.3305 4.66671 14 4.66671C13.6694 4.66671 13.3925 4.77832 13.1693 5.00154C12.9453 5.22554 12.8333 5.50282 12.8333 5.83337V12.8334C12.8333 13.1639 12.9453 13.4408 13.1693 13.664C13.3925 13.888 13.6694 14 14 14Z", fill: "currentColor" })))));
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M8.00002 9.33337C7.44446 9.33337 6.97224 9.13893 6.58335 8.75004C6.19446 8.36115 6.00002 7.88893 6.00002 7.33337V3.33337C6.00002 2.77782 6.19446 2.3056 6.58335 1.91671C6.97224 1.52782 7.44446 1.33337 8.00002 1.33337C8.55557 1.33337 9.0278 1.52782 9.41669 1.91671C9.80557 2.3056 10 2.77782 10 3.33337V7.33337C10 7.88893 9.80557 8.36115 9.41669 8.75004C9.0278 9.13893 8.55557 9.33337 8.00002 9.33337ZM8.00002 14C7.81113 14 7.65291 13.936 7.52535 13.808C7.39735 13.6805 7.33335 13.5223 7.33335 13.3334V11.95C6.30002 11.8056 5.42224 11.3723 4.70002 10.65C3.9778 9.92782 3.53891 9.06115 3.38335 8.05004C3.35002 7.86115 3.40002 7.69449 3.53335 7.55004C3.66669 7.4056 3.84446 7.33337 4.06669 7.33337C4.22224 7.33337 4.36113 7.3916 4.48335 7.50804C4.60557 7.62493 4.68335 7.76671 4.71669 7.93337C4.86113 8.71115 5.23891 9.36115 5.85002 9.88337C6.46113 10.4056 7.1778 10.6667 8.00002 10.6667C8.82224 10.6667 9.53891 10.4056 10.15 9.88337C10.7611 9.36115 11.1389 8.71115 11.2834 7.93337C11.3167 7.76671 11.3974 7.62493 11.5254 7.50804C11.6529 7.3916 11.7945 7.33337 11.95 7.33337C12.1611 7.33337 12.3334 7.4056 12.4667 7.55004C12.6 7.69449 12.65 7.86115 12.6167 8.05004C12.4611 9.06115 12.0222 9.92782 11.3 10.65C10.5778 11.3723 9.70002 11.8056 8.66669 11.95V13.3334C8.66669 13.5223 8.60291 13.6805 8.47535 13.808C8.34735 13.936 8.18891 14 8.00002 14ZM8.00002 8.00004C8.18891 8.00004 8.34735 7.93604 8.47535 7.80804C8.60291 7.68049 8.66669 7.52226 8.66669 7.33337V3.33337C8.66669 3.14449 8.60291 2.98604 8.47535 2.85804C8.34735 2.73049 8.18891 2.66671 8.00002 2.66671C7.81113 2.66671 7.65291 2.73049 7.52535 2.85804C7.39735 2.98604 7.33335 3.14449 7.33335 3.33337V7.33337C7.33335 7.52226 7.39735 7.68049 7.52535 7.80804C7.65291 7.93604 7.81113 8.00004 8.00002 8.00004Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 14C11.1667 14 10.4583 13.7083 9.875 13.125C9.29166 12.5417 9 11.8333 9 11V5C9 4.16667 9.29166 3.45833 9.875 2.875C10.4583 2.29167 11.1667 2 12 2C12.8333 2 13.5417 2.29167 14.125 2.875C14.7083 3.45833 15 4.16667 15 5V11C15 11.8333 14.7083 12.5417 14.125 13.125C13.5417 13.7083 12.8333 14 12 14ZM12 21C11.7167 21 11.4793 20.904 11.288 20.712C11.096 20.5207 11 20.2833 11 20V17.925C9.45 17.7083 8.13333 17.0583 7.05 15.975C5.96666 14.8917 5.30833 13.5917 5.075 12.075C5.025 11.7917 5.1 11.5417 5.3 11.325C5.5 11.1083 5.76666 11 6.1 11C6.33333 11 6.54166 11.0873 6.725 11.262C6.90833 11.4373 7.025 11.65 7.075 11.9C7.29166 13.0667 7.85833 14.0417 8.775 14.825C9.69166 15.6083 10.7667 16 12 16C13.2333 16 14.3083 15.6083 15.225 14.825C16.1417 14.0417 16.7083 13.0667 16.925 11.9C16.975 11.65 17.096 11.4373 17.288 11.262C17.4793 11.0873 17.6917 11 17.925 11C18.2417 11 18.5 11.1083 18.7 11.325C18.9 11.5417 18.975 11.7917 18.925 12.075C18.6917 13.5917 18.0333 14.8917 16.95 15.975C15.8667 17.0583 14.55 17.7083 13 17.925V20C13 20.2833 12.9043 20.5207 12.713 20.712C12.521 20.904 12.2833 21 12 21ZM12 12C12.2833 12 12.521 11.904 12.713 11.712C12.9043 11.5207 13 11.2833 13 11V5C13 4.71667 12.9043 4.479 12.713 4.287C12.521 4.09567 12.2833 4 12 4C11.7167 4 11.4793 4.09567 11.288 4.287C11.096 4.479 11 4.71667 11 5V11C11 11.2833 11.096 11.5207 11.288 11.712C11.4793 11.904 11.7167 12 12 12Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 16.3334C13.0278 16.3334 12.2014 15.9931 11.5208 15.3125C10.8403 14.632 10.5 13.8056 10.5 12.8334V5.83337C10.5 4.86115 10.8403 4.03476 11.5208 3.35421C12.2014 2.67365 13.0278 2.33337 14 2.33337C14.9722 2.33337 15.7986 2.67365 16.4792 3.35421C17.1597 4.03476 17.5 4.86115 17.5 5.83337V12.8334C17.5 13.8056 17.1597 14.632 16.4792 15.3125C15.7986 15.9931 14.9722 16.3334 14 16.3334ZM14 24.5C13.6694 24.5 13.3925 24.388 13.1693 24.164C12.9453 23.9408 12.8333 23.6639 12.8333 23.3334V20.9125C11.025 20.6598 9.48888 19.9014 8.22499 18.6375C6.9611 17.3737 6.19304 15.857 5.92082 14.0875C5.86249 13.757 5.94999 13.4653 6.18332 13.2125C6.41665 12.9598 6.72776 12.8334 7.11665 12.8334C7.38888 12.8334 7.63193 12.9353 7.84582 13.139C8.05971 13.3436 8.19582 13.5917 8.25415 13.8834C8.50693 15.2445 9.16804 16.382 10.2375 17.2959C11.3069 18.2098 12.5611 18.6667 14 18.6667C15.4389 18.6667 16.693 18.2098 17.7625 17.2959C18.8319 16.382 19.493 15.2445 19.7458 13.8834C19.8042 13.5917 19.9453 13.3436 20.1693 13.139C20.3925 12.9353 20.6403 12.8334 20.9125 12.8334C21.2819 12.8334 21.5833 12.9598 21.8167 13.2125C22.05 13.4653 22.1375 13.757 22.0792 14.0875C21.8069 15.857 21.0389 17.3737 19.775 18.6375C18.5111 19.9014 16.975 20.6598 15.1667 20.9125V23.3334C15.1667 23.6639 15.055 23.9408 14.8318 24.164C14.6078 24.388 14.3305 24.5 14 24.5ZM14 14C14.3305 14 14.6078 13.888 14.8318 13.664C15.055 13.4408 15.1667 13.1639 15.1667 12.8334V5.83337C15.1667 5.50282 15.055 5.22554 14.8318 5.00154C14.6078 4.77832 14.3305 4.66671 14 4.66671C13.6694 4.66671 13.3925 4.77832 13.1693 5.00154C12.9453 5.22554 12.8333 5.50282 12.8333 5.83337V12.8334C12.8333 13.1639 12.9453 13.4408 13.1693 13.664C13.3925 13.888 13.6694 14 14 14Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-mic"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconMic {
   }
   static get properties() {
     return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconColor",
+          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "references": {
+            "SwirlIconColor": {
+              "location": "import",
+              "path": "../swirl-icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
       "size": {
         "type": "number",
         "mutable": false,