@faststore/components 2.0.96-alpha.0 → 2.0.99-alpha.0

package/src/atoms/Icon/Icon.tsx

@@ -1,25 +1,51 @@
-import type { HTMLAttributes, ReactNode } from 'react'
-import React, { forwardRef } from 'react'
+import type { SVGProps } from 'react'
+import React, { forwardRef } from "react"
 
-export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+type IconWeight = 'thin' | 'light' | 'regular' | 'bold'
+
+const mapWeightToValue: Record<IconWeight, number> = {
+  bold: 24,
+  regular: 16,
+  light: 12,
+  thin: 8,
+}
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
   testId?: string
   /**
-   * A React component that will be rendered as an icon.
+   * Symbol id from element to render. Take a look at `/static/icons.svg`.
+   *
+   * Example: <Icon name="Bell" />
+   */
+  name: string
+  /**
+   * SVG weight.
+   *
+   * @default 'regular'
    */
-  component: ReactNode
+  weight?: IconWeight
 }
 
-const Icon = forwardRef<HTMLSpanElement, IconProps>(function Button(
-  { component, testId = 'fs-icon', ...otherProps }: IconProps,
+const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
+  { testId = 'fs-icon', name, weight = 'regular', ...otherProps }: IconProps,
   ref
 ) {
+  const {width, height} = otherProps
   return (
-    <span ref={ref} data-fs-icon data-testid={testId} {...otherProps}>
-      {component}
-    </span>
+    <svg
+      ref={ref}
+      data-fs-icon
+      data-testid={testId}
+      width={width ?? 24}
+      height={height ?? 24}
+      strokeWidth={mapWeightToValue[weight]}
+      {...otherProps}
+    >
+      <use href={`/icons.svg#${name}`} />
+    </svg>
   )
 })
 

package/src/atoms/Select/Select.tsx

@@ -1,7 +1,6 @@
-import React, { forwardRef } from 'react'
 import type { SelectHTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
 import { Icon } from '../..'
-import { CaretDown } from '../../assets'
 
 export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   /**
@@ -33,7 +32,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
           </option>
         ))}
       </select>
-      <Icon data-fs-select-icon component={<CaretDown />} />
+      <Icon data-fs-select-icon name="CaretDown" />
     </div>
   )
 })

package/src/index.ts

@@ -1,6 +1,3 @@
-// Assets
-export * from './assets'
-
 // Hooks
 export * from './hooks'
 

package/src/molecules/Accordion/AccordionButton.tsx

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react'
 import type { ReactNode } from 'react'
+import React, { forwardRef } from 'react'
 
 import { useAccordion } from './Accordion'
 import { useAccordionItem } from './AccordionItem'
 
-import { Button, MinusCircle, PlusCircle } from '../..'
 import type { ButtonProps } from '../..'
+import { Button, Icon } from '../..'
 
 export interface AccordionButtonProps extends ButtonProps {
   /**
@@ -26,8 +26,8 @@ const AccordionButton = forwardRef<HTMLButtonElement, AccordionButtonProps>(
   function AccordionButton(
     {
       testId = 'fs-accordion-button',
-      expandedIcon = <MinusCircle data-icon="expanded" />,
-      collapsedIcon = <PlusCircle data-icon="collapsed" />,
+      expandedIcon = <Icon name="MinusCircle" data-icon="expanded" />,
+      collapsedIcon = <Icon name="PlusCircle" data-icon="collapsed" />,
       children,
       ...otherProps
     },

package/src/molecules/Alert/Alert.tsx

@@ -1,12 +1,9 @@
 import type { HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-import { useCallback } from 'react'
+import React, { forwardRef, useCallback } from 'react'
 
-import { Button, Link, Icon, LinkProps } from '../../'
+import { Button, Icon, Link, LinkProps } from '../../'
 
-import { X } from '../../assets'
-
-import type { ReactNode, MouseEvent } from 'react'
+import type { MouseEvent, ReactNode } from 'react'
 
 export interface AlertProps
   extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
@@ -64,7 +61,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
       data-fs-alert-dismissible={dismissible}
       {...otherProps}
     >
-      {icon && <Icon component={icon} />}
+      {React.isValidElement(icon) && icon}
 
       <p data-fs-alert-content>{children}</p>
 
@@ -73,7 +70,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
       {dismissible && (
         <Button data-fs-alert-button aria-label="Close" onClick={handleClose}>
           <span>
-            <Icon component={<X />} />
+            <Icon name="X" />
           </span>
         </Button>
       )}

package/src/molecules/Breadcrumb/BreadcrumbBase.tsx

@@ -1,11 +1,16 @@
-import React, { cloneElement, forwardRef, ReactElement, ReactNode, useCallback } from 'react'
-import { ArrowElbowDownRight, DotsThree } from '../../assets'
+import React, {
+  cloneElement,
+  forwardRef,
+  ReactElement,
+  ReactNode,
+  useCallback,
+} from 'react'
 import Icon from '../../atoms/Icon'
 import Link from '../../atoms/Link'
 import Dropdown, {
   DropdownButton,
-  DropdownMenu,
   DropdownItem,
+  DropdownMenu,
 } from '../Dropdown'
 import BreadcrumbPure, { BreadcrumbPureProps } from './BreadcrumbPure'
 import HomeLink from './HomeLink'
@@ -66,8 +71,10 @@ const BreadcrumbBase = forwardRef<HTMLDivElement, BreadcrumbBaseProps>(
       isDesktop = false,
       renderLink,
       homeLink = <HomeLink />,
-      dropdownButtonIcon = <Icon component={<DotsThree />} />,
-      collapsedItemsIcon = <Icon component={<ArrowElbowDownRight />} />,
+      dropdownButtonIcon = <Icon name="DotsThree" />,
+      collapsedItemsIcon = (
+        <Icon data-fs-dropdown-item-icon name="ArrowElbowDownRight" />
+      ),
       ...otherProps
     },
     ref
@@ -90,23 +97,33 @@ const BreadcrumbBase = forwardRef<HTMLDivElement, BreadcrumbBaseProps>(
 
     const collapseBreadcrumb = breadcrumbList.length > 4
 
-    const breadcrumbLink = useCallback((renderLinkProps: RenderLinkProps) => {
-      const breadcrumbItem = renderLink?.(renderLinkProps)
-      const itemProps = renderLinkProps.collapsed
-        ? {
-            'data-fs-breadcrumb-dropdown-link': true,
-          }
-        : {
-            'data-fs-breadcrumb-link': true,
-          }
-      return breadcrumbItem ? (
-        cloneElement(breadcrumbItem, {...itemProps, key: renderLinkProps.itemProps.position })
-      ) : (
-        <Link {...itemProps} href={renderLinkProps.itemProps.item} key={renderLinkProps.itemProps.position}>
-          {renderLinkProps.itemProps.name}
-        </Link>
-      )
-    }, [renderLink])
+    const breadcrumbLink = useCallback(
+      (renderLinkProps: RenderLinkProps) => {
+        const breadcrumbItem = renderLink?.(renderLinkProps)
+        const itemProps = renderLinkProps.collapsed
+          ? {
+              'data-fs-breadcrumb-dropdown-link': true,
+            }
+          : {
+              'data-fs-breadcrumb-link': true,
+            }
+        return breadcrumbItem ? (
+          cloneElement(breadcrumbItem, {
+            ...itemProps,
+            key: renderLinkProps.itemProps.position,
+          })
+        ) : (
+          <Link
+            {...itemProps}
+            href={renderLinkProps.itemProps.item}
+            key={renderLinkProps.itemProps.position}
+          >
+            {renderLinkProps.itemProps.name}
+          </Link>
+        )
+      },
+      [renderLink]
+    )
 
     return (
       <BreadcrumbPure
@@ -115,7 +132,7 @@ const BreadcrumbBase = forwardRef<HTMLDivElement, BreadcrumbBaseProps>(
         {...otherProps}
       >
         {homeLinkWithProps}
-        
+
         {!collapseBreadcrumb &&
           breadcrumbList.map((item, index) => {
             return breadcrumbList.length === index + 1 ? (
@@ -131,10 +148,9 @@ const BreadcrumbBase = forwardRef<HTMLDivElement, BreadcrumbBaseProps>(
 
         {collapseBreadcrumb && (
           <Dropdown>
-            <DropdownButton
-              data-fs-breadcrumb-dropdown-button
-              size="small"
-            >{dropdownButtonIcon}</DropdownButton>
+            <DropdownButton data-fs-breadcrumb-dropdown-button size="small">
+              {dropdownButtonIcon}
+            </DropdownButton>
             <DropdownMenu data-fs-breadcrumb-dropdown-menu>
               {mediumItems.map((item) => (
                 <DropdownItem

package/src/molecules/Breadcrumb/HomeLink.tsx

@@ -1,5 +1,5 @@
-import { House, Icon, Link } from "../..";
-import React from "react";
+import React from 'react'
+import { Icon, Link } from '../..'
 
 const HomeLink = () => (
   <Link
@@ -8,7 +8,7 @@ const HomeLink = () => (
     aria-label="Go to homepage"
     href="/"
   >
-    <Icon component={<House size={18} />} />
+    <Icon name="House" width={18} height={18} />
   </Link>
 )
 

package/src/molecules/BuyButton/BuyButton.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 
-import { Button } from '../../'
 import type { ButtonProps } from '../../'
-import { ShoppingCart } from '../../assets'
+import { Button, Icon } from '../../'
 
 type BuyButtonProps = ButtonProps
 
@@ -15,7 +14,7 @@ function BuyButton({
   return (
     <Button
       data-fs-buy-button
-      icon={<ShoppingCart />}
+      icon={<Icon name="ShoppingCart" />}
       iconPosition="left"
       data-testid={testId}
       {...otherProps}

package/src/molecules/CartItem/CartItem.tsx

@@ -1,8 +1,7 @@
 import type { HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
-import { XCircle } from '../../assets'
-import { IconButton, IconButtonProps, Price, QuantitySelector } from '../../'
+import { Icon, IconButton, IconButtonProps, Price, QuantitySelector } from '../../'
 
 import type { PriceDefinition } from '../../typings/PriceDefinition'
 
@@ -56,7 +55,7 @@ const CartItem = forwardRef<HTMLDivElement, CartItemProps>(function CartItem(
       <div data-fs-cart-item-content>{children}</div>
       <IconButton
         data-fs-cart-item-remove-button
-        icon={<XCircle />}
+        icon={<Icon name="XCircle" />}
         aria-label="Remove"
         {...removeBtnProps}
       />

package/src/molecules/Dropdown/DropdownItem.tsx

@@ -1,6 +1,5 @@
-import type { ButtonHTMLAttributes } from 'react'
-import Icon, { IconProps } from '../../atoms/Icon'
-import React, { useImperativeHandle, forwardRef, useRef, useState } from 'react'
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 
 import { useDropdown } from './hooks/useDropdown'
 
@@ -13,7 +12,7 @@ export interface DropdownItemProps
   /**
    * A React component that will be rendered as an icon.
    */
-  icon?: IconProps["component"]
+  icon?: ReactNode
 }
 
 const DropdownItem = forwardRef<HTMLButtonElement, DropdownItemProps>(
@@ -65,7 +64,7 @@ const DropdownItem = forwardRef<HTMLButtonElement, DropdownItemProps>(
         data-index={dropdownItemIndex}
         {...otherProps}
       >
-        {icon && <Icon data-fs-dropdown-item-icon component={icon} />}
+        {React.isValidElement(icon) && icon}
         {children}
       </button>
     )

package/src/molecules/Gift/Gift.tsx

@@ -1,7 +1,6 @@
 import type { HTMLAttributes, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 
-import { Icon } from '../..'
 
 export interface GiftProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -19,9 +18,11 @@ const Gift = forwardRef<HTMLDivElement, GiftProps>(function Gift(
   { icon, testId = 'fs-gift', children, ...otherProps },
   ref
 ) {
+  const iconProps = { "data-fs-gift-icon": true }
+  const giftIcon = React.isValidElement(icon) ? React.cloneElement(icon, iconProps) : icon
   return (
     <div ref={ref} data-fs-gift data-testid={testId} {...otherProps}>
-      {icon && <Icon component={icon} data-fs-gift-icon />}
+      {React.isValidElement(giftIcon) && giftIcon}
       <div data-fs-gift-wrapper>{children}</div>
     </div>
   )

package/src/molecules/InputField/InputField.tsx

@@ -1,9 +1,8 @@
-import React from 'react'
 import type { MutableRefObject } from 'react'
+import React from 'react'
 
-import { Input, Label, IconButton, Button } from '../../'
 import type { InputProps } from '../../'
-import { XCircle } from '../../assets'
+import { Button, Icon, IconButton, Input, Label } from '../../'
 
 type DefaultProps = {
   /**
@@ -110,7 +109,7 @@ const InputField = ({
           <IconButton
             data-fs-button-size="small"
             aria-label="Clear Field"
-            icon={<XCircle />}
+            icon={<Icon name="XCircle" />}
             onClick={() => {
               onClear?.()
               inputRef?.current?.focus()

package/src/molecules/LinkButton/LinkButton.tsx

@@ -1,7 +1,6 @@
+import type { AnchorHTMLAttributes, FocusEvent } from 'react'
 import React, { useRef } from 'react'
-import type { FocusEvent, AnchorHTMLAttributes } from 'react'
 
-import { Icon } from '../..'
 import type { ButtonProps } from '../..'
 
 export type LinkButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> &
@@ -41,9 +40,9 @@ function LinkButton({
       data-testid={testId}
       {...otherProps}
     >
-      {iconPosition === 'left' && <Icon component={icon} />}
+      {React.isValidElement(icon) && iconPosition === 'left' && icon}
       {children}
-      {iconPosition === 'right' && <Icon component={icon} />}
+      {React.isValidElement(icon) && iconPosition === 'right' && icon}
     </a>
   )
 }

package/src/molecules/Modal/ModalHeader.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-import { X } from '../../assets'
+import Icon from '../../atoms/Icon'
 import IconButton, { IconButtonProps } from '../IconButton'
 
 export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
@@ -33,7 +33,7 @@ const ModalHeader = ({
         <IconButton
           onClick={() => onClose?.()}
           data-fs-modal-header-close-button
-          icon={<X />}
+          icon={<Icon name="X" />}
           aria-label="Close modal"
           {...closeBtnProps}
         />

package/src/molecules/ProductCard/ProductCardContent.tsx

@@ -4,16 +4,9 @@ import React, { forwardRef } from 'react'
 import type { PriceDefinition } from '../../typings/PriceDefinition'
 
 import {
-  Link,
-  Price,
   Badge,
-  Button,
-  Rating,
-  DiscountBadge,
-  LinkProps,
-  LinkElementType,
+  Button, DiscountBadge, Icon, Link, LinkElementType, LinkProps, Price, Rating
 } from '../../'
-import { Star, ShoppingCart } from '../../assets'
 
 export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
   /**
@@ -108,7 +101,7 @@ const ProductCardContent = forwardRef<HTMLElement, ProductCardContentProps>(
               SRText="Sale Price:"
             />
           </div>
-          {ratingValue && <Rating value={ratingValue} icon={<Star />} />}
+          {ratingValue && <Rating value={ratingValue} icon={<Icon name="Star" />} />}
         </div>
         {showDiscountBadge && !outOfStock && (
           <DiscountBadge
@@ -121,7 +114,7 @@ const ProductCardContent = forwardRef<HTMLElement, ProductCardContentProps>(
           <div data-fs-product-card-actions>
             <Button
               variant="primary"
-              icon={<ShoppingCart />}
+              icon={<Icon name="ShoppingCart" />}
               iconPosition="left"
               size="small"
               onClick={onButtonClick}

package/src/molecules/QuantitySelector/QuantitySelector.tsx

@@ -1,7 +1,6 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 
-import { IconButton, Input } from '../../'
-import { Minus, Plus } from '../../assets'
+import { Icon, IconButton, Input } from '../../'
 
 export interface QuantitySelectorProps {
   /**
@@ -89,7 +88,7 @@ const QuantitySelector = ({
     >
       <IconButton
         data-quantity-selector-button="left"
-        icon={<Minus />}
+        icon={<Icon name="Minus" width={16} height={16} weight="bold" />}
         aria-label="Decrement Quantity"
         aria-controls="quantity-selector-input"
         disabled={isLeftDisabled || disabled}
@@ -109,7 +108,7 @@ const QuantitySelector = ({
         aria-controls="quantity-selector-input"
         aria-label="Increment Quantity"
         disabled={isRightDisabled || disabled}
-        icon={<Plus />}
+        icon={<Icon name="Plus" width={16} height={16} weight="bold" />}
         onClick={increase}
         testId={`${testId}-right-button`}
       />

package/src/molecules/Rating/Rating.tsx

@@ -1,9 +1,7 @@
-import React, { forwardRef, useState } from 'react'
-import { ReactNode } from 'react'
-import { HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes, ReactNode, useState } from 'react'
 
+import { Icon, IconButton } from '../..'
 import List from '../../atoms/List'
-import { Icon, IconButton, Star } from '../..'
 
 export interface RatingProps
   extends Omit<HTMLAttributes<HTMLUListElement>, 'onChange'> {
@@ -16,7 +14,7 @@ export interface RatingProps
    */
   value: number
   /**
-   * Icon to represent the rating score unit (e.g.: a <Star /> component)
+   * Icon to represent the rating score unit (e.g.: a <Icon name="Star" /> component)
    */
   icon?: ReactNode
   /**
@@ -47,7 +45,9 @@ const Rating = forwardRef<HTMLUListElement, RatingProps>(function Rating(
   ref
 ) {
   const [hover, setHover] = useState(0)
-  const ratingIcon = icon ? icon : <Star />
+
+  const outlineProps = { 'data-fs-rating-icon-outline': true }
+  const ratingIcon = React.isValidElement(icon) ? icon : <Icon name="Star" />
 
   return (
     <List
@@ -92,10 +92,12 @@ const Rating = forwardRef<HTMLUListElement, RatingProps>(function Rating(
               />
             ) : (
               <>
-                <div data-fs-rating-icon-wrapper>
-                  <Icon component={ratingIcon} />
-                </div>
-                <Icon data-fs-rating-icon-outline component={ratingIcon} />
+                <div data-fs-rating-icon-wrapper>{ratingIcon}</div>
+                {React.isValidElement(icon) ? (
+                  React.cloneElement(icon, outlineProps)
+                ) : (
+                  <Icon name="Star" data-fs-rating-icon-outline />
+                )}
               </>
             )}
           </li>

package/src/molecules/RegionBar/RegionBar.tsx

@@ -1,8 +1,7 @@
-import React, { forwardRef } from 'react'
 import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
 
 import { Button, Icon } from '../../'
-import { MapPin, CaretRight } from '../../'
 
 export interface RegionBarProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -22,7 +21,7 @@ const RegionBar = forwardRef<HTMLDivElement, RegionBarProps>(function RegionBar(
   return (
     <div ref={ref} data-fs-region-bar {...otherProps}>
       <Button onClick={onButtonClick}>
-        <Icon component={<MapPin />} />
+        <Icon name="MapPin" />
         {postalCode ? (
           <>
             <span data-fs-region-bar-postal-code>{postalCode}</span>
@@ -31,7 +30,7 @@ const RegionBar = forwardRef<HTMLDivElement, RegionBarProps>(function RegionBar(
         ) : (
           <span data-fs-region-bar-message>Set your location</span>
         )}
-        <Icon component={<CaretRight />} />
+        <Icon name="CaretRight" />
       </Button>
     </div>
   )

package/src/molecules/SearchAutoComplete/SearchAutoCompleteTerm.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
-import React, { HTMLAttributes, Fragment } from 'react'
-import { Icon, MagnifyingGlass, Link, LinkProps, LinkElementType } from '../..'
+import React, { Fragment, HTMLAttributes } from 'react'
+import { Icon, Link, LinkElementType, LinkProps } from '../..'
 
 function formatSearchTerm(
   indexSubstring: number,
@@ -52,7 +52,13 @@ const SearchAutoCompleteTerm = ({
   linkProps,
   icon,
 }: SearchAutoCompleteTermProps) => {
-  const autoCompleteIcon = icon ? icon : <MagnifyingGlass />
+
+  const iconProps = {"data-fs-search-auto-complete-item-icon":true}
+  const autoCompleteIcon = React.isValidElement(icon) ? (
+    React.cloneElement(icon, iconProps)
+  ) : (
+    <Icon name="MagnifyingGlass" data-fs-search-auto-complete-item-icon />
+  )
 
   const suggestionSubstring = suggestion.toLowerCase().split(term.toLowerCase())
 
@@ -63,12 +69,7 @@ const SearchAutoCompleteTerm = ({
         data-fs-search-auto-complete-item-link
         variant="display"
       >
-        {autoCompleteIcon && (
-          <Icon
-            component={autoCompleteIcon}
-            data-fs-search-auto-complete-item-icon
-          />
-        )}
+        {autoCompleteIcon}
         <p>
           {suggestionSubstring.map((substring, indexSubstring) => (
             <Fragment key={[substring, indexSubstring].join()}>

package/src/molecules/SearchHistory/SearchHistoryTerm.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import React, { HTMLAttributes } from 'react'
-import { Icon, ClockClockwise, Link, LinkProps, LinkElementType } from '../..'
+import { Icon, Link, LinkElementType, LinkProps } from '../..'
 
 export interface SearchHistoryTermProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -27,14 +27,17 @@ const SearchHistoryTerm = ({
   linkProps,
   icon,
 }: SearchHistoryTermProps) => {
-  const historyIcon = icon ? icon : <ClockClockwise />
-
+  const iconProps = {"data-fs-search-history-item-icon": true}
+  
+  const historyIcon = React.isValidElement(icon) ? (
+    React.cloneElement(icon, iconProps)
+  ) : (
+    <Icon name="ClockClockwise" data-fs-search-history-item-icon />
+  )
   return (
     <li data-fs-search-history-item data-testid={testId}>
       <Link {...linkProps} data-fs-search-history-item-link variant="display">
-        {historyIcon && (
-          <Icon component={historyIcon} data-fs-search-history-item-icon />
-        )}
+        {historyIcon}
         <span>{value}</span>
       </Link>
     </li>

package/src/molecules/SearchInputField/SearchInputField.tsx

@@ -2,11 +2,11 @@ import type {
   AriaAttributes,
   FormEvent,
   InputHTMLAttributes,
-  ReactNode,
+  ReactNode
 } from 'react'
 import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 
-import { IconButton, Input, MagnifyingGlass } from '../..'
+import { Icon, IconButton, Input } from '../..'
 
 type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'>
 
@@ -25,7 +25,7 @@ export interface SearchInputFieldProps extends InputProps {
   buttonProps?: ButtonProps
   /**
    * A React component that will be rendered as an icon (submit button).
-   * @default <MagnifyingGlass />
+   * @default <Icon name="MagnifyingGlass" />
    */
   buttonIcon?: ReactNode
   /**
@@ -90,7 +90,7 @@ const SearchInputField = forwardRef<
       <IconButton
         type="submit"
         aria-label="Submit Search"
-        icon={buttonIcon ?? <MagnifyingGlass />}
+        icon={buttonIcon ?? <Icon name="MagnifyingGlass" />}
         {...buttonProps}
       />
     </form>