Icons inlined

chromaui-demo · Dec 8, 2023 · 5c88208 · 5c88208
1 parent d65629f
commit 5c88208
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 19 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -62,7 +62,7 @@ type DefaultProps = {
   /**
    * Does the button have an icon?
    */
-  icon?: string
+  icon?: React.ReactNode
   /**
    * Size of the icon
    */
@@ -107,7 +107,9 @@ export const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
       {...props}
     >
       {icon && (
-        <Icon color={clear ? color.primaryText : color.buttonText} size={iconSize} name={icon} />
+        <Icon color={clear ? color.primaryText : color.buttonText} size={iconSize}>
+          {icon}
+        </Icon>
       )}
       {icon && children && <Spacer />}
       {children}

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -106,7 +106,25 @@ const ThemeToggle = () => {
       round
       clear
       aria-label={`turn on ${darkMode.value ? 'light' : 'dark'} mode`}
-      icon={darkMode.value ? 'moon' : 'sun'}
+      icon={
+        darkMode.value ? (
+          <>
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+          </>
+        ) : (
+          <>
+            <circle cx="12" cy="12" r="5"></circle>
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+          </>
+        )
+      }
       onClick={darkMode.toggle}
     />
   )
@@ -149,7 +167,17 @@ export const HeaderComponent = ({
               <Button clear>All restaurants</Button>
             </Link>
           </span>
-          <Button aria-label="food cart" icon="cart" onClick={toggleCartVisibility}>
+          <Button
+            aria-label="food cart"
+            icon={
+              <>
+                <circle cx="9" cy="21" r="1"></circle>
+                <circle cx="20" cy="21" r="1"></circle>
+                <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+              </>
+            }
+            onClick={toggleCartVisibility}
+          >
             {totalPrice > 0 && (
               <>
                 <CartText type="span">Order</CartText>

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -1,18 +1,17 @@
 import styled, { useTheme } from 'styled-components'
-
-import Icons from '../../assets/icons/sprite-map.svg'
+import { ReactNode } from 'react'
 
 const StyledSVG = styled.svg`
   display: block;
 `
 
 type IconProps = {
-  name: string
   color?: string
   size?: number | string
+  children?: ReactNode
 }
 
-export const Icon = ({ name, color, size = '1.5rem' }: IconProps) => {
+export const Icon = ({ color, size = '1.5rem', children }: IconProps) => {
   const { color: themeColor } = useTheme()
   return (
     <StyledSVG
@@ -21,7 +20,7 @@ export const Icon = ({ name, color, size = '1.5rem' }: IconProps) => {
       height={size}
       style={{ minWidth: size }}
     >
-      <use xlinkHref={`${Icons}#${name}`} />
+      {children}
     </StyledSVG>
   )
 }
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 import styled, { css } from 'styled-components'
 
 import { Icon } from '../Icon'
@@ -21,13 +21,15 @@ const StyledButton = styled.button<{ small: boolean }>(
 )
 
 type IconButtonProps = {
-  name: string
+  icon?: ReactNode
   small?: boolean
   onClick?: () => void
 } & ComponentProps<typeof StyledButton>
 
-export const IconButton = ({ small = false, name, ...props }: IconButtonProps) => (
+export const IconButton = ({ small = false, icon, ...props }: IconButtonProps) => (
   <StyledButton type="button" small={small} {...props}>
-    <Icon name={name} size={small ? 15 : 24} color="#202020" />
+    <Icon size={small ? 15 : 24} color="#202020">
+      {icon}
+    </Icon>
   </StyledButton>
 )
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -39,7 +39,12 @@ export const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
               onClick={onClose}
               clear
               round
-              icon="cross"
+              icon={
+                <>
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </>
+              }
               aria-label="close modal"
               iconSize={16}
             />

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -44,7 +44,12 @@ export const Sidebar: React.FC<React.PropsWithChildren<SidebarProps>> = ({
               onClick={onClose}
               clear
               round
-              icon="cross"
+              icon={
+                <>
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </>
+              }
               iconSize={16}
             />
           </TopBar>

diff --git a/src/pages/HomePage/components/RestaurantsSection/RestaurantsSection.tsx b/src/pages/HomePage/components/RestaurantsSection/RestaurantsSection.tsx
@@ -33,8 +33,26 @@ export const RestaurantsSection = ({ title }: RestaurantsSectionProps) => {
       <Carousel
         draggable={isMobile}
         partialVisible={isMobile}
-        customLeftArrow={<PreviousButton name="arrow-left" />}
-        customRightArrow={<NextButton name="arrow-right" />}
+        customLeftArrow={
+          <PreviousButton
+            icon={
+              <>
+                <line x1="19" y1="12" x2="5" y2="12"></line>
+                <polyline points="12 19 5 12 12 5"></polyline>
+              </>
+            }
+          />
+        }
+        customRightArrow={
+          <NextButton
+            icon={
+              <>
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+                <polyline points="12 5 19 12 12 19"></polyline>
+              </>
+            }
+          />
+        }
         responsive={{
           desktop: {
             breakpoint: { max: 5000, min: 1024 },

diff --git a/src/pages/RestaurantDetailPage/components/FoodItemModal/FoodItemModal.tsx b/src/pages/RestaurantDetailPage/components/FoodItemModal/FoodItemModal.tsx
@@ -98,7 +98,7 @@ export const FoodItemModal = ({
                 aria-label="decrease quantity by one"
                 round
                 clear
-                icon="minus"
+                icon={<line x1="5" y1="12" x2="19" y2="12"></line>}
                 onClick={() => setQuantity(quantity - 1)}
                 disabled={quantity <= 1}
               />
@@ -107,7 +107,12 @@ export const FoodItemModal = ({
                 aria-label="increase quantity by one"
                 round
                 clear
-                icon="plus"
+                icon={
+                  <>
+                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                  </>
+                }
                 onClick={() => setQuantity(quantity + 1)}
                 disabled={quantity >= 10}
               />