fix: inheritance attribute for react icons (#3005)

vuestorefront · Oct 4, 2023 · e82aa92 · e82aa92
1 parent 795c08f
commit e82aa92
Show file tree

Hide file tree

Showing 171 changed files with 175 additions and 173 deletions.
diff --git a/.changeset/chatty-cameras-leave.md b/.changeset/chatty-cameras-leave.md
@@ -0,0 +1,5 @@
+---
+'@storefront-ui/react': patch
+---
+
+Fix inhertiance of react icons, possibility to alter default attributes
diff --git a/createIcons.js b/createIcons.js
@@ -96,7 +96,7 @@ const vueIcon = (name, content, attributes) => `
     <SfIconBase :size="size" viewBox="${attributes.viewBox}" ${attributes.dataTestId && `data-testid="${attributes.dataTestId}"`}>${content}</SfIconBase>
 </template>
 <script lang="ts" setup>
-import { PropType } from 'vue';
+import type { PropType } from 'vue';
 import { SfIconBase, SfIconSize } from '${absolutePathToIconBase || (relativePathToIconBasePath && `${relativePathToIconBasePath}SfIconBase`)}';
 
 defineProps({
@@ -116,7 +116,7 @@ export default function SfIcon${camelCaseName}({
     viewBox = '${attributes.viewBox}',
     ...attributes
 }: SfIconProps) {
-    return <SfIconBase {...attributes} size={size} viewBox={viewBox} ${attributes.dataTestId && `data-testid="${attributes.dataTestId}"`}>${content}</SfIconBase>;
+    return <SfIconBase size={size} viewBox={viewBox} ${attributes.dataTestId && `data-testid="${attributes.dataTestId}"`} {...attributes}>${content}</SfIconBase>;
 }`;
 
 const vueExports = [];

diff --git a/packages/sfui/frameworks/react/components/SfIconBase/SfIconBase.tsx b/packages/sfui/frameworks/react/components/SfIconBase/SfIconBase.tsx
@@ -30,9 +30,9 @@ export default function SfIconBase({
 }: SfIconBaseProps) {
   return (
     <svg
-      {...attributes}
       xmlns="http://www.w3.org/2000/svg"
       className={`inline-block fill-current ${getSizeClasses(size)} ${className}`}
+      {...attributes}
     >
       {children}
     </svg>

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconAdd.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconAdd.tsx
@@ -3,7 +3,7 @@ import { SfIconBase, SfIconSize } from '@storefront-ui/react';
 
 export default function SfIconAdd({ size = SfIconSize.base, viewBox = '0 0 24 24', ...attributes }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="add">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="add" {...attributes}>
       <path d="M12 19a.965.965 0 0 1-.712-.288A.965.965 0 0 1 11 18v-5H6a.968.968 0 0 1-.713-.288A.967.967 0 0 1 5 12a.97.97 0 0 1 .287-.713A.97.97 0 0 1 6 11h5V6c0-.283.096-.521.288-.713A.967.967 0 0 1 12 5a.97.97 0 0 1 .713.287A.97.97 0 0 1 13 6v5h5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.712A.965.965 0 0 1 18 13h-5v5a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 19Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconAddShoppingCart.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconAddShoppingCart.tsx
@@ -7,7 +7,7 @@ export default function SfIconAddShoppingCart({
   ...attributes
 }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="add-shopping-cart">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="add-shopping-cart" {...attributes}>
       <path d="M12 9a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 8V6H9a.968.968 0 0 1-.713-.287A.968.968 0 0 1 8 5c0-.283.096-.52.287-.713A.968.968 0 0 1 9 4h2V2a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 1a.97.97 0 0 1 .713.288A.968.968 0 0 1 13 2v2h2c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 15 6h-2v2c0 .283-.096.52-.287.713A.968.968 0 0 1 12 9ZM7 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 20c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 7 18c.55 0 1.02.196 1.412.587C8.804 18.98 9 19.45 9 20s-.196 1.02-.588 1.413A1.926 1.926 0 0 1 7 22Zm10 0c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 15 20c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 17 18c.55 0 1.02.196 1.413.587.391.392.587.863.587 1.413s-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 22ZM7 17c-.767 0-1.346-.33-1.737-.988-.392-.658-.396-1.312-.013-1.962L6.6 11.6 3 4H2a.968.968 0 0 1-.712-.288A.968.968 0 0 1 1 3c0-.283.096-.52.288-.712A.968.968 0 0 1 2 2h1.65c.183 0 .358.05.525.15a.93.93 0 0 1 .375.425L8.525 11h7.025l3.6-6.5A.973.973 0 0 1 20 4a.94.94 0 0 1 .863.487.937.937 0 0 1 .012.988L17.3 11.95c-.183.333-.43.592-.738.775A1.945 1.945 0 0 1 15.55 13H8.1L7 15h11a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.712A.968.968 0 0 1 18 17H7Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconArrowBack.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconArrowBack.tsx
@@ -3,7 +3,7 @@ import { SfIconBase, SfIconSize } from '@storefront-ui/react';
 
 export default function SfIconArrowBack({ size = SfIconSize.base, viewBox = '0 0 24 24', ...attributes }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="arrow-back">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="arrow-back" {...attributes}>
       <path d="m10.875 19.3-6.6-6.6a.883.883 0 0 1-.213-.325A1.115 1.115 0 0 1 4 12c0-.133.02-.258.062-.375a.883.883 0 0 1 .213-.325l6.6-6.6a.978.978 0 0 1 .687-.288.933.933 0 0 1 .713.288c.2.183.304.412.313.687a.933.933 0 0 1-.288.713L7.4 11h11.175a.97.97 0 0 1 .713.287.97.97 0 0 1 .287.713.97.97 0 0 1-.287.712.968.968 0 0 1-.713.288H7.4l4.9 4.9c.183.183.28.417.288.7a.872.872 0 0 1-.288.7c-.183.2-.417.3-.7.3a.988.988 0 0 1-.725-.3Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconArrowDownward.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconArrowDownward.tsx
@@ -7,7 +7,7 @@ export default function SfIconArrowDownward({
   ...attributes
 }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="arrow-downward">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="arrow-downward" {...attributes}>
       <path d="M12 19.575a1.1 1.1 0 0 1-.375-.063.872.872 0 0 1-.325-.212l-6.6-6.6c-.2-.2-.3-.438-.3-.713 0-.275.1-.512.3-.712.2-.2.433-.3.7-.3.267 0 .5.1.7.3l4.9 4.9v-11.2c0-.283.096-.517.288-.7A.99.99 0 0 1 12 4a.97.97 0 0 1 .713.287A.97.97 0 0 1 13 5v11.175l4.9-4.9c.2-.2.433-.3.7-.3.267 0 .5.1.7.3.2.2.3.437.3.712 0 .275-.1.513-.3.713l-6.6 6.6c-.1.1-.208.17-.325.212a1.098 1.098 0 0 1-.375.063Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconArrowForward.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconArrowForward.tsx
@@ -7,7 +7,7 @@ export default function SfIconArrowForward({
   ...attributes
 }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="arrow-forward">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="arrow-forward" {...attributes}>
       <path d="M11.3 19.3a.994.994 0 0 1-.288-.7.91.91 0 0 1 .263-.7l4.9-4.9H5a.968.968 0 0 1-.713-.288A.967.967 0 0 1 4 12a.97.97 0 0 1 .287-.713A.97.97 0 0 1 5 11h11.175l-4.9-4.9a.91.91 0 0 1-.263-.7.994.994 0 0 1 .288-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l6.6 6.6c.1.083.171.187.213.312.041.125.062.255.062.388s-.02.258-.062.375a.883.883 0 0 1-.213.325l-6.6 6.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconArrowUpward.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconArrowUpward.tsx
@@ -7,7 +7,7 @@ export default function SfIconArrowUpward({
   ...attributes
 }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="arrow-upward">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="arrow-upward" {...attributes}>
       <path d="M12 20a.965.965 0 0 1-.712-.288A.965.965 0 0 1 11 19V7.825L6.125 12.7c-.2.2-.438.3-.713.3a.973.973 0 0 1-.712-.3.96.96 0 0 1-.3-.7c0-.267.1-.5.3-.7l6.6-6.6a.88.88 0 0 1 .325-.213 1.212 1.212 0 0 1 .763 0 .681.681 0 0 1 .312.213l6.6 6.6c.2.2.3.433.3.7 0 .267-.1.5-.3.7-.2.2-.438.3-.713.3a.973.973 0 0 1-.712-.3L13 7.825V19a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 20Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconBlock.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconBlock.tsx
@@ -3,7 +3,7 @@ import { SfIconBase, SfIconSize } from '@storefront-ui/react';
 
 export default function SfIconBlock({ size = SfIconSize.base, viewBox = '0 0 24 24', ...attributes }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="block">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="block" {...attributes}>
       <path d="M12 22a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-.9-.146-1.767-.438-2.6A7.94 7.94 0 0 0 18.3 7.1L7.1 18.3c.7.55 1.467.97 2.3 1.262.833.292 1.7.438 2.6.438Zm-6.3-3.1L16.9 5.7a7.96 7.96 0 0 0-2.3-1.262A7.805 7.805 0 0 0 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 .9.146 1.767.438 2.6.291.833.712 1.6 1.262 2.3Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconCalendarToday.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconCalendarToday.tsx
@@ -7,7 +7,7 @@ export default function SfIconCalendarToday({
   ...attributes
 }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="calendar-today">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="calendar-today" {...attributes}>
       <path d="M5 22a1.93 1.93 0 0 1-1.413-.587A1.928 1.928 0 0 1 3 20V6c0-.55.196-1.02.587-1.412A1.927 1.927 0 0 1 5 4h1V2.975c0-.283.096-.517.287-.7A.993.993 0 0 1 7 2a.97.97 0 0 1 .713.287A.97.97 0 0 1 8 3v1h8V2.975c0-.283.096-.517.288-.7A.99.99 0 0 1 17 2a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v1h1c.55 0 1.021.196 1.413.588.391.391.587.862.587 1.412v14a1.93 1.93 0 0 1-.587 1.413A1.928 1.928 0 0 1 19 22H5Zm0-2h14V10H5v10Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconCall.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconCall.tsx
@@ -3,7 +3,7 @@ import { SfIconBase, SfIconSize } from '@storefront-ui/react';
 
 export default function SfIconCall({ size = SfIconSize.base, viewBox = '0 0 24 24', ...attributes }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="call">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="call" {...attributes}>
       <path d="M19.95 21c-2.15 0-4.246-.48-6.287-1.438a19.045 19.045 0 0 1-5.425-3.8 19.045 19.045 0 0 1-3.8-5.425C3.479 8.296 3 6.2 3 4.05c0-.3.1-.55.3-.75.2-.2.45-.3.75-.3H8.1a.96.96 0 0 1 .625.225.88.88 0 0 1 .325.575l.65 3.5c.033.233.03.446-.012.637a1.027 1.027 0 0 1-.288.513L6.975 10.9a16.4 16.4 0 0 0 2.638 3.375A18.626 18.626 0 0 0 13.1 17l2.35-2.35a1.4 1.4 0 0 1 .588-.338c.241-.075.479-.095.712-.062l3.45.7c.233.05.425.162.575.337.15.175.225.38.225.613v4.05c0 .3-.1.55-.3.75-.2.2-.45.3-.75.3ZM6.025 9l1.65-1.65L7.25 5H5.025c.083.683.2 1.358.35 2.025.15.667.367 1.325.65 1.975ZM19 18.95v-2.2l-2.35-.475-1.675 1.675c.65.283 1.313.508 1.988.675.675.167 1.354.275 2.037.325Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconCancel.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconCancel.tsx
@@ -3,7 +3,7 @@ import { SfIconBase, SfIconSize } from '@storefront-ui/react';
 
 export default function SfIconCancel({ size = SfIconSize.base, viewBox = '0 0 24 24', ...attributes }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="cancel">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="cancel" {...attributes}>
       <path
         fillRule="evenodd"
         d="M2 12C2 6.47 6.47 2 12 2s10 4.47 10 10-4.47 10-10 10S2 17.53 2 12Zm14.295 4.295a.997.997 0 0 0 0-1.41L13.41 12l2.885-2.885a.997.997 0 1 0-1.41-1.41L12 10.59 9.115 7.705a.997.997 0 0 0-1.41 1.41L10.59 12l-2.885 2.885a.997.997 0 0 0 1.41 1.41L12 13.41l2.885 2.885c.39.39 1.02.39 1.41 0Z"

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconCheck.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconCheck.tsx
@@ -3,7 +3,7 @@ import { SfIconBase, SfIconSize } from '@storefront-ui/react';
 
 export default function SfIconCheck({ size = SfIconSize.base, viewBox = '0 0 24 24', ...attributes }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="check">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="check" {...attributes}>
       <path d="M4.535 12.705 8 16.17l9.885-9.875a.997.997 0 0 1 1.41 1.41L8.707 18.293a1 1 0 0 1-1.414 0L3.12 14.12a1 1 0 0 1 1.415-1.415Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconCheckBox.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconCheckBox.tsx
@@ -3,7 +3,7 @@ import { SfIconBase, SfIconSize } from '@storefront-ui/react';
 
 export default function SfIconCheckBox({ size = SfIconSize.base, viewBox = '0 0 24 24', ...attributes }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="check-box">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="check-box" {...attributes}>
       <path d="M5 21a1.93 1.93 0 0 1-1.413-.587A1.928 1.928 0 0 1 3 19V5c0-.55.196-1.021.587-1.413A1.928 1.928 0 0 1 5 3h14c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413v14a1.93 1.93 0 0 1-.587 1.413A1.928 1.928 0 0 1 19 21H5Zm5.6-5.225c.133 0 .258-.02.375-.062a.883.883 0 0 0 .325-.213l5.675-5.675a.918.918 0 0 0 .275-.675c0-.267-.1-.5-.3-.7a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.4l-2.175-2.175a.918.918 0 0 0-.675-.275c-.267 0-.5.1-.7.3a.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.5c.1.1.208.171.325.213.117.041.242.062.375.062Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconCheckBoxOutlineBlank.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconCheckBoxOutlineBlank.tsx
@@ -7,7 +7,7 @@ export default function SfIconCheckBoxOutlineBlank({
   ...attributes
 }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="check-box-outline-blank">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="check-box-outline-blank" {...attributes}>
       <path
         fillRule="evenodd"
         d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm16 .5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-13Z"

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconCheckCircle.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconCheckCircle.tsx
@@ -7,7 +7,7 @@ export default function SfIconCheckCircle({
   ...attributes
 }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="check-circle">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="check-circle" {...attributes}>
       <path d="m10.6 13.8-2.175-2.175a.918.918 0 0 0-.675-.275c-.267 0-.5.1-.7.3a.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.9a.948.948 0 0 0 .7.275.948.948 0 0 0 .7-.275l5.675-5.675a.918.918 0 0 0 .275-.675c0-.267-.1-.5-.3-.7a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconChevronLeft.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconChevronLeft.tsx
@@ -7,7 +7,7 @@ export default function SfIconChevronLeft({
   ...attributes
 }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="chevron-left">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="chevron-left" {...attributes}>
       <path d="M14.706 17.297a.998.998 0 0 0 0-1.41l-3.876-3.885 3.877-3.885a.998.998 0 0 0-1.412-1.41l-4.588 4.588a1 1 0 0 0 0 1.414l4.588 4.588a.997.997 0 0 0 1.41 0Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconChevronRight.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconChevronRight.tsx
@@ -7,7 +7,7 @@ export default function SfIconChevronRight({
   ...attributes
 }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="chevron-right">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="chevron-right" {...attributes}>
       <path d="M8.705 17.297a.998.998 0 0 1-.001-1.41l3.876-3.885-3.876-3.885a.998.998 0 0 1 1.412-1.41l4.587 4.588a1 1 0 0 1 0 1.414l-4.587 4.588a.997.997 0 0 1-1.411 0Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconCircle.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconCircle.tsx
@@ -3,7 +3,7 @@ import { SfIconBase, SfIconSize } from '@storefront-ui/react';
 
 export default function SfIconCircle({ size = SfIconSize.base, viewBox = '0 0 24 24', ...attributes }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="circle">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="circle" {...attributes}>
       <path d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconClose.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconClose.tsx
@@ -3,7 +3,7 @@ import { SfIconBase, SfIconSize } from '@storefront-ui/react';
 
 export default function SfIconClose({ size = SfIconSize.base, viewBox = '0 0 24 24', ...attributes }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="close">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="close" {...attributes}>
       <path d="M18.295 5.705a.998.998 0 0 1 0 1.41L13.41 12l4.885 4.885a.997.997 0 1 1-1.41 1.41L12 13.41l-4.885 4.885a.997.997 0 1 1-1.41-1.41L10.59 12 5.705 7.115a.997.997 0 0 1 1.41-1.41L12 10.59l4.885-4.885a.997.997 0 0 1 1.41 0Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconCloseSm.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconCloseSm.tsx
@@ -3,7 +3,7 @@ import { SfIconBase, SfIconSize } from '@storefront-ui/react';
 
 export default function SfIconCloseSm({ size = SfIconSize.base, viewBox = '0 0 24 24', ...attributes }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="close-sm">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="close-sm" {...attributes}>
       <path
         fillRule="evenodd"
         d="M16.615 8.564a.974.974 0 0 0-1.378-1.378L11.9 10.522 8.563 7.186a.974.974 0 1 0-1.378 1.378l3.337 3.336-3.337 3.337a.974.974 0 1 0 1.378 1.378l3.337-3.337 3.336 3.337a.974.974 0 1 0 1.379-1.378L13.278 11.9l3.337-3.336Z"

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconCompareArrows.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconCompareArrows.tsx
@@ -7,7 +7,7 @@ export default function SfIconCompareArrows({
   ...attributes
 }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="compare-arrows">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="compare-arrows" {...attributes}>
       <path d="m15.3 13.3-3.6-3.6a.871.871 0 0 1-.212-.325A1.099 1.099 0 0 1 11.425 9c0-.133.021-.258.063-.375A.871.871 0 0 1 11.7 8.3l3.6-3.6c.2-.2.433-.3.7-.3.267 0 .5.1.7.3.2.2.3.437.3.712 0 .275-.1.513-.3.713L14.825 8H21a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.712A.965.965 0 0 1 21 10h-6.175l1.875 1.875c.2.2.3.433.3.7 0 .267-.1.5-.3.7-.2.2-.429.308-.687.325-.259.017-.496-.083-.713-.3Zm-8 5.975c.2.2.433.304.7.312.267.009.5-.087.7-.287l3.6-3.6a.88.88 0 0 0 .213-.325c.041-.117.062-.242.062-.375s-.02-.258-.062-.375a.883.883 0 0 0-.213-.325l-3.6-3.6a.96.96 0 0 0-.7-.3c-.267 0-.5.1-.7.3-.2.2-.3.437-.3.712 0 .275.1.513.3.713L9.175 14H3a.967.967 0 0 0-.712.287A.968.968 0 0 0 2 15c0 .283.096.52.288.712A.965.965 0 0 0 3 16h6.175L7.3 17.875c-.2.2-.3.433-.3.7 0 .267.1.5.3.7Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconContactSupport.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconContactSupport.tsx
@@ -7,7 +7,7 @@ export default function SfIconContactSupport({
   ...attributes
 }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="contact-support">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="contact-support" {...attributes}>
       <path d="m13 22-.25-3h-.25c-2.367 0-4.375-.825-6.025-2.475C4.825 14.875 4 12.867 4 10.5c0-2.367.825-4.375 2.475-6.025C8.125 2.825 10.133 2 12.5 2c1.183 0 2.287.22 3.312.662a8.6 8.6 0 0 1 2.701 1.825 8.588 8.588 0 0 1 1.824 2.7A8.279 8.279 0 0 1 21 10.5c0 2.533-.758 4.804-2.275 6.812C17.208 19.321 15.3 20.883 13 22Zm-.525-6.025c.283 0 .525-.1.725-.3.2-.2.3-.442.3-.725s-.1-.525-.3-.725c-.2-.2-.442-.3-.725-.3s-.525.1-.725.3c-.2.2-.3.442-.3.725s.1.525.3.725c.2.2.442.3.725.3ZM12.5 12.8c.183 0 .35-.067.5-.2a.988.988 0 0 0 .3-.55c.033-.217.125-.413.275-.588.15-.175.408-.445.775-.812.3-.3.55-.625.75-.975.2-.35.3-.725.3-1.125 0-.85-.287-1.488-.862-1.913C13.963 6.212 13.283 6 12.5 6c-.583 0-1.087.133-1.512.4a3.41 3.41 0 0 0-1.038 1 .617.617 0 0 0-.063.575c.075.2.23.342.463.425a.65.65 0 0 0 .5 0c.167-.067.317-.192.45-.375a1.67 1.67 0 0 1 .488-.45c.191-.117.429-.175.712-.175.45 0 .788.125 1.013.375.225.25.337.525.337.825 0 .283-.083.537-.25.762a6.18 6.18 0 0 1-.6.688c-.467.4-.78.725-.938.975-.158.25-.254.592-.287 1.025-.017.2.046.375.188.525.141.15.32.225.537.225ZM15 17v1.35c1.183-1 2.146-2.17 2.887-3.512A8.822 8.822 0 0 0 19 10.5c0-1.817-.629-3.354-1.887-4.613C15.854 4.629 14.317 4 12.5 4c-1.817 0-3.354.629-4.612 1.887C6.629 7.146 6 8.683 6 10.5c0 1.817.63 3.354 1.888 4.613C9.146 16.371 10.683 17 12.5 17H15Z" />
     </SfIconBase>
   );

diff --git a/packages/sfui/frameworks/react/components/SfIcons/SfIconCreditCard.tsx b/packages/sfui/frameworks/react/components/SfIcons/SfIconCreditCard.tsx
@@ -7,7 +7,7 @@ export default function SfIconCreditCard({
   ...attributes
 }: SfIconProps) {
   return (
-    <SfIconBase {...attributes} size={size} viewBox={viewBox} data-testid="credit-card">
+    <SfIconBase size={size} viewBox={viewBox} data-testid="credit-card" {...attributes}>
       <path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2Zm0 14H4v-6h16v6Zm0-10H4V6h16v2Z" />
     </SfIconBase>
   );