@chakra-ui/icon

Basic Icon Usage

This feature allows you to use any icon from popular icon libraries like FontAwesome by importing the icon and using it with the `Icon` component from @chakra-ui/icon. The `as` prop specifies the icon, and you can customize its size and color.

import { Icon } from '@chakra-ui/icon';
import { FaBeer } from 'react-icons/fa';

function Example() {
  return <Icon as={FaBeer} w={8} h={8} color="teal.500" />;
}

Custom SVG Icons

This feature allows you to create custom SVG icons by defining the SVG path within the `Icon` component. The `viewBox` and `color` props help in customizing the icon's appearance.

import { Icon } from '@chakra-ui/icon';

function CustomIcon() {
  return (
    <Icon viewBox="0 0 200 200" color="red.500">
      <path
        fill="currentColor"
        d="M100 100c-20 0-36 16-36 36s16 36 36 36 36-16 36-36-16-36-36-36z"
      />
    </Icon>
  );
}

Icon Button

This feature allows you to create buttons with icons using the `IconButton` component. The `icon` prop specifies the icon to be used, and `aria-label` provides accessibility support.

import { IconButton } from '@chakra-ui/button';
import { FaSearch } from 'react-icons/fa';

function SearchButton() {
  return <IconButton icon={<FaSearch />} aria-label="Search" />;
}