Using icons

├── src
`  `├── App.tsx `← we are here`
`  `├── index.css
`  `└── main.tsx

const [cartCount, setCartCount] = 20;

<button onClick="setCartCount(cartCount - 1)">
  <Minus />
</button>
{ cartCount }
<button onClick="setCartCount(cartCount + 1)">
  <Plus />
</button>

'use client';
import { useState } from 'react';
import { Plus, Minus } from 'lucide-react';

export default function Home() {
  const [cartCount, setCartCount] = useState(20);
  return (
    <>
      <button
        className='w-16 bg-blue-500 text-white px-4 py-2 rounded inline-flex justify-center'
        onClick={() => setCartCount(cartCount - 1)}>
        <Minus size={16} />
      </button>
      <span className='inline-block text-center w-16 bg-white text-blue-700 px-2 py-1 rounded-full'>{cartCount}</span>
      <button
        className='w-16 bg-blue-500 text-white px-4 py-2 rounded inline-flex justify-center'
        onClick={() => setCartCount(cartCount + 1)}>
        <Plus size={16} />
      </button>
    </>
  );
}

- We imported `Plus` and `Minus` icons from the `lucide-react` library.
- We replaced the `-` and `+` text in the buttons with the corresponding icons.
- `<Minus size={16} />` is how to use the `Minus` icon as a React component. The same applies to any icon you want to use from the `lucide-react` library.
- Try adding other icons from the `lucide-react` library and see how they look!