Icons

Bazaar uses SVG icons, icons are located in src/icons.

Using Icon

All icons are exported as appIcons in src/icons/index.ts.
You can refer any icon from there.

import appIcons from 'icons'
 
const Example = () => {
  const HomeIcon = appIcons['Home']
 
  return <HomeIcon />
}

Note: You can create icons as your project requirements. Create icon component in src/icons and add that component in appIcons of src/icons/index.ts.

import createSvgIcon from '@mui/material/utils/createSvgIcon'
 
const CartX = createSvgIcon(
  <svg fill="currentColor" viewBox="0 0 640 512">
    <path d="M96 0C107.5 0 117.4 8.19 119.6 19.51L121.1 32H541.8C562.1 32 578.3 52.25 572.6 72.66L537.6 196.9C524.3 193.7 510.3 192 496 192C427.6 192 368.3 231 339.2 288H170.7L179.9 336H322.9C320.1 346.4 319.1 357.1 319.1 368C319.1 373.4 320.2 378.7 320.7 384H159.1C148.5 384 138.6 375.8 136.4 364.5L76.14 48H24C10.75 48 0 37.26 0 24C0 10.75 10.75 .0003 24 .0003L96 0zM128 464C128 437.5 149.5 416 176 416C202.5 416 224 437.5 224 464C224 490.5 202.5 512 176 512C149.5 512 128 490.5 128 464zM352 368C352 288.5 416.5 224 496 224C575.5 224 640 288.5 640 368C640 447.5 575.5 512 496 512C416.5 512 352 447.5 352 368zM555.3 331.3C561.6 325.1 561.6 314.9 555.3 308.7C549.1 302.4 538.9 302.4 532.7 308.7L496 345.4L459.3 308.7C453.1 302.4 442.9 302.4 436.7 308.7C430.4 314.9 430.4 325.1 436.7 331.3L473.4 368L436.7 404.7C430.4 410.9 430.4 421.1 436.7 427.3C442.9 433.6 453.1 433.6 459.3 427.3L496 390.6L532.7 427.3C538.9 433.6 549.1 433.6 555.3 427.3C561.6 421.1 561.6 410.9 555.3 404.7L518.6 368L555.3 331.3z" />
  </svg>,
  'CartX',
)
 
export default CartX

Download SVG icon file from icon library like FontAwesome or any source.
Make sure the frame size is 24x24 by using tools like figma. Then export as SVG.
Open that svg in code editor and copy the codes inside <svg> tag.
Use above code structure and paste the svg code inside createSvgIcon function.
You may need to adjust viewBox props value to adjust the size and placement of the icon.

Settings Data fetching