unify svg

vtex-sites · Mar 14, 2022 · 6f00db7 · 6f00db7
1 parent 046896b
commit 6f00db7
Show file tree

Hide file tree

Showing 44 changed files with 116 additions and 390 deletions.
diff --git a/src/components/cart/CartItem/CartItem.tsx b/src/components/cart/CartItem/CartItem.tsx
@@ -8,7 +8,7 @@ import { useCart } from 'src/sdk/cart/useCart'
 import { useRemoveButton } from 'src/sdk/cart/useRemoveButton'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import type { CartItem as ICartItem } from 'src/sdk/cart/validate'
-import IconSVG from 'src/components/common/IconSVG'
+import Icon from 'src/components/ui/Icon'
 
 import './cart-item.scss'
 
@@ -72,7 +72,7 @@ function CartItem({ item }: Props) {
       <CardActions>
         <Button
           variant="tertiary"
-          icon={<IconSVG name="XCircle" width={18} height={18} />}
+          icon={<Icon name="XCircle" width={18} height={18} />}
           iconPosition="left"
           {...btnProps}
         >

diff --git a/src/components/cart/CartSidebar/CartSidebar.tsx b/src/components/cart/CartSidebar/CartSidebar.tsx
@@ -8,7 +8,7 @@ import SlideOver from 'src/components/ui/SlideOver'
 import { useCart } from 'src/sdk/cart/useCart'
 import { useCheckoutButton } from 'src/sdk/cart/useCheckoutButton'
 import { useUI } from 'src/sdk/ui'
-import IconSVG from 'src/components/common/IconSVG'
+import Icon from 'src/components/ui/Icon'
 
 import CartItem from '../CartItem'
 import EmptyCart from '../EmptyCart'
@@ -47,11 +47,11 @@ function CartSidebar() {
         <IconButton
           data-testid="cart-sidebar-button-close"
           aria-label="Close Cart"
-          icon={<IconSVG name="X" width={32} height={32} />}
+          icon={<Icon name="X" width={32} height={32} />}
           onClick={() => dismissTransition.current?.()}
         />
       </header>
-      <Alert icon={<IconSVG name="Truck" width={24} height={24} />}>
+      <Alert icon={<Icon name="Truck" width={24} height={24} />}>
         Free shiping starts at $300
       </Alert>
 
@@ -77,7 +77,7 @@ function CartSidebar() {
                   variant="primary"
                   icon={
                     !isValidating && (
-                      <IconSVG name="ArrowRight" width={18} height={18} />
+                      <Icon name="ArrowRight" width={18} height={18} />
                     )
                   }
                   iconPosition="right"

diff --git a/src/components/cart/CartToggle/CartToggle.tsx b/src/components/cart/CartToggle/CartToggle.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import IconButton from 'src/components/ui/IconButton'
 import { useCartToggleButton } from 'src/sdk/cart/useCartToggleButton'
-import IconSVG from 'src/components/common/IconSVG'
+import Icon from 'src/components/ui/Icon'
 
 import './cart-toggle.scss'
 
@@ -13,7 +13,7 @@ function CartToggle() {
       {...btnProps}
       className="cart-toggle"
       aria-label={`Cart with ${btnProps['data-items']} items`}
-      icon={<IconSVG name="ShoppingCart" width={32} height={32} />}
+      icon={<Icon name="ShoppingCart" width={32} height={32} />}
     />
   )
 }

diff --git a/src/components/cart/EmptyCart/EmptyCart.tsx b/src/components/cart/EmptyCart/EmptyCart.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Button from 'src/components/ui/Button'
-import EmptyState from 'src/components/common/EmptyState'
-import IconSVG from 'src/components/common/IconSVG'
+import EmptyState from 'src/components/ui/EmptyState'
+import Icon from 'src/components/ui/Icon'
 
 interface Props {
   /**
@@ -14,7 +14,7 @@ function EmptyCart({ onDismiss }: Props) {
   return (
     <EmptyState>
       <header data-empty-cart-title>
-        <IconSVG name="ShoppingCart" width={56} height={56} weight="thin" />
+        <Icon name="ShoppingCart" width={56} height={56} weight="thin" />
         <p>Your Cart is empty</p>
       </header>
       <Button onClick={onDismiss} variant="secondary">

diff --git a/src/components/common/Alert/Alert.tsx b/src/components/common/Alert/Alert.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react'
 import UIAlert from 'src/components/ui/Alert'
 import { mark } from 'src/sdk/tests/mark'
 import type { PropsWithChildren } from 'react'
-import IconSVG from 'src/components/common/IconSVG'
+import Icon from 'src/components/ui/Icon'
 
 function Alert({ children }: PropsWithChildren<unknown>) {
   const [displayAlert, setDisplayAlert] = useState(true)
@@ -18,7 +18,7 @@ function Alert({ children }: PropsWithChildren<unknown>) {
 
   return (
     <UIAlert
-      icon={<IconSVG name="BellRinging" width={24} height={24} />}
+      icon={<Icon name="BellRinging" width={24} height={24} />}
       dismissible
       onClose={onAlertClose}
     >

diff --git a/src/components/common/Footer/Footer.tsx b/src/components/common/Footer/Footer.tsx
@@ -8,35 +8,12 @@ import { mark } from 'src/sdk/tests/mark'
 import IncentivesFooter from 'src/components/sections/Incentives/IncentivesFooter'
 import SROnly from 'src/components/ui/SROnly'
 import Link from 'src/components/ui/Link'
+import Icon from 'src/components/ui/Icon'
 
 import FooterLinks from './FooterLinks'
 
 import './footer.scss'
 
-function SocialIcon({ name }: { name: string }) {
-  return (
-    <img
-      src={`/icons/${name}.svg`}
-      alt={`${name} icon`}
-      width="24px"
-      height="24px"
-      loading="lazy"
-    />
-  )
-}
-
-function PaymentIcon({ name }: { name: string }) {
-  return (
-    <img
-      src={`/icons/${name}.svg`}
-      alt={`${name} icon`}
-      width="34px"
-      height="24px"
-      loading="lazy"
-    />
-  )
-}
-
 function Footer() {
   return (
     <footer className="footer / grid-content-full">
@@ -56,7 +33,11 @@ function Footer() {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <UIIcon component={<SocialIcon name="Facebook" />} />
+                <UIIcon
+                  component={
+                    <Icon width="24px" height="24px" name="Facebook" />
+                  }
+                />
               </Link>
             </li>
             <li>
@@ -67,7 +48,11 @@ function Footer() {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <UIIcon component={<SocialIcon name="Instagram" />} />
+                <UIIcon
+                  component={
+                    <Icon width="24px" height="24px" name="Instagram" />
+                  }
+                />
               </Link>
             </li>
             <li>
@@ -78,7 +63,11 @@ function Footer() {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <UIIcon component={<SocialIcon name="Pinterest" />} />
+                <UIIcon
+                  component={
+                    <Icon width="24px" height="24px" name="Pinterest" />
+                  }
+                />
               </Link>
             </li>
             <li>
@@ -89,7 +78,9 @@ function Footer() {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <UIIcon component={<SocialIcon name="Twitter" />} />
+                <UIIcon
+                  component={<Icon width="24px" height="24px" name="Twitter" />}
+                />
               </Link>
             </li>
           </UIList>
@@ -113,35 +104,35 @@ function Footer() {
           <p className="title-sub-subsection">Payment Methods</p>
           <UIList>
             <li>
-              <PaymentIcon name="Visa" />
+              <Icon width="34px" height="24px" name="Visa" />
               <SROnly text="Visa" />
             </li>
             <li>
-              <PaymentIcon name="Diners" />
+              <Icon width="34px" height="24px" name="Diners" />
               <SROnly text="Diners Club" />
             </li>
             <li>
-              <PaymentIcon name="Mastercard" />
+              <Icon width="34px" height="24px" name="Mastercard" />
               <SROnly text="Mastercard" />
             </li>
             <li>
-              <PaymentIcon name="EloCard" />
+              <Icon width="34px" height="24px" name="EloCard" />
               <SROnly text="Elo Card" />
             </li>
             <li>
-              <PaymentIcon name="PayPal" />
+              <Icon width="34px" height="24px" name="PayPal" />
               <SROnly text="PayPal" />
             </li>
             <li>
-              <PaymentIcon name="Stripe" />
+              <Icon width="34px" height="24px" name="Stripe" />
               <SROnly text="Stripe" />
             </li>
             <li>
-              <PaymentIcon name="GooglePay" />
+              <Icon width="34px" height="24px" name="GooglePay" />
               <SROnly text="Google Pay" />
             </li>
             <li>
-              <PaymentIcon name="ApplePay" />
+              <Icon width="34px" height="24px" name="ApplePay" />
               <SROnly text="Apple Pay" />
             </li>
           </UIList>

diff --git a/src/components/common/Footer/footer.scss b/src/components/common/Footer/footer.scss
@@ -93,6 +93,11 @@
       }
     }
 
+    svg {
+      border: 1px solid #bbc1c6;
+      border-radius: 3px;
+    }
+
     [data-store-list] {
       display: grid;
       grid-template-columns: repeat(4, minmax(0, max-content));

diff --git a/src/components/common/IconSVG/index.tsx b/src/components/common/IconSVG/index.tsx
diff --git a/src/components/common/Navbar/Navbar.tsx b/src/components/common/Navbar/Navbar.tsx
@@ -12,7 +12,7 @@ import SlideOver from 'src/components/ui/SlideOver'
 import { useStoreCollection } from 'src/hooks/useAllCollections'
 import { mark } from 'src/sdk/tests/mark'
 import PostalCodeInput from 'src/components/common/PostalCode'
-import IconSVG from 'src/components/common/IconSVG'
+import Icon from 'src/components/ui/Icon'
 import SearchInput from 'src/components/common/SearchInput'
 
 import './navbar.scss'
@@ -62,7 +62,7 @@ function Navbar() {
               <IconButton
                 classes="navbar__menu"
                 aria-label="Open Menu"
-                icon={<IconSVG name="List" width={32} height={32} />}
+                icon={<Icon name="List" width={32} height={32} />}
                 onClick={() => setShowMenu(true)}
               />
               <LinkGatsby
@@ -84,7 +84,7 @@ function Navbar() {
               <IconButton
                 classes="navbar__collapse"
                 aria-label="Collapse search bar"
-                icon={<IconSVG name="CaretLeft" width={32} height={32} />}
+                icon={<Icon name="CaretLeft" width={32} height={32} />}
                 onClick={() => setSearchExpanded(false)}
               />
             )}
@@ -128,7 +128,7 @@ function Navbar() {
             <IconButton
               classes="navbar__button"
               aria-label="Close Menu"
-              icon={<IconSVG name="X" width={32} height={32} />}
+              icon={<Icon name="X" width={32} height={32} />}
               onClick={() => dismissTransition.current?.()}
             />
           </header>

diff --git a/src/components/common/SearchInput/SearchInput.tsx b/src/components/common/SearchInput/SearchInput.tsx
@@ -12,7 +12,7 @@ import type {
   SearchInputRef,
 } from '@faststore/ui'
 import useSearchHistory from 'src/sdk/search/useSeachHistory'
-import IconSVG from 'src/components/common/IconSVG'
+import Icon from 'src/components/ui/Icon'
 
 import './search-input.scss'
 
@@ -52,7 +52,7 @@ const SearchInput = React.forwardRef<SearchInputRef, SearchInputProps>(
       <UISearchInput
         ref={ref}
         icon={
-          <IconSVG
+          <Icon
             name="MagnifyingGlass"
             onClick={onSearchClick}
             data-testid={buttonTestId}

diff --git a/src/components/product/OutOfStock/OutOfStock.tsx b/src/components/product/OutOfStock/OutOfStock.tsx
@@ -2,7 +2,7 @@ import type { ReactElement } from 'react'
 import React, { useState } from 'react'
 import { Input } from '@faststore/ui'
 import Button from 'src/components/ui/Button'
-import IconSVG from 'src/components/common/IconSVG'
+import Icon from 'src/components/ui/Icon'
 
 export interface OutOfStockProps {
   /**
@@ -24,7 +24,7 @@ export interface OutOfStockProps {
   title?: string
   /**
    * Notification icon.
-   * @default <IconSVG name="Bell" />
+   * @default <Icon name="Bell" />
    */
   icon?: ReactElement
   /**
@@ -38,7 +38,7 @@ function OutOfStock(props: OutOfStockProps) {
     title = 'Out of Stock',
     notificationMsg = 'Notify me when available',
     buttonTxt = 'Send',
-    icon = <IconSVG name="Bell" />,
+    icon = <Icon name="Bell" />,
     onSubmit,
     testId = 'store-out-of-stock',
   } = props
@@ -59,7 +59,7 @@ function OutOfStock(props: OutOfStockProps) {
       />
       <Button
         variant="primary"
-        icon={<IconSVG name="Bell" width={16} height={16} />}
+        icon={<Icon name="Bell" width={16} height={16} />}
         iconPosition="left"
         onClick={() => onSubmit(email)}
       >

diff --git a/src/components/search/Filter/Filter.tsx b/src/components/search/Filter/Filter.tsx
@@ -8,7 +8,7 @@ import type {
   IStoreSelectedFacet,
   Filter_FacetsFragment,
 } from '@generated/graphql'
-import IconSVG from 'src/components/common/IconSVG'
+import Icon from 'src/components/ui/Icon'
 
 import Facets from './Facets'
 
@@ -200,7 +200,7 @@ function Filter({
               data-testid="filter-modal-button-close"
               classes="filter-modal__button"
               aria-label="Close Filters"
-              icon={<IconSVG name="X" width={32} height={32} />}
+              icon={<Icon name="X" width={32} height={32} />}
               onClick={() => {
                 setSelectedFacets(searchState.selectedFacets)
                 dismissTransition.current?.()

diff --git a/src/components/sections/Hero/Hero.tsx b/src/components/sections/Hero/Hero.tsx
@@ -6,7 +6,7 @@ import UIHero, {
 } from 'src/components/ui/Hero'
 import Image from 'src/components/ui/Image/Image'
 import { LinkButton } from 'src/components/ui/Button'
-import IconSVG from 'src/components/common/IconSVG'
+import Icon from 'src/components/ui/Icon'
 
 import Section from '../Section'
 
@@ -61,8 +61,7 @@ const Hero = ({
               {!!link && (
                 <HeroLink>
                   <LinkButton to={link} inverse>
-                    {linkText}{' '}
-                    <IconSVG name="ArrowRight" width={24} height={24} />
+                    {linkText} <Icon name="ArrowRight" width={24} height={24} />
                   </LinkButton>
                 </HeroLink>
               )}