ADDED: Icon wrapper for more elegant way to placement icon in buttons

TODO: Add styles for selected segmented button
DONE: Base styles for segmented buttons

src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx

@@ -1,29 +1,51 @@
-import React, { cloneElement, forwardRef, ReactElement } from 'react';
-import { SegmentedButtonProps } from './segmented-buttons.types';
+import React, { forwardRef } from 'react';
+import {
+    SegmentedButton,
+    SegmentedButtonsProps,
+} from './segmented-buttons.types';
+import { string } from 'prop-types';
+import { ButtonLayout } from '../../components';
+import { ButtonLayoutProps } from '../button-layout/button-layout.types';
+import { IconWrapper } from '../../icon/icon-wrapper';
+
+export const SegmentButton = forwardRef<
+    HTMLButtonElement,
+    ButtonLayoutProps & SegmentedButton
+>(({ centralRipple = false, iconPlace = 'left', icon, ...props }, ref) => {
+    const classes = `m3-button-segment ${props.className ?? ''}`.trimEnd();
+    return (
+        <ButtonLayout
+            {...props}
+            centralRipple={centralRipple}
+            className={classes}
+            ref={ref}
+        >
+            <IconWrapper icon={icon} iconPlace={iconPlace}>
+                {props.children}
+            </IconWrapper>
+            <span className={'m3 m3-button-segment-state-layer'} />
+        </ButtonLayout>
+    );
+});
+
+SegmentButton.propTypes = {
+    children: string,
+};
 
 export const SegmentedButtons = forwardRef<
     HTMLDivElement,
-    SegmentedButtonProps
+    SegmentedButtonsProps
 >(({ children, ...props }, ref) => {
     if (children.length <= 1) {
         throw 'You must build segmented button with 2 or more buttton';
     }
 
-    const buttons = children.map((button: ReactElement, index) => {
-        const classes =
-            `m3-button-segment ${button.props.className ?? ''}`.trimEnd();
-        return cloneElement(button, {
-            className: classes,
-            key: index,
-        });
-    });
-
     return (
         <div
             className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()}
             ref={ref}
         >
-            {buttons}
+            {children}
         </div>
     );
 });