@getflip/swirl-components 0.149.0 → 0.150.0

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

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconDirectoryOutlined {
   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: "M0.666626 4C0.666626 3.63181 0.965103 3.33333 1.33329 3.33333C1.70148 3.33333 1.99996 3.63181 1.99996 4V12C1.99996 12.3682 1.70148 12.6667 1.33329 12.6667C0.965103 12.6667 0.666626 12.3682 0.666626 12V4Z", fill: "currentColor" }), h("path", { d: "M4.66663 14C3.56206 14 2.66663 13.1046 2.66663 12V4C2.66663 2.89543 3.56206 2 4.66663 2H12.6666C13.7712 2 14.6666 2.89543 14.6666 4V12C14.6666 13.1046 13.7712 14 12.6666 14H4.66663ZM4.66663 3.33333C4.29844 3.33333 3.99996 3.63181 3.99996 4V12C3.99996 12.3682 4.29844 12.6667 4.66663 12.6667H4.83669C5.67999 11.4577 7.08107 10.6667 8.6669 10.6667C10.2527 10.6667 11.6538 11.4577 12.4971 12.6667H12.6666C13.0348 12.6667 13.3333 12.3682 13.3333 12V4C13.3333 3.63181 13.0348 3.33333 12.6666 3.33333H4.66663ZM6.66621 12.6667H10.6676C10.1098 12.2474 9.41698 12 8.6669 12C7.91681 12 7.22402 12.2474 6.66621 12.6667Z", fill: "currentColor" }), h("path", { d: "M8.66663 8C8.29844 8 7.99996 7.70152 7.99996 7.33333C7.99996 6.96514 8.29844 6.66667 8.66663 6.66667C9.03482 6.66667 9.33329 6.96514 9.33329 7.33333C9.33329 7.70152 9.03482 8 8.66663 8ZM8.66663 9.33333C9.7712 9.33333 10.6666 8.4379 10.6666 7.33333C10.6666 6.22876 9.7712 5.33333 8.66663 5.33333C7.56206 5.33333 6.66663 6.22876 6.66663 7.33333C6.66663 8.4379 7.56206 9.33333 8.66663 9.33333Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M1 6C1 5.44772 1.44772 5 2 5C2.55228 5 3 5.44772 3 6V18C3 18.5523 2.55228 19 2 19C1.44772 19 1 18.5523 1 18V6Z", fill: "currentColor" }), h("path", { d: "M7 21C5.34315 21 4 19.6569 4 18V6C4 4.34315 5.34315 3 7 3H19C20.6569 3 22 4.34315 22 6V18C22 19.6569 20.6569 21 19 21H7ZM7 5C6.44772 5 6 5.44772 6 6V18C6 18.5523 6.44772 19 7 19H7.25509C8.52004 17.1865 10.6217 16 13.0004 16C15.3791 16 17.4808 17.1865 18.7457 19H19C19.5523 19 20 18.5523 20 18V6C20 5.44772 19.5523 5 19 5H7ZM9.99938 19H16.0014C15.1647 18.3712 14.1255 18 13.0004 18C11.8753 18 10.8361 18.3712 9.99938 19Z", fill: "currentColor" }), h("path", { d: "M13 12C12.4477 12 12 11.5523 12 11C12 10.4477 12.4477 10 13 10C13.5523 10 14 10.4477 14 11C14 11.5523 13.5523 12 13 12ZM13 14C14.6569 14 16 12.6569 16 11C16 9.34315 14.6569 8 13 8C11.3431 8 10 9.34315 10 11C10 12.6569 11.3431 14 13 14Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M1.16663 7C1.16663 6.35567 1.68896 5.83333 2.33329 5.83333C2.97762 5.83333 3.49996 6.35567 3.49996 7V21C3.49996 21.6443 2.97762 22.1667 2.33329 22.1667C1.68896 22.1667 1.16663 21.6443 1.16663 21V7Z", fill: "currentColor" }), h("path", { d: "M8.16663 24.5C6.23363 24.5 4.66663 22.933 4.66663 21V7C4.66663 5.067 6.23363 3.5 8.16663 3.5H22.1666C24.0996 3.5 25.6666 5.067 25.6666 7V21C25.6666 22.933 24.0996 24.5 22.1666 24.5H8.16663ZM8.16663 5.83333C7.52229 5.83333 6.99996 6.35567 6.99996 7V21C6.99996 21.6443 7.52229 22.1667 8.16663 22.1667H8.46424C9.94001 20.0509 12.3919 18.6667 15.1671 18.6667C17.9423 18.6667 20.3942 20.0509 21.87 22.1667H22.1666C22.811 22.1667 23.3333 21.6443 23.3333 21V7C23.3333 6.35567 22.811 5.83333 22.1666 5.83333H8.16663ZM11.6659 22.1667H18.6683C17.6921 21.433 16.4798 21 15.1671 21C13.8544 21 12.6421 21.433 11.6659 22.1667Z", fill: "currentColor" }), h("path", { d: "M15.1666 14C14.5223 14 14 13.4777 14 12.8333C14 12.189 14.5223 11.6667 15.1666 11.6667C15.811 11.6667 16.3333 12.189 16.3333 12.8333C16.3333 13.4777 15.811 14 15.1666 14ZM15.1666 16.3333C17.0996 16.3333 18.6666 14.7663 18.6666 12.8333C18.6666 10.9003 17.0996 9.33333 15.1666 9.33333C13.2336 9.33333 11.6666 10.9003 11.6666 12.8333C11.6666 14.7663 13.2336 16.3333 15.1666 16.3333Z", 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: "M0.666626 4C0.666626 3.63181 0.965103 3.33333 1.33329 3.33333C1.70148 3.33333 1.99996 3.63181 1.99996 4V12C1.99996 12.3682 1.70148 12.6667 1.33329 12.6667C0.965103 12.6667 0.666626 12.3682 0.666626 12V4Z", fill: "currentColor" }), h("path", { d: "M4.66663 14C3.56206 14 2.66663 13.1046 2.66663 12V4C2.66663 2.89543 3.56206 2 4.66663 2H12.6666C13.7712 2 14.6666 2.89543 14.6666 4V12C14.6666 13.1046 13.7712 14 12.6666 14H4.66663ZM4.66663 3.33333C4.29844 3.33333 3.99996 3.63181 3.99996 4V12C3.99996 12.3682 4.29844 12.6667 4.66663 12.6667H4.83669C5.67999 11.4577 7.08107 10.6667 8.6669 10.6667C10.2527 10.6667 11.6538 11.4577 12.4971 12.6667H12.6666C13.0348 12.6667 13.3333 12.3682 13.3333 12V4C13.3333 3.63181 13.0348 3.33333 12.6666 3.33333H4.66663ZM6.66621 12.6667H10.6676C10.1098 12.2474 9.41698 12 8.6669 12C7.91681 12 7.22402 12.2474 6.66621 12.6667Z", fill: "currentColor" }), h("path", { d: "M8.66663 8C8.29844 8 7.99996 7.70152 7.99996 7.33333C7.99996 6.96514 8.29844 6.66667 8.66663 6.66667C9.03482 6.66667 9.33329 6.96514 9.33329 7.33333C9.33329 7.70152 9.03482 8 8.66663 8ZM8.66663 9.33333C9.7712 9.33333 10.6666 8.4379 10.6666 7.33333C10.6666 6.22876 9.7712 5.33333 8.66663 5.33333C7.56206 5.33333 6.66663 6.22876 6.66663 7.33333C6.66663 8.4379 7.56206 9.33333 8.66663 9.33333Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M1 6C1 5.44772 1.44772 5 2 5C2.55228 5 3 5.44772 3 6V18C3 18.5523 2.55228 19 2 19C1.44772 19 1 18.5523 1 18V6Z", fill: "currentColor" }), h("path", { d: "M7 21C5.34315 21 4 19.6569 4 18V6C4 4.34315 5.34315 3 7 3H19C20.6569 3 22 4.34315 22 6V18C22 19.6569 20.6569 21 19 21H7ZM7 5C6.44772 5 6 5.44772 6 6V18C6 18.5523 6.44772 19 7 19H7.25509C8.52004 17.1865 10.6217 16 13.0004 16C15.3791 16 17.4808 17.1865 18.7457 19H19C19.5523 19 20 18.5523 20 18V6C20 5.44772 19.5523 5 19 5H7ZM9.99938 19H16.0014C15.1647 18.3712 14.1255 18 13.0004 18C11.8753 18 10.8361 18.3712 9.99938 19Z", fill: "currentColor" }), h("path", { d: "M13 12C12.4477 12 12 11.5523 12 11C12 10.4477 12.4477 10 13 10C13.5523 10 14 10.4477 14 11C14 11.5523 13.5523 12 13 12ZM13 14C14.6569 14 16 12.6569 16 11C16 9.34315 14.6569 8 13 8C11.3431 8 10 9.34315 10 11C10 12.6569 11.3431 14 13 14Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M1.16663 7C1.16663 6.35567 1.68896 5.83333 2.33329 5.83333C2.97762 5.83333 3.49996 6.35567 3.49996 7V21C3.49996 21.6443 2.97762 22.1667 2.33329 22.1667C1.68896 22.1667 1.16663 21.6443 1.16663 21V7Z", fill: "currentColor" }), h("path", { d: "M8.16663 24.5C6.23363 24.5 4.66663 22.933 4.66663 21V7C4.66663 5.067 6.23363 3.5 8.16663 3.5H22.1666C24.0996 3.5 25.6666 5.067 25.6666 7V21C25.6666 22.933 24.0996 24.5 22.1666 24.5H8.16663ZM8.16663 5.83333C7.52229 5.83333 6.99996 6.35567 6.99996 7V21C6.99996 21.6443 7.52229 22.1667 8.16663 22.1667H8.46424C9.94001 20.0509 12.3919 18.6667 15.1671 18.6667C17.9423 18.6667 20.3942 20.0509 21.87 22.1667H22.1666C22.811 22.1667 23.3333 21.6443 23.3333 21V7C23.3333 6.35567 22.811 5.83333 22.1666 5.83333H8.16663ZM11.6659 22.1667H18.6683C17.6921 21.433 16.4798 21 15.1671 21C13.8544 21 12.6421 21.433 11.6659 22.1667Z", fill: "currentColor" }), h("path", { d: "M15.1666 14C14.5223 14 14 13.4777 14 12.8333C14 12.189 14.5223 11.6667 15.1666 11.6667C15.811 11.6667 16.3333 12.189 16.3333 12.8333C16.3333 13.4777 15.811 14 15.1666 14ZM15.1666 16.3333C17.0996 16.3333 18.6666 14.7663 18.6666 12.8333C18.6666 10.9003 17.0996 9.33333 15.1666 9.33333C13.2336 9.33333 11.6666 10.9003 11.6666 12.8333C11.6666 14.7663 13.2336 16.3333 15.1666 16.3333Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-directory-outlined"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconDirectoryOutlined {
   }
   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-discover.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconDiscover {
   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: "M7.99998 8.66658C7.81109 8.66658 7.65276 8.6027 7.52498 8.47492C7.3972 8.34714 7.33331 8.18881 7.33331 7.99992C7.33331 7.81103 7.3972 7.6527 7.52498 7.52492C7.65276 7.39714 7.81109 7.33325 7.99998 7.33325C8.18887 7.33325 8.3472 7.39714 8.47498 7.52492C8.60276 7.6527 8.66665 7.81103 8.66665 7.99992C8.66665 8.18881 8.60276 8.34714 8.47498 8.47492C8.3472 8.6027 8.18887 8.66658 7.99998 8.66658ZM7.99998 14.6666C7.07776 14.6666 6.21109 14.4916 5.39998 14.1416C4.58887 13.7916 3.88331 13.3166 3.28331 12.7166C2.68331 12.1166 2.20831 11.411 1.85831 10.5999C1.50831 9.78881 1.33331 8.92214 1.33331 7.99992C1.33331 7.0777 1.50831 6.21103 1.85831 5.39992C2.20831 4.58881 2.68331 3.88325 3.28331 3.28325C3.88331 2.68325 4.58887 2.20825 5.39998 1.85825C6.21109 1.50825 7.07776 1.33325 7.99998 1.33325C8.9222 1.33325 9.78887 1.50825 10.6 1.85825C11.4111 2.20825 12.1166 2.68325 12.7166 3.28325C13.3166 3.88325 13.7916 4.58881 14.1416 5.39992C14.4916 6.21103 14.6666 7.0777 14.6666 7.99992C14.6666 8.92214 14.4916 9.78881 14.1416 10.5999C13.7916 11.411 13.3166 12.1166 12.7166 12.7166C12.1166 13.3166 11.4111 13.7916 10.6 14.1416C9.78887 14.4916 8.9222 14.6666 7.99998 14.6666ZM7.99998 13.3333C9.48887 13.3333 10.75 12.8166 11.7833 11.7833C12.8166 10.7499 13.3333 9.48881 13.3333 7.99992C13.3333 6.51103 12.8166 5.24992 11.7833 4.21659C10.75 3.18325 9.48887 2.66659 7.99998 2.66659C6.51109 2.66659 5.24998 3.18325 4.21665 4.21659C3.18331 5.24992 2.66665 6.51103 2.66665 7.99992C2.66665 9.48881 3.18331 10.7499 4.21665 11.7833C5.24998 12.8166 6.51109 13.3333 7.99998 13.3333ZM4.94998 11.3833L9.11665 9.43325C9.18331 9.39992 9.24442 9.35547 9.29998 9.29992C9.35553 9.24436 9.39998 9.18325 9.43331 9.11658L11.3833 4.94992C11.4389 4.83881 11.425 4.74159 11.3416 4.65825C11.2583 4.57492 11.1611 4.56103 11.05 4.61659L6.88331 6.56658C6.81665 6.59992 6.75554 6.64436 6.69998 6.69992C6.64442 6.75547 6.59998 6.81658 6.56665 6.88325L4.61665 11.0499C4.56109 11.161 4.57498 11.2583 4.65831 11.3416C4.74165 11.4249 4.83887 11.4388 4.94998 11.3833Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 13C11.7167 13 11.4792 12.9042 11.2875 12.7125C11.0958 12.5208 11 12.2833 11 12C11 11.7167 11.0958 11.4792 11.2875 11.2875C11.4792 11.0958 11.7167 11 12 11C12.2833 11 12.5208 11.0958 12.7125 11.2875C12.9042 11.4792 13 11.7167 13 12C13 12.2833 12.9042 12.5208 12.7125 12.7125C12.5208 12.9042 12.2833 13 12 13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20ZM7.425 17.075L13.675 14.15C13.775 14.1 13.8667 14.0333 13.95 13.95C14.0333 13.8667 14.1 13.775 14.15 13.675L17.075 7.425C17.1583 7.25833 17.1375 7.1125 17.0125 6.9875C16.8875 6.8625 16.7417 6.84167 16.575 6.925L10.325 9.85C10.225 9.9 10.1333 9.96667 10.05 10.05C9.96667 10.1333 9.9 10.225 9.85 10.325L6.925 16.575C6.84167 16.7417 6.8625 16.8875 6.9875 17.0125C7.1125 17.1375 7.25833 17.1583 7.425 17.075Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 15.1666C13.6694 15.1666 13.3923 15.0548 13.1687 14.8312C12.9451 14.6076 12.8333 14.3305 12.8333 13.9999C12.8333 13.6694 12.9451 13.3923 13.1687 13.1687C13.3923 12.9451 13.6694 12.8333 14 12.8333C14.3305 12.8333 14.6076 12.9451 14.8312 13.1687C15.0548 13.3923 15.1666 13.6694 15.1666 13.9999C15.1666 14.3305 15.0548 14.6076 14.8312 14.8312C14.6076 15.0548 14.3305 15.1666 14 15.1666ZM14 25.6666C12.3861 25.6666 10.8694 25.3603 9.44998 24.7478C8.03054 24.1353 6.79581 23.3041 5.74581 22.2541C4.69581 21.2041 3.86456 19.9694 3.25206 18.5499C2.63956 17.1305 2.33331 15.6138 2.33331 13.9999C2.33331 12.386 2.63956 10.8694 3.25206 9.44992C3.86456 8.03047 4.69581 6.79575 5.74581 5.74575C6.79581 4.69575 8.03054 3.8645 9.44998 3.252C10.8694 2.6395 12.3861 2.33325 14 2.33325C15.6139 2.33325 17.1305 2.6395 18.55 3.252C19.9694 3.8645 21.2041 4.69575 22.2541 5.74575C23.3041 6.79575 24.1354 8.03047 24.7479 9.44992C25.3604 10.8694 25.6666 12.386 25.6666 13.9999C25.6666 15.6138 25.3604 17.1305 24.7479 18.5499C24.1354 19.9694 23.3041 21.2041 22.2541 22.2541C21.2041 23.3041 19.9694 24.1353 18.55 24.7478C17.1305 25.3603 15.6139 25.6666 14 25.6666ZM14 23.3333C16.6055 23.3333 18.8125 22.4291 20.6208 20.6208C22.4291 18.8124 23.3333 16.6055 23.3333 13.9999C23.3333 11.3944 22.4291 9.18742 20.6208 7.37909C18.8125 5.57075 16.6055 4.66659 14 4.66659C11.3944 4.66659 9.18748 5.57075 7.37915 7.37909C5.57081 9.18742 4.66665 11.3944 4.66665 13.9999C4.66665 16.6055 5.57081 18.8124 7.37915 20.6208C9.18748 22.4291 11.3944 23.3333 14 23.3333ZM8.66248 19.9208L15.9541 16.5083C16.0708 16.4499 16.1778 16.3721 16.275 16.2749C16.3722 16.1777 16.45 16.0708 16.5083 15.9541L19.9208 8.66242C20.018 8.46797 19.9937 8.29784 19.8479 8.152C19.7021 8.00617 19.5319 7.98186 19.3375 8.07909L12.0458 11.4916C11.9291 11.5499 11.8222 11.6277 11.725 11.7249C11.6278 11.8221 11.55 11.9291 11.4916 12.0458L8.07915 19.3374C7.98192 19.5319 8.00623 19.702 8.15206 19.8478C8.2979 19.9937 8.46804 20.018 8.66248 19.9208Z", 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: "M7.99998 8.66658C7.81109 8.66658 7.65276 8.6027 7.52498 8.47492C7.3972 8.34714 7.33331 8.18881 7.33331 7.99992C7.33331 7.81103 7.3972 7.6527 7.52498 7.52492C7.65276 7.39714 7.81109 7.33325 7.99998 7.33325C8.18887 7.33325 8.3472 7.39714 8.47498 7.52492C8.60276 7.6527 8.66665 7.81103 8.66665 7.99992C8.66665 8.18881 8.60276 8.34714 8.47498 8.47492C8.3472 8.6027 8.18887 8.66658 7.99998 8.66658ZM7.99998 14.6666C7.07776 14.6666 6.21109 14.4916 5.39998 14.1416C4.58887 13.7916 3.88331 13.3166 3.28331 12.7166C2.68331 12.1166 2.20831 11.411 1.85831 10.5999C1.50831 9.78881 1.33331 8.92214 1.33331 7.99992C1.33331 7.0777 1.50831 6.21103 1.85831 5.39992C2.20831 4.58881 2.68331 3.88325 3.28331 3.28325C3.88331 2.68325 4.58887 2.20825 5.39998 1.85825C6.21109 1.50825 7.07776 1.33325 7.99998 1.33325C8.9222 1.33325 9.78887 1.50825 10.6 1.85825C11.4111 2.20825 12.1166 2.68325 12.7166 3.28325C13.3166 3.88325 13.7916 4.58881 14.1416 5.39992C14.4916 6.21103 14.6666 7.0777 14.6666 7.99992C14.6666 8.92214 14.4916 9.78881 14.1416 10.5999C13.7916 11.411 13.3166 12.1166 12.7166 12.7166C12.1166 13.3166 11.4111 13.7916 10.6 14.1416C9.78887 14.4916 8.9222 14.6666 7.99998 14.6666ZM7.99998 13.3333C9.48887 13.3333 10.75 12.8166 11.7833 11.7833C12.8166 10.7499 13.3333 9.48881 13.3333 7.99992C13.3333 6.51103 12.8166 5.24992 11.7833 4.21659C10.75 3.18325 9.48887 2.66659 7.99998 2.66659C6.51109 2.66659 5.24998 3.18325 4.21665 4.21659C3.18331 5.24992 2.66665 6.51103 2.66665 7.99992C2.66665 9.48881 3.18331 10.7499 4.21665 11.7833C5.24998 12.8166 6.51109 13.3333 7.99998 13.3333ZM4.94998 11.3833L9.11665 9.43325C9.18331 9.39992 9.24442 9.35547 9.29998 9.29992C9.35553 9.24436 9.39998 9.18325 9.43331 9.11658L11.3833 4.94992C11.4389 4.83881 11.425 4.74159 11.3416 4.65825C11.2583 4.57492 11.1611 4.56103 11.05 4.61659L6.88331 6.56658C6.81665 6.59992 6.75554 6.64436 6.69998 6.69992C6.64442 6.75547 6.59998 6.81658 6.56665 6.88325L4.61665 11.0499C4.56109 11.161 4.57498 11.2583 4.65831 11.3416C4.74165 11.4249 4.83887 11.4388 4.94998 11.3833Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 13C11.7167 13 11.4792 12.9042 11.2875 12.7125C11.0958 12.5208 11 12.2833 11 12C11 11.7167 11.0958 11.4792 11.2875 11.2875C11.4792 11.0958 11.7167 11 12 11C12.2833 11 12.5208 11.0958 12.7125 11.2875C12.9042 11.4792 13 11.7167 13 12C13 12.2833 12.9042 12.5208 12.7125 12.7125C12.5208 12.9042 12.2833 13 12 13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20ZM7.425 17.075L13.675 14.15C13.775 14.1 13.8667 14.0333 13.95 13.95C14.0333 13.8667 14.1 13.775 14.15 13.675L17.075 7.425C17.1583 7.25833 17.1375 7.1125 17.0125 6.9875C16.8875 6.8625 16.7417 6.84167 16.575 6.925L10.325 9.85C10.225 9.9 10.1333 9.96667 10.05 10.05C9.96667 10.1333 9.9 10.225 9.85 10.325L6.925 16.575C6.84167 16.7417 6.8625 16.8875 6.9875 17.0125C7.1125 17.1375 7.25833 17.1583 7.425 17.075Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 15.1666C13.6694 15.1666 13.3923 15.0548 13.1687 14.8312C12.9451 14.6076 12.8333 14.3305 12.8333 13.9999C12.8333 13.6694 12.9451 13.3923 13.1687 13.1687C13.3923 12.9451 13.6694 12.8333 14 12.8333C14.3305 12.8333 14.6076 12.9451 14.8312 13.1687C15.0548 13.3923 15.1666 13.6694 15.1666 13.9999C15.1666 14.3305 15.0548 14.6076 14.8312 14.8312C14.6076 15.0548 14.3305 15.1666 14 15.1666ZM14 25.6666C12.3861 25.6666 10.8694 25.3603 9.44998 24.7478C8.03054 24.1353 6.79581 23.3041 5.74581 22.2541C4.69581 21.2041 3.86456 19.9694 3.25206 18.5499C2.63956 17.1305 2.33331 15.6138 2.33331 13.9999C2.33331 12.386 2.63956 10.8694 3.25206 9.44992C3.86456 8.03047 4.69581 6.79575 5.74581 5.74575C6.79581 4.69575 8.03054 3.8645 9.44998 3.252C10.8694 2.6395 12.3861 2.33325 14 2.33325C15.6139 2.33325 17.1305 2.6395 18.55 3.252C19.9694 3.8645 21.2041 4.69575 22.2541 5.74575C23.3041 6.79575 24.1354 8.03047 24.7479 9.44992C25.3604 10.8694 25.6666 12.386 25.6666 13.9999C25.6666 15.6138 25.3604 17.1305 24.7479 18.5499C24.1354 19.9694 23.3041 21.2041 22.2541 22.2541C21.2041 23.3041 19.9694 24.1353 18.55 24.7478C17.1305 25.3603 15.6139 25.6666 14 25.6666ZM14 23.3333C16.6055 23.3333 18.8125 22.4291 20.6208 20.6208C22.4291 18.8124 23.3333 16.6055 23.3333 13.9999C23.3333 11.3944 22.4291 9.18742 20.6208 7.37909C18.8125 5.57075 16.6055 4.66659 14 4.66659C11.3944 4.66659 9.18748 5.57075 7.37915 7.37909C5.57081 9.18742 4.66665 11.3944 4.66665 13.9999C4.66665 16.6055 5.57081 18.8124 7.37915 20.6208C9.18748 22.4291 11.3944 23.3333 14 23.3333ZM8.66248 19.9208L15.9541 16.5083C16.0708 16.4499 16.1778 16.3721 16.275 16.2749C16.3722 16.1777 16.45 16.0708 16.5083 15.9541L19.9208 8.66242C20.018 8.46797 19.9937 8.29784 19.8479 8.152C19.7021 8.00617 19.5319 7.98186 19.3375 8.07909L12.0458 11.4916C11.9291 11.5499 11.8222 11.6277 11.725 11.7249C11.6278 11.8221 11.55 11.9291 11.4916 12.0458L8.07915 19.3374C7.98192 19.5319 8.00623 19.702 8.15206 19.8478C8.2979 19.9937 8.46804 20.018 8.66248 19.9208Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-discover"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconDiscover {
   }
   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-dock-left.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconDockLeft {
   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.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667V3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13056 2.96667 2 3.33333 2H12.6667C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333V12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14H3.33333ZM5.33333 12.6667V3.33333H3.33333V12.6667H5.33333ZM6.66667 12.6667H12.6667V3.33333H6.66667V12.6667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M5.83333 24.5C5.19167 24.5 4.64236 24.2715 4.18542 23.8146C3.72847 23.3576 3.5 22.8083 3.5 22.1667V5.83333C3.5 5.19167 3.72847 4.64236 4.18542 4.18542C4.64236 3.72847 5.19167 3.5 5.83333 3.5H22.1667C22.8083 3.5 23.3576 3.72847 23.8146 4.18542C24.2715 4.64236 24.5 5.19167 24.5 5.83333V22.1667C24.5 22.8083 24.2715 23.3576 23.8146 23.8146C23.3576 24.2715 22.8083 24.5 22.1667 24.5H5.83333ZM9.33333 22.1667V5.83333H5.83333V22.1667H9.33333ZM11.6667 22.1667H22.1667V5.83333H11.6667V22.1667Z", 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.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667V3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13056 2.96667 2 3.33333 2H12.6667C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333V12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14H3.33333ZM5.33333 12.6667V3.33333H3.33333V12.6667H5.33333ZM6.66667 12.6667H12.6667V3.33333H6.66667V12.6667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M5.83333 24.5C5.19167 24.5 4.64236 24.2715 4.18542 23.8146C3.72847 23.3576 3.5 22.8083 3.5 22.1667V5.83333C3.5 5.19167 3.72847 4.64236 4.18542 4.18542C4.64236 3.72847 5.19167 3.5 5.83333 3.5H22.1667C22.8083 3.5 23.3576 3.72847 23.8146 4.18542C24.2715 4.64236 24.5 5.19167 24.5 5.83333V22.1667C24.5 22.8083 24.2715 23.3576 23.8146 23.8146C23.3576 24.2715 22.8083 24.5 22.1667 24.5H5.83333ZM9.33333 22.1667V5.83333H5.83333V22.1667H9.33333ZM11.6667 22.1667H22.1667V5.83333H11.6667V22.1667Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-dock-left"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconDockLeft {
   }
   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-dot.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconDot {
   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: "M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M17.5 14C17.5 15.933 15.933 17.5 14 17.5C12.067 17.5 10.5 15.933 10.5 14C10.5 12.067 12.067 10.5 14 10.5C15.933 10.5 17.5 12.067 17.5 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: "M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M17.5 14C17.5 15.933 15.933 17.5 14 17.5C12.067 17.5 10.5 15.933 10.5 14C10.5 12.067 12.067 10.5 14 10.5C15.933 10.5 17.5 12.067 17.5 14Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-dot"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconDot {
   }
   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-double-arrow-left.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconDoubleArrowLeft {
   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: "M10.9833 11.5378L7.91667 8.47112C7.85 8.40445 7.80289 8.33223 7.77534 8.25445C7.74734 8.17667 7.73334 8.09334 7.73334 8.00445C7.73334 7.91556 7.74734 7.83223 7.77534 7.75445C7.80289 7.67667 7.85 7.60445 7.91667 7.53778L10.9833 4.47112C11.1056 4.34889 11.2582 4.28489 11.4413 4.27912C11.6249 4.27378 11.7833 4.33778 11.9167 4.47112C12.0389 4.59334 12.1 4.74889 12.1 4.93778C12.1 5.12667 12.0389 5.28223 11.9167 5.40445L9.33334 8.00445L11.9167 10.6044C12.0389 10.7267 12.1027 10.8793 12.108 11.0624C12.1138 11.246 12.05 11.4044 11.9167 11.5378C11.7944 11.66 11.6389 11.7211 11.45 11.7211C11.2611 11.7211 11.1056 11.66 10.9833 11.5378ZM6.58334 11.5378L3.51667 8.47112C3.45 8.40445 3.40289 8.33223 3.37534 8.25445C3.34734 8.17667 3.33334 8.09334 3.33334 8.00445C3.33334 7.91556 3.34734 7.83223 3.37534 7.75445C3.40289 7.67667 3.45 7.60445 3.51667 7.53778L6.58334 4.47112C6.70556 4.34889 6.85845 4.28489 7.042 4.27912C7.22511 4.27378 7.38334 4.33778 7.51667 4.47112C7.63889 4.59334 7.7 4.74889 7.7 4.93778C7.7 5.12667 7.63889 5.28223 7.51667 5.40445L4.93334 8.00445L7.51667 10.6044C7.63889 10.7267 7.70289 10.8793 7.70867 11.0624C7.714 11.246 7.65 11.4044 7.51667 11.5378C7.39445 11.66 7.23889 11.7211 7.05 11.7211C6.86111 11.7211 6.70556 11.66 6.58334 11.5378Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M16.475 17.3067L11.875 12.7067C11.775 12.6067 11.7043 12.4983 11.663 12.3817C11.621 12.265 11.6 12.14 11.6 12.0067C11.6 11.8733 11.621 11.7483 11.663 11.6317C11.7043 11.515 11.775 11.4067 11.875 11.3067L16.475 6.70667C16.6583 6.52334 16.8873 6.42734 17.162 6.41867C17.4373 6.41067 17.675 6.50667 17.875 6.70667C18.0583 6.89001 18.15 7.12334 18.15 7.40667C18.15 7.69001 18.0583 7.92334 17.875 8.10667L14 12.0067L17.875 15.9067C18.0583 16.09 18.154 16.319 18.162 16.5937C18.1707 16.869 18.075 17.1067 17.875 17.3067C17.6917 17.49 17.4583 17.5817 17.175 17.5817C16.8917 17.5817 16.6583 17.49 16.475 17.3067ZM9.875 17.3067L5.275 12.7067C5.175 12.6067 5.10433 12.4983 5.063 12.3817C5.021 12.265 5 12.14 5 12.0067C5 11.8733 5.021 11.7483 5.063 11.6317C5.10433 11.515 5.175 11.4067 5.275 11.3067L9.875 6.70667C10.0583 6.52334 10.2877 6.42734 10.563 6.41867C10.8377 6.41067 11.075 6.50667 11.275 6.70667C11.4583 6.89001 11.55 7.12334 11.55 7.40667C11.55 7.69001 11.4583 7.92334 11.275 8.10667L7.4 12.0067L11.275 15.9067C11.4583 16.09 11.5543 16.319 11.563 16.5937C11.571 16.869 11.475 17.1067 11.275 17.3067C11.0917 17.49 10.8583 17.5817 10.575 17.5817C10.2917 17.5817 10.0583 17.49 9.875 17.3067Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M19.2208 20.191L13.8542 14.8243C13.7375 14.7077 13.6551 14.5813 13.6068 14.4452C13.5578 14.3091 13.5333 14.1632 13.5333 14.0077C13.5333 13.8521 13.5578 13.7063 13.6068 13.5702C13.6551 13.4341 13.7375 13.3077 13.8542 13.191L19.2208 7.82433C19.4347 7.61044 19.7019 7.49844 20.0223 7.48833C20.3436 7.479 20.6208 7.591 20.8542 7.82433C21.0681 8.03822 21.175 8.31044 21.175 8.641C21.175 8.97155 21.0681 9.24378 20.8542 9.45766L16.3333 14.0077L20.8542 18.5577C21.0681 18.7716 21.1797 19.0387 21.189 19.3592C21.1991 19.6804 21.0875 19.9577 20.8542 20.191C20.6403 20.4049 20.3681 20.5118 20.0375 20.5118C19.7069 20.5118 19.4347 20.4049 19.2208 20.191ZM11.5208 20.191L6.15417 14.8243C6.0375 14.7077 5.95506 14.5813 5.90684 14.4452C5.85784 14.3091 5.83334 14.1632 5.83334 14.0077C5.83334 13.8521 5.85784 13.7063 5.90684 13.5702C5.95506 13.4341 6.0375 13.3077 6.15417 13.191L11.5208 7.82433C11.7347 7.61044 12.0023 7.49844 12.3235 7.48833C12.6439 7.479 12.9208 7.591 13.1542 7.82433C13.3681 8.03822 13.475 8.31044 13.475 8.641C13.475 8.97155 13.3681 9.24378 13.1542 9.45766L8.63334 14.0077L13.1542 18.5577C13.3681 18.7716 13.4801 19.0387 13.4902 19.3592C13.4995 19.6804 13.3875 19.9577 13.1542 20.191C12.9403 20.4049 12.6681 20.5118 12.3375 20.5118C12.0069 20.5118 11.7347 20.4049 11.5208 20.191Z", 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: "M10.9833 11.5378L7.91667 8.47112C7.85 8.40445 7.80289 8.33223 7.77534 8.25445C7.74734 8.17667 7.73334 8.09334 7.73334 8.00445C7.73334 7.91556 7.74734 7.83223 7.77534 7.75445C7.80289 7.67667 7.85 7.60445 7.91667 7.53778L10.9833 4.47112C11.1056 4.34889 11.2582 4.28489 11.4413 4.27912C11.6249 4.27378 11.7833 4.33778 11.9167 4.47112C12.0389 4.59334 12.1 4.74889 12.1 4.93778C12.1 5.12667 12.0389 5.28223 11.9167 5.40445L9.33334 8.00445L11.9167 10.6044C12.0389 10.7267 12.1027 10.8793 12.108 11.0624C12.1138 11.246 12.05 11.4044 11.9167 11.5378C11.7944 11.66 11.6389 11.7211 11.45 11.7211C11.2611 11.7211 11.1056 11.66 10.9833 11.5378ZM6.58334 11.5378L3.51667 8.47112C3.45 8.40445 3.40289 8.33223 3.37534 8.25445C3.34734 8.17667 3.33334 8.09334 3.33334 8.00445C3.33334 7.91556 3.34734 7.83223 3.37534 7.75445C3.40289 7.67667 3.45 7.60445 3.51667 7.53778L6.58334 4.47112C6.70556 4.34889 6.85845 4.28489 7.042 4.27912C7.22511 4.27378 7.38334 4.33778 7.51667 4.47112C7.63889 4.59334 7.7 4.74889 7.7 4.93778C7.7 5.12667 7.63889 5.28223 7.51667 5.40445L4.93334 8.00445L7.51667 10.6044C7.63889 10.7267 7.70289 10.8793 7.70867 11.0624C7.714 11.246 7.65 11.4044 7.51667 11.5378C7.39445 11.66 7.23889 11.7211 7.05 11.7211C6.86111 11.7211 6.70556 11.66 6.58334 11.5378Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M16.475 17.3067L11.875 12.7067C11.775 12.6067 11.7043 12.4983 11.663 12.3817C11.621 12.265 11.6 12.14 11.6 12.0067C11.6 11.8733 11.621 11.7483 11.663 11.6317C11.7043 11.515 11.775 11.4067 11.875 11.3067L16.475 6.70667C16.6583 6.52334 16.8873 6.42734 17.162 6.41867C17.4373 6.41067 17.675 6.50667 17.875 6.70667C18.0583 6.89001 18.15 7.12334 18.15 7.40667C18.15 7.69001 18.0583 7.92334 17.875 8.10667L14 12.0067L17.875 15.9067C18.0583 16.09 18.154 16.319 18.162 16.5937C18.1707 16.869 18.075 17.1067 17.875 17.3067C17.6917 17.49 17.4583 17.5817 17.175 17.5817C16.8917 17.5817 16.6583 17.49 16.475 17.3067ZM9.875 17.3067L5.275 12.7067C5.175 12.6067 5.10433 12.4983 5.063 12.3817C5.021 12.265 5 12.14 5 12.0067C5 11.8733 5.021 11.7483 5.063 11.6317C5.10433 11.515 5.175 11.4067 5.275 11.3067L9.875 6.70667C10.0583 6.52334 10.2877 6.42734 10.563 6.41867C10.8377 6.41067 11.075 6.50667 11.275 6.70667C11.4583 6.89001 11.55 7.12334 11.55 7.40667C11.55 7.69001 11.4583 7.92334 11.275 8.10667L7.4 12.0067L11.275 15.9067C11.4583 16.09 11.5543 16.319 11.563 16.5937C11.571 16.869 11.475 17.1067 11.275 17.3067C11.0917 17.49 10.8583 17.5817 10.575 17.5817C10.2917 17.5817 10.0583 17.49 9.875 17.3067Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M19.2208 20.191L13.8542 14.8243C13.7375 14.7077 13.6551 14.5813 13.6068 14.4452C13.5578 14.3091 13.5333 14.1632 13.5333 14.0077C13.5333 13.8521 13.5578 13.7063 13.6068 13.5702C13.6551 13.4341 13.7375 13.3077 13.8542 13.191L19.2208 7.82433C19.4347 7.61044 19.7019 7.49844 20.0223 7.48833C20.3436 7.479 20.6208 7.591 20.8542 7.82433C21.0681 8.03822 21.175 8.31044 21.175 8.641C21.175 8.97155 21.0681 9.24378 20.8542 9.45766L16.3333 14.0077L20.8542 18.5577C21.0681 18.7716 21.1797 19.0387 21.189 19.3592C21.1991 19.6804 21.0875 19.9577 20.8542 20.191C20.6403 20.4049 20.3681 20.5118 20.0375 20.5118C19.7069 20.5118 19.4347 20.4049 19.2208 20.191ZM11.5208 20.191L6.15417 14.8243C6.0375 14.7077 5.95506 14.5813 5.90684 14.4452C5.85784 14.3091 5.83334 14.1632 5.83334 14.0077C5.83334 13.8521 5.85784 13.7063 5.90684 13.5702C5.95506 13.4341 6.0375 13.3077 6.15417 13.191L11.5208 7.82433C11.7347 7.61044 12.0023 7.49844 12.3235 7.48833C12.6439 7.479 12.9208 7.591 13.1542 7.82433C13.3681 8.03822 13.475 8.31044 13.475 8.641C13.475 8.97155 13.3681 9.24378 13.1542 9.45766L8.63334 14.0077L13.1542 18.5577C13.3681 18.7716 13.4801 19.0387 13.4902 19.3592C13.4995 19.6804 13.3875 19.9577 13.1542 20.191C12.9403 20.4049 12.6681 20.5118 12.3375 20.5118C12.0069 20.5118 11.7347 20.4049 11.5208 20.191Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-double-arrow-left"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconDoubleArrowLeft {
   }
   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-double-arrow-right.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconDoubleArrowRight {
   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.08503 11.5291C3.9628 11.4068 3.90169 11.2513 3.90169 11.0624C3.90169 10.8735 3.9628 10.7179 4.08503 10.5957L6.66836 7.99572L4.08503 5.39572C3.9628 5.2735 3.89903 5.12061 3.89369 4.93705C3.88792 4.75394 3.95169 4.59572 4.08503 4.46239C4.20725 4.34016 4.3628 4.27905 4.55169 4.27905C4.74058 4.27905 4.89614 4.34016 5.01836 4.46239L8.08503 7.52905C8.15169 7.59572 8.19903 7.66794 8.22703 7.74572C8.25458 7.8235 8.26836 7.90683 8.26836 7.99572C8.26836 8.08461 8.25458 8.16794 8.22703 8.24572C8.19903 8.3235 8.15169 8.39572 8.08503 8.46239L5.01836 11.5291C4.89614 11.6513 4.74325 11.7151 4.55969 11.7204C4.37658 11.7262 4.21836 11.6624 4.08503 11.5291ZM8.48503 11.5291C8.3628 11.4068 8.30169 11.2513 8.30169 11.0624C8.30169 10.8735 8.3628 10.7179 8.48503 10.5957L11.0684 7.99572L8.48503 5.39572C8.3628 5.2735 8.2988 5.12061 8.29303 4.93705C8.28769 4.75394 8.35169 4.59572 8.48503 4.46239C8.60725 4.34016 8.7628 4.27905 8.95169 4.27905C9.14058 4.27905 9.29614 4.34016 9.41836 4.46239L12.485 7.52905C12.5517 7.59572 12.5988 7.66794 12.6264 7.74572C12.6544 7.8235 12.6684 7.90683 12.6684 7.99572C12.6684 8.08461 12.6544 8.16794 12.6264 8.24572C12.5988 8.3235 12.5517 8.39572 12.485 8.46239L9.41836 11.5291C9.29614 11.6513 9.14347 11.7151 8.96036 11.7204C8.7768 11.7262 8.61836 11.6624 8.48503 11.5291Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M6.12754 17.2937C5.94421 17.1104 5.85254 16.877 5.85254 16.5937C5.85254 16.3104 5.94421 16.077 6.12754 15.8937L10.0025 11.9937L6.12754 8.0937C5.94421 7.91037 5.84854 7.68103 5.84054 7.4057C5.83187 7.13103 5.92754 6.8937 6.12754 6.6937C6.31087 6.51037 6.54421 6.4187 6.82754 6.4187C7.11087 6.4187 7.34421 6.51037 7.52754 6.6937L12.1275 11.2937C12.2275 11.3937 12.2985 11.502 12.3405 11.6187C12.3819 11.7354 12.4025 11.8604 12.4025 11.9937C12.4025 12.127 12.3819 12.252 12.3405 12.3687C12.2985 12.4854 12.2275 12.5937 12.1275 12.6937L7.52754 17.2937C7.34421 17.477 7.11487 17.5727 6.83954 17.5807C6.56487 17.5894 6.32754 17.4937 6.12754 17.2937ZM12.7275 17.2937C12.5442 17.1104 12.4525 16.877 12.4525 16.5937C12.4525 16.3104 12.5442 16.077 12.7275 15.8937L16.6025 11.9937L12.7275 8.0937C12.5442 7.91037 12.4482 7.68103 12.4395 7.4057C12.4315 7.13103 12.5275 6.8937 12.7275 6.6937C12.9109 6.51037 13.1442 6.4187 13.4275 6.4187C13.7109 6.4187 13.9442 6.51037 14.1275 6.6937L18.7275 11.2937C18.8275 11.3937 18.8982 11.502 18.9395 11.6187C18.9815 11.7354 19.0025 11.8604 19.0025 11.9937C19.0025 12.127 18.9815 12.252 18.9395 12.3687C18.8982 12.4854 18.8275 12.5937 18.7275 12.6937L14.1275 17.2937C13.9442 17.477 13.7152 17.5727 13.4405 17.5807C13.1652 17.5894 12.9275 17.4937 12.7275 17.2937Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M7.14879 20.176C6.93491 19.9621 6.82796 19.6899 6.82796 19.3594C6.82796 19.0288 6.93491 18.7566 7.14879 18.5427L11.6696 13.9927L7.14879 9.44269C6.93491 9.2288 6.82329 8.96125 6.81396 8.64003C6.80385 8.31958 6.91546 8.04269 7.14879 7.80936C7.36268 7.59547 7.63491 7.48853 7.96546 7.48853C8.29602 7.48853 8.56824 7.59547 8.78213 7.80936L14.1488 13.176C14.2655 13.2927 14.3483 13.4191 14.3973 13.5552C14.4455 13.6913 14.4696 13.8371 14.4696 13.9927C14.4696 14.1482 14.4455 14.2941 14.3973 14.4302C14.3483 14.5663 14.2655 14.6927 14.1488 14.8094L8.78213 20.176C8.56824 20.3899 8.30068 20.5015 7.97946 20.5109C7.65902 20.521 7.38213 20.4094 7.14879 20.176ZM14.8488 20.176C14.6349 19.9621 14.528 19.6899 14.528 19.3594C14.528 19.0288 14.6349 18.7566 14.8488 18.5427L19.3696 13.9927L14.8488 9.44269C14.6349 9.2288 14.5229 8.96125 14.5128 8.64003C14.5035 8.31958 14.6155 8.04269 14.8488 7.80936C15.0627 7.59547 15.3349 7.48853 15.6655 7.48853C15.996 7.48853 16.2682 7.59547 16.4821 7.80936L21.8488 13.176C21.9655 13.2927 22.0479 13.4191 22.0961 13.5552C22.1451 13.6913 22.1696 13.8371 22.1696 13.9927C22.1696 14.1482 22.1451 14.2941 22.0961 14.4302C22.0479 14.5663 21.9655 14.6927 21.8488 14.8094L16.4821 20.176C16.2682 20.3899 16.0011 20.5015 15.6806 20.5109C15.3594 20.521 15.0821 20.4094 14.8488 20.176Z", 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.08503 11.5291C3.9628 11.4068 3.90169 11.2513 3.90169 11.0624C3.90169 10.8735 3.9628 10.7179 4.08503 10.5957L6.66836 7.99572L4.08503 5.39572C3.9628 5.2735 3.89903 5.12061 3.89369 4.93705C3.88792 4.75394 3.95169 4.59572 4.08503 4.46239C4.20725 4.34016 4.3628 4.27905 4.55169 4.27905C4.74058 4.27905 4.89614 4.34016 5.01836 4.46239L8.08503 7.52905C8.15169 7.59572 8.19903 7.66794 8.22703 7.74572C8.25458 7.8235 8.26836 7.90683 8.26836 7.99572C8.26836 8.08461 8.25458 8.16794 8.22703 8.24572C8.19903 8.3235 8.15169 8.39572 8.08503 8.46239L5.01836 11.5291C4.89614 11.6513 4.74325 11.7151 4.55969 11.7204C4.37658 11.7262 4.21836 11.6624 4.08503 11.5291ZM8.48503 11.5291C8.3628 11.4068 8.30169 11.2513 8.30169 11.0624C8.30169 10.8735 8.3628 10.7179 8.48503 10.5957L11.0684 7.99572L8.48503 5.39572C8.3628 5.2735 8.2988 5.12061 8.29303 4.93705C8.28769 4.75394 8.35169 4.59572 8.48503 4.46239C8.60725 4.34016 8.7628 4.27905 8.95169 4.27905C9.14058 4.27905 9.29614 4.34016 9.41836 4.46239L12.485 7.52905C12.5517 7.59572 12.5988 7.66794 12.6264 7.74572C12.6544 7.8235 12.6684 7.90683 12.6684 7.99572C12.6684 8.08461 12.6544 8.16794 12.6264 8.24572C12.5988 8.3235 12.5517 8.39572 12.485 8.46239L9.41836 11.5291C9.29614 11.6513 9.14347 11.7151 8.96036 11.7204C8.7768 11.7262 8.61836 11.6624 8.48503 11.5291Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M6.12754 17.2937C5.94421 17.1104 5.85254 16.877 5.85254 16.5937C5.85254 16.3104 5.94421 16.077 6.12754 15.8937L10.0025 11.9937L6.12754 8.0937C5.94421 7.91037 5.84854 7.68103 5.84054 7.4057C5.83187 7.13103 5.92754 6.8937 6.12754 6.6937C6.31087 6.51037 6.54421 6.4187 6.82754 6.4187C7.11087 6.4187 7.34421 6.51037 7.52754 6.6937L12.1275 11.2937C12.2275 11.3937 12.2985 11.502 12.3405 11.6187C12.3819 11.7354 12.4025 11.8604 12.4025 11.9937C12.4025 12.127 12.3819 12.252 12.3405 12.3687C12.2985 12.4854 12.2275 12.5937 12.1275 12.6937L7.52754 17.2937C7.34421 17.477 7.11487 17.5727 6.83954 17.5807C6.56487 17.5894 6.32754 17.4937 6.12754 17.2937ZM12.7275 17.2937C12.5442 17.1104 12.4525 16.877 12.4525 16.5937C12.4525 16.3104 12.5442 16.077 12.7275 15.8937L16.6025 11.9937L12.7275 8.0937C12.5442 7.91037 12.4482 7.68103 12.4395 7.4057C12.4315 7.13103 12.5275 6.8937 12.7275 6.6937C12.9109 6.51037 13.1442 6.4187 13.4275 6.4187C13.7109 6.4187 13.9442 6.51037 14.1275 6.6937L18.7275 11.2937C18.8275 11.3937 18.8982 11.502 18.9395 11.6187C18.9815 11.7354 19.0025 11.8604 19.0025 11.9937C19.0025 12.127 18.9815 12.252 18.9395 12.3687C18.8982 12.4854 18.8275 12.5937 18.7275 12.6937L14.1275 17.2937C13.9442 17.477 13.7152 17.5727 13.4405 17.5807C13.1652 17.5894 12.9275 17.4937 12.7275 17.2937Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M7.14879 20.176C6.93491 19.9621 6.82796 19.6899 6.82796 19.3594C6.82796 19.0288 6.93491 18.7566 7.14879 18.5427L11.6696 13.9927L7.14879 9.44269C6.93491 9.2288 6.82329 8.96125 6.81396 8.64003C6.80385 8.31958 6.91546 8.04269 7.14879 7.80936C7.36268 7.59547 7.63491 7.48853 7.96546 7.48853C8.29602 7.48853 8.56824 7.59547 8.78213 7.80936L14.1488 13.176C14.2655 13.2927 14.3483 13.4191 14.3973 13.5552C14.4455 13.6913 14.4696 13.8371 14.4696 13.9927C14.4696 14.1482 14.4455 14.2941 14.3973 14.4302C14.3483 14.5663 14.2655 14.6927 14.1488 14.8094L8.78213 20.176C8.56824 20.3899 8.30068 20.5015 7.97946 20.5109C7.65902 20.521 7.38213 20.4094 7.14879 20.176ZM14.8488 20.176C14.6349 19.9621 14.528 19.6899 14.528 19.3594C14.528 19.0288 14.6349 18.7566 14.8488 18.5427L19.3696 13.9927L14.8488 9.44269C14.6349 9.2288 14.5229 8.96125 14.5128 8.64003C14.5035 8.31958 14.6155 8.04269 14.8488 7.80936C15.0627 7.59547 15.3349 7.48853 15.6655 7.48853C15.996 7.48853 16.2682 7.59547 16.4821 7.80936L21.8488 13.176C21.9655 13.2927 22.0479 13.4191 22.0961 13.5552C22.1451 13.6913 22.1696 13.8371 22.1696 13.9927C22.1696 14.1482 22.1451 14.2941 22.0961 14.4302C22.0479 14.5663 21.9655 14.6927 21.8488 14.8094L16.4821 20.176C16.2682 20.3899 16.0011 20.5015 15.6806 20.5109C15.3594 20.521 15.0821 20.4094 14.8488 20.176Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-double-arrow-right"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconDoubleArrowRight {
   }
   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-download.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconDownload {
   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: "M7.99999 10.2333C7.89999 10.2333 7.80555 10.2167 7.71666 10.1833C7.62777 10.15 7.54444 10.0944 7.46666 10.0167L5.01666 7.56665C4.87222 7.42221 4.79999 7.24443 4.79999 7.03332C4.79999 6.82221 4.87222 6.64443 5.01666 6.49999C5.14999 6.36665 5.32488 6.29732 5.54133 6.29199C5.75822 6.28621 5.93888 6.34999 6.08333 6.48332L7.23333 7.64999V3.04999C7.23333 2.83888 7.30844 2.6611 7.45866 2.51665C7.60844 2.37221 7.78888 2.29999 7.99999 2.29999C8.2111 2.29999 8.39155 2.37221 8.54133 2.51665C8.69155 2.6611 8.76666 2.83888 8.76666 3.04999V7.64999L9.91666 6.48332C10.0611 6.34999 10.2418 6.28621 10.4587 6.29199C10.6751 6.29732 10.85 6.36665 10.9833 6.49999C11.1278 6.64443 11.2 6.82221 11.2 7.03332C11.2 7.24443 11.1278 7.42221 10.9833 7.56665L8.53333 10.0167C8.45555 10.0944 8.37222 10.15 8.28333 10.1833C8.19444 10.2167 8.09999 10.2333 7.99999 10.2333ZM3.91666 13.5833C3.49444 13.5833 3.13622 13.436 2.84199 13.1413C2.54733 12.8471 2.39999 12.4889 2.39999 12.0667V10.5833C2.39999 10.3722 2.47511 10.1944 2.62533 10.05C2.77511 9.90554 2.95555 9.83332 3.16666 9.83332C3.37777 9.83332 3.55555 9.90554 3.69999 10.05C3.84444 10.1944 3.91666 10.3722 3.91666 10.5833V12.0667H12.0667V10.5833C12.0667 10.3722 12.1418 10.1944 12.292 10.05C12.4418 9.90554 12.6222 9.83332 12.8333 9.83332C13.0444 9.83332 13.2222 9.90554 13.3667 10.05C13.5111 10.1944 13.5833 10.3722 13.5833 10.5833V12.0667C13.5833 12.4889 13.436 12.8471 13.1413 13.1413C12.8471 13.436 12.4889 13.5833 12.0667 13.5833H3.91666Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 15.35C11.85 15.35 11.7083 15.325 11.575 15.275C11.4417 15.225 11.3167 15.1417 11.2 15.025L7.52501 11.35C7.30834 11.1333 7.20001 10.8667 7.20001 10.55C7.20001 10.2333 7.30834 9.96668 7.52501 9.75001C7.72501 9.55001 7.98734 9.44601 8.31201 9.43801C8.63734 9.42935 8.90834 9.52501 9.12501 9.72501L10.85 11.475V4.57501C10.85 4.25835 10.9627 3.99168 11.188 3.77501C11.4127 3.55835 11.6833 3.45001 12 3.45001C12.3167 3.45001 12.5873 3.55835 12.812 3.77501C13.0373 3.99168 13.15 4.25835 13.15 4.57501V11.475L14.875 9.72501C15.0917 9.52501 15.3627 9.42935 15.688 9.43801C16.0127 9.44601 16.275 9.55001 16.475 9.75001C16.6917 9.96668 16.8 10.2333 16.8 10.55C16.8 10.8667 16.6917 11.1333 16.475 11.35L12.8 15.025C12.6833 15.1417 12.5583 15.225 12.425 15.275C12.2917 15.325 12.15 15.35 12 15.35ZM5.87501 20.375C5.24167 20.375 4.70434 20.154 4.26301 19.712C3.82101 19.2707 3.60001 18.7333 3.60001 18.1V15.875C3.60001 15.5583 3.71267 15.2917 3.93801 15.075C4.16267 14.8583 4.43334 14.75 4.75001 14.75C5.06667 14.75 5.33334 14.8583 5.55001 15.075C5.76667 15.2917 5.87501 15.5583 5.87501 15.875V18.1H18.1V15.875C18.1 15.5583 18.2127 15.2917 18.438 15.075C18.6627 14.8583 18.9333 14.75 19.25 14.75C19.5667 14.75 19.8333 14.8583 20.05 15.075C20.2667 15.2917 20.375 15.5583 20.375 15.875V18.1C20.375 18.7333 20.154 19.2707 19.712 19.712C19.2707 20.154 18.7333 20.375 18.1 20.375H5.87501Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 17.9084C13.825 17.9084 13.6597 17.8792 13.5042 17.8209C13.3486 17.7625 13.2028 17.6653 13.0667 17.5292L8.77918 13.2417C8.5264 12.9889 8.40001 12.6778 8.40001 12.3084C8.40001 11.9389 8.5264 11.6278 8.77918 11.375C9.01251 11.1417 9.31857 11.0204 9.69735 11.011C10.0769 11.0009 10.3931 11.1125 10.6458 11.3459L12.6583 13.3875V5.33752C12.6583 4.96808 12.7898 4.65697 13.0527 4.40419C13.3148 4.15141 13.6306 4.02502 14 4.02502C14.3695 4.02502 14.6852 4.15141 14.9473 4.40419C15.2102 4.65697 15.3417 4.96808 15.3417 5.33752V13.3875L17.3542 11.3459C17.607 11.1125 17.9231 11.0009 18.3027 11.011C18.6815 11.0204 18.9875 11.1417 19.2208 11.375C19.4736 11.6278 19.6 11.9389 19.6 12.3084C19.6 12.6778 19.4736 12.9889 19.2208 13.2417L14.9333 17.5292C14.7972 17.6653 14.6514 17.7625 14.4958 17.8209C14.3403 17.8792 14.175 17.9084 14 17.9084ZM6.85418 23.7709C6.11529 23.7709 5.4884 23.513 4.97351 22.9974C4.45785 22.4825 4.20001 21.8556 4.20001 21.1167V18.5209C4.20001 18.1514 4.33146 17.8403 4.59435 17.5875C4.85646 17.3347 5.17223 17.2084 5.54168 17.2084C5.91112 17.2084 6.22223 17.3347 6.47501 17.5875C6.72779 17.8403 6.85418 18.1514 6.85418 18.5209V21.1167H21.1167V18.5209C21.1167 18.1514 21.2481 17.8403 21.511 17.5875C21.7731 17.3347 22.0889 17.2084 22.4583 17.2084C22.8278 17.2084 23.1389 17.3347 23.3917 17.5875C23.6445 17.8403 23.7708 18.1514 23.7708 18.5209V21.1167C23.7708 21.8556 23.513 22.4825 22.9973 22.9974C22.4825 23.513 21.8556 23.7709 21.1167 23.7709H6.85418Z", 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: "M7.99999 10.2333C7.89999 10.2333 7.80555 10.2167 7.71666 10.1833C7.62777 10.15 7.54444 10.0944 7.46666 10.0167L5.01666 7.56665C4.87222 7.42221 4.79999 7.24443 4.79999 7.03332C4.79999 6.82221 4.87222 6.64443 5.01666 6.49999C5.14999 6.36665 5.32488 6.29732 5.54133 6.29199C5.75822 6.28621 5.93888 6.34999 6.08333 6.48332L7.23333 7.64999V3.04999C7.23333 2.83888 7.30844 2.6611 7.45866 2.51665C7.60844 2.37221 7.78888 2.29999 7.99999 2.29999C8.2111 2.29999 8.39155 2.37221 8.54133 2.51665C8.69155 2.6611 8.76666 2.83888 8.76666 3.04999V7.64999L9.91666 6.48332C10.0611 6.34999 10.2418 6.28621 10.4587 6.29199C10.6751 6.29732 10.85 6.36665 10.9833 6.49999C11.1278 6.64443 11.2 6.82221 11.2 7.03332C11.2 7.24443 11.1278 7.42221 10.9833 7.56665L8.53333 10.0167C8.45555 10.0944 8.37222 10.15 8.28333 10.1833C8.19444 10.2167 8.09999 10.2333 7.99999 10.2333ZM3.91666 13.5833C3.49444 13.5833 3.13622 13.436 2.84199 13.1413C2.54733 12.8471 2.39999 12.4889 2.39999 12.0667V10.5833C2.39999 10.3722 2.47511 10.1944 2.62533 10.05C2.77511 9.90554 2.95555 9.83332 3.16666 9.83332C3.37777 9.83332 3.55555 9.90554 3.69999 10.05C3.84444 10.1944 3.91666 10.3722 3.91666 10.5833V12.0667H12.0667V10.5833C12.0667 10.3722 12.1418 10.1944 12.292 10.05C12.4418 9.90554 12.6222 9.83332 12.8333 9.83332C13.0444 9.83332 13.2222 9.90554 13.3667 10.05C13.5111 10.1944 13.5833 10.3722 13.5833 10.5833V12.0667C13.5833 12.4889 13.436 12.8471 13.1413 13.1413C12.8471 13.436 12.4889 13.5833 12.0667 13.5833H3.91666Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 15.35C11.85 15.35 11.7083 15.325 11.575 15.275C11.4417 15.225 11.3167 15.1417 11.2 15.025L7.52501 11.35C7.30834 11.1333 7.20001 10.8667 7.20001 10.55C7.20001 10.2333 7.30834 9.96668 7.52501 9.75001C7.72501 9.55001 7.98734 9.44601 8.31201 9.43801C8.63734 9.42935 8.90834 9.52501 9.12501 9.72501L10.85 11.475V4.57501C10.85 4.25835 10.9627 3.99168 11.188 3.77501C11.4127 3.55835 11.6833 3.45001 12 3.45001C12.3167 3.45001 12.5873 3.55835 12.812 3.77501C13.0373 3.99168 13.15 4.25835 13.15 4.57501V11.475L14.875 9.72501C15.0917 9.52501 15.3627 9.42935 15.688 9.43801C16.0127 9.44601 16.275 9.55001 16.475 9.75001C16.6917 9.96668 16.8 10.2333 16.8 10.55C16.8 10.8667 16.6917 11.1333 16.475 11.35L12.8 15.025C12.6833 15.1417 12.5583 15.225 12.425 15.275C12.2917 15.325 12.15 15.35 12 15.35ZM5.87501 20.375C5.24167 20.375 4.70434 20.154 4.26301 19.712C3.82101 19.2707 3.60001 18.7333 3.60001 18.1V15.875C3.60001 15.5583 3.71267 15.2917 3.93801 15.075C4.16267 14.8583 4.43334 14.75 4.75001 14.75C5.06667 14.75 5.33334 14.8583 5.55001 15.075C5.76667 15.2917 5.87501 15.5583 5.87501 15.875V18.1H18.1V15.875C18.1 15.5583 18.2127 15.2917 18.438 15.075C18.6627 14.8583 18.9333 14.75 19.25 14.75C19.5667 14.75 19.8333 14.8583 20.05 15.075C20.2667 15.2917 20.375 15.5583 20.375 15.875V18.1C20.375 18.7333 20.154 19.2707 19.712 19.712C19.2707 20.154 18.7333 20.375 18.1 20.375H5.87501Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 17.9084C13.825 17.9084 13.6597 17.8792 13.5042 17.8209C13.3486 17.7625 13.2028 17.6653 13.0667 17.5292L8.77918 13.2417C8.5264 12.9889 8.40001 12.6778 8.40001 12.3084C8.40001 11.9389 8.5264 11.6278 8.77918 11.375C9.01251 11.1417 9.31857 11.0204 9.69735 11.011C10.0769 11.0009 10.3931 11.1125 10.6458 11.3459L12.6583 13.3875V5.33752C12.6583 4.96808 12.7898 4.65697 13.0527 4.40419C13.3148 4.15141 13.6306 4.02502 14 4.02502C14.3695 4.02502 14.6852 4.15141 14.9473 4.40419C15.2102 4.65697 15.3417 4.96808 15.3417 5.33752V13.3875L17.3542 11.3459C17.607 11.1125 17.9231 11.0009 18.3027 11.011C18.6815 11.0204 18.9875 11.1417 19.2208 11.375C19.4736 11.6278 19.6 11.9389 19.6 12.3084C19.6 12.6778 19.4736 12.9889 19.2208 13.2417L14.9333 17.5292C14.7972 17.6653 14.6514 17.7625 14.4958 17.8209C14.3403 17.8792 14.175 17.9084 14 17.9084ZM6.85418 23.7709C6.11529 23.7709 5.4884 23.513 4.97351 22.9974C4.45785 22.4825 4.20001 21.8556 4.20001 21.1167V18.5209C4.20001 18.1514 4.33146 17.8403 4.59435 17.5875C4.85646 17.3347 5.17223 17.2084 5.54168 17.2084C5.91112 17.2084 6.22223 17.3347 6.47501 17.5875C6.72779 17.8403 6.85418 18.1514 6.85418 18.5209V21.1167H21.1167V18.5209C21.1167 18.1514 21.2481 17.8403 21.511 17.5875C21.7731 17.3347 22.0889 17.2084 22.4583 17.2084C22.8278 17.2084 23.1389 17.3347 23.3917 17.5875C23.6445 17.8403 23.7708 18.1514 23.7708 18.5209V21.1167C23.7708 21.8556 23.513 22.4825 22.9973 22.9974C22.4825 23.513 21.8556 23.7709 21.1167 23.7709H6.85418Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-download"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconDownload {
   }
   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-drag-handle.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconDragHandle {
   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("rect", { x: "9", y: "3", width: "2", height: "2", rx: "1", fill: "currentColor" }), h("rect", { x: "9", y: "7", width: "2", height: "2", rx: "1", fill: "currentColor" }), h("rect", { x: "9", y: "11", width: "2", height: "2", rx: "1", fill: "currentColor" }), h("rect", { x: "5", y: "3", width: "2", height: "2", rx: "1", fill: "currentColor" }), h("rect", { x: "5", y: "7", width: "2", height: "2", rx: "1", fill: "currentColor" }), h("rect", { x: "5", y: "11", width: "2", height: "2", rx: "1", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("rect", { x: "13.5", y: "4.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), h("rect", { x: "13.5", y: "10.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), h("rect", { x: "13.5", y: "16.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), h("rect", { x: "7.5", y: "4.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), h("rect", { x: "7.5", y: "10.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), h("rect", { x: "7.5", y: "16.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("rect", { x: "15.75", y: "5.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), h("rect", { x: "15.75", y: "12.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), h("rect", { x: "15.75", y: "19.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), h("rect", { x: "8.75", y: "5.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), h("rect", { x: "8.75", y: "12.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), h("rect", { x: "8.75", y: "19.25", width: "3.5", height: "3.5", rx: "1.75", 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("rect", { x: "9", y: "3", width: "2", height: "2", rx: "1", fill: "currentColor" }), h("rect", { x: "9", y: "7", width: "2", height: "2", rx: "1", fill: "currentColor" }), h("rect", { x: "9", y: "11", width: "2", height: "2", rx: "1", fill: "currentColor" }), h("rect", { x: "5", y: "3", width: "2", height: "2", rx: "1", fill: "currentColor" }), h("rect", { x: "5", y: "7", width: "2", height: "2", rx: "1", fill: "currentColor" }), h("rect", { x: "5", y: "11", width: "2", height: "2", rx: "1", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("rect", { x: "13.5", y: "4.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), h("rect", { x: "13.5", y: "10.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), h("rect", { x: "13.5", y: "16.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), h("rect", { x: "7.5", y: "4.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), h("rect", { x: "7.5", y: "10.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }), h("rect", { x: "7.5", y: "16.5", width: "3", height: "3", rx: "1.5", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("rect", { x: "15.75", y: "5.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), h("rect", { x: "15.75", y: "12.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), h("rect", { x: "15.75", y: "19.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), h("rect", { x: "8.75", y: "5.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), h("rect", { x: "8.75", y: "12.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" }), h("rect", { x: "8.75", y: "19.25", width: "3.5", height: "3.5", rx: "1.75", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-drag-handle"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconDragHandle {
   }
   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-edit.js

@@ -3,12 +3,16 @@ import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconEdit {
   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: "M12.7025 6.06027L9.912 3.29863L10.8312 2.37808C11.0829 2.12603 11.3922 2 11.759 2C12.1254 2 12.4344 2.12603 12.6861 2.37808L13.6054 3.29863C13.8571 3.55068 13.9884 3.8549 13.9993 4.21129C14.0103 4.56723 13.8899 4.87123 13.6382 5.12329L12.7025 6.06027ZM2.6566 14C2.47056 14 2.31473 13.9369 2.1891 13.8106C2.06303 13.6848 2 13.5288 2 13.3425V11.4849C2 11.3973 2.01641 11.3124 2.04924 11.2305C2.08207 11.1481 2.13132 11.074 2.19698 11.0082L8.95993 4.23562L11.7505 7.03014L4.98752 13.8027C4.92186 13.8685 4.8481 13.9178 4.76624 13.9507C4.68395 13.9836 4.59903 14 4.51148 14H2.6566Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M19.0538 9.09041L14.868 4.94795L16.2469 3.56712C16.6244 3.18904 17.0883 3 17.6385 3C18.1881 3 18.6516 3.18904 19.0292 3.56712L20.408 4.94795C20.7856 5.32603 20.9826 5.78236 20.999 6.31693C21.0154 6.85085 20.8348 7.30685 20.4573 7.68493L19.0538 9.09041ZM3.9849 21C3.70584 21 3.47209 20.9053 3.28365 20.7159C3.09455 20.5272 3 20.2931 3 20.0137V17.2274C3 17.0959 3.02462 16.9687 3.07387 16.8457C3.12311 16.7221 3.19698 16.611 3.29547 16.5123L13.4399 6.35342L17.6257 10.5452L7.48128 20.7041C7.38279 20.8027 7.27215 20.8767 7.14937 20.926C7.02593 20.9753 6.89855 21 6.76723 21H3.9849Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M22.2294 10.6055L17.346 5.7726L18.9547 4.16164C19.3951 3.72055 19.9363 3.5 20.5783 3.5C21.2194 3.5 21.7602 3.72055 22.2007 4.16164L23.8094 5.7726C24.2498 6.2137 24.4797 6.74608 24.4988 7.36975C24.518 7.99266 24.3073 8.52466 23.8668 8.96575L22.2294 10.6055ZM4.64905 24.5C4.32348 24.5 4.05078 24.3895 3.83093 24.1686C3.61031 23.9484 3.5 23.6753 3.5 23.3493V20.0986C3.5 19.9452 3.52873 19.7968 3.58618 19.6533C3.64363 19.5091 3.72981 19.3795 3.84471 19.2644L15.6799 7.41233L20.5633 12.3027L8.72816 24.1548C8.61325 24.2699 8.48418 24.3562 8.34093 24.4137C8.19691 24.4712 8.0483 24.5 7.8951 24.5H4.64905Z", 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: "M12.7025 6.06027L9.912 3.29863L10.8312 2.37808C11.0829 2.12603 11.3922 2 11.759 2C12.1254 2 12.4344 2.12603 12.6861 2.37808L13.6054 3.29863C13.8571 3.55068 13.9884 3.8549 13.9993 4.21129C14.0103 4.56723 13.8899 4.87123 13.6382 5.12329L12.7025 6.06027ZM2.6566 14C2.47056 14 2.31473 13.9369 2.1891 13.8106C2.06303 13.6848 2 13.5288 2 13.3425V11.4849C2 11.3973 2.01641 11.3124 2.04924 11.2305C2.08207 11.1481 2.13132 11.074 2.19698 11.0082L8.95993 4.23562L11.7505 7.03014L4.98752 13.8027C4.92186 13.8685 4.8481 13.9178 4.76624 13.9507C4.68395 13.9836 4.59903 14 4.51148 14H2.6566Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M19.0538 9.09041L14.868 4.94795L16.2469 3.56712C16.6244 3.18904 17.0883 3 17.6385 3C18.1881 3 18.6516 3.18904 19.0292 3.56712L20.408 4.94795C20.7856 5.32603 20.9826 5.78236 20.999 6.31693C21.0154 6.85085 20.8348 7.30685 20.4573 7.68493L19.0538 9.09041ZM3.9849 21C3.70584 21 3.47209 20.9053 3.28365 20.7159C3.09455 20.5272 3 20.2931 3 20.0137V17.2274C3 17.0959 3.02462 16.9687 3.07387 16.8457C3.12311 16.7221 3.19698 16.611 3.29547 16.5123L13.4399 6.35342L17.6257 10.5452L7.48128 20.7041C7.38279 20.8027 7.27215 20.8767 7.14937 20.926C7.02593 20.9753 6.89855 21 6.76723 21H3.9849Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M22.2294 10.6055L17.346 5.7726L18.9547 4.16164C19.3951 3.72055 19.9363 3.5 20.5783 3.5C21.2194 3.5 21.7602 3.72055 22.2007 4.16164L23.8094 5.7726C24.2498 6.2137 24.4797 6.74608 24.4988 7.36975C24.518 7.99266 24.3073 8.52466 23.8668 8.96575L22.2294 10.6055ZM4.64905 24.5C4.32348 24.5 4.05078 24.3895 3.83093 24.1686C3.61031 23.9484 3.5 23.6753 3.5 23.3493V20.0986C3.5 19.9452 3.52873 19.7968 3.58618 19.6533C3.64363 19.5091 3.72981 19.3795 3.84471 19.2644L15.6799 7.41233L20.5633 12.3027L8.72816 24.1548C8.61325 24.2699 8.48418 24.3562 8.34093 24.4137C8.19691 24.4712 8.0483 24.5 7.8951 24.5H4.64905Z", fill: "currentColor" })))));
   }
   static get is() { return "swirl-icon-edit"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +28,28 @@ export class SwirlIconEdit {
   }
   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,