Complete button component

src/App.tsx

@@ -1,6 +1,4 @@
 import { Route, Switch } from 'react-router-dom';
-import { Button } from './components';
-// import { Add } from './assets';
 import GlobalStyles from './GlobalStyles';
 
 const App = () => {
@@ -9,17 +7,7 @@ const App = () => {
       <GlobalStyles />
       <Switch>
         <Route path='/' exact>
-          <div style={{ margin: '2rem', width: '95vw' }}>
+          <div style={{ margin: '2rem', width: '95vw' }}></div>
-            <Button
-              color='client'
-              // size='big'
-              variant='outlined'
-              text='Button'
-              // fullWidth
-              // iconLeft={<Add />}
-              onClick={() => {}}
-            />
-          </div>
         </Route>
       </Switch>
     </>

src/assets/icons/add.svg

@@ -1,4 +1,4 @@
 <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.95215 1V14.8568" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.95215 1V14.8568" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M1 7.92871H16.9048" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 7.92871H16.9048" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/components/Button/index.tsx

@@ -31,9 +31,9 @@ const Button = ({
       fullWidth={fullWidth}
       onClick={onClick}
     >
-      {iconLeft && iconLeft}
+      {iconLeft && <span className='icon left'>{iconLeft}</span>}
       {text}
-      {iconRight && iconRight}
+      {iconRight && <span className='icon right'>{iconRight}</span>}
     </Wrapper>
   );
 };

src/components/Button/styles.ts

@@ -17,22 +17,61 @@ export const Wrapper = styled.button<WrapperProps>`
   background: none;
   font-weight: bold;
 
+  .icon svg {
+    display: flex;
+    align-items: center;
+  }
+
+  ${({ iconLeft, iconRight }) => {
+    if (iconLeft || iconRight)
+      return css`
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      `;
+    return '';
+  }}
+
+  .icon.left {
+    margin-right: 0.5rem;
+  }
+
+  .icon.right {
+    margin-left: 0.5rem;
+  }
+
   ${({ size }) => {
     switch (size) {
       case 'small':
         return css`
           padding: 0.625rem 1.875rem;
           font-size: 1rem;
+
+          .icon svg {
+            width: 1rem;
+            height: 1rem;
+          }
         `;
       case 'big':
         return css`
           padding: 0.625rem 1.875rem;
           font-size: 1.25rem;
+
+          .icon svg {
+            width: 1.25rem;
+            height: 1.25rem;
+          }
         `;
       default:
         return css`
           padding: 0.625rem 1.875rem;
           font-size: 1rem;
+
+          .icon svg {
+            width: 1rem;
+            height: 1rem;
+          }
         `;
     }
   }}
@@ -42,6 +81,11 @@ export const Wrapper = styled.button<WrapperProps>`
     css`
       width: 100%;
       font-size: 1.25rem;
+
+      .icon svg {
+        width: 1.25rem;
+        height: 1.25rem;
+      }
     `};
 
   ${({ variant, color, theme }) => {
@@ -51,6 +95,10 @@ export const Wrapper = styled.button<WrapperProps>`
           background: ${theme.colors[color].main};
           color: ${theme.colors.white.main};
 
+          .icon svg path {
+            stroke: ${theme.colors.white.main};
+          }
+
           &:hover {
             background: ${theme.colors[color].dark};
           }
@@ -60,8 +108,16 @@ export const Wrapper = styled.button<WrapperProps>`
           background: ${theme.colors[color].light};
           color: #262628;
 
+          .icon svg path {
+            stroke: #262628;
+          }
+
           &:hover {
             color: ${theme.colors.white.main};
+
+            .icon svg path {
+              stroke: ${theme.colors.white.main};
+            }
           }
         `;
       case 'outlined':
@@ -70,9 +126,17 @@ export const Wrapper = styled.button<WrapperProps>`
           color: ${theme.colors[color].main};
           border: 2px solid ${theme.colors[color].main};
 
+          .icon svg path {
+            stroke: ${theme.colors[color].main};
+          }
+
           &:hover {
             background: ${theme.colors[color].main};
             color: ${theme.colors.white.main};
+
+            .icon svg path {
+              stroke: ${theme.colors.white.main};
+            }
           }
         `;
       case 'text':
@@ -80,12 +144,20 @@ export const Wrapper = styled.button<WrapperProps>`
           background: none;
           color: ${theme.colors[color].main};
           padding: 0;
+
+          .icon svg path {
+            stroke: ${theme.colors[color].main};
+          }
         `;
       default:
         return css`
           background: none;
           color: ${theme.colors[color].main};
           padding: 0;
+
+          .icon svg path {
+            stroke: ${theme.colors[color].main};
+          }
         `;
     }
   }}