@chakra-ui/icon

What is @chakra-ui/icon?

@chakra-ui/icon is a package from the Chakra UI library that provides a set of customizable and accessible icons for React applications. It allows developers to easily integrate icons into their UI components with consistent styling and behavior.

What are @chakra-ui/icon's main functionalities?

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" />;
}

Other packages similar to @chakra-ui/icon

react-icons

react-icons is a popular library that provides a collection of icons from various icon libraries like FontAwesome, Material Design, and more. It offers a wide range of icons and is highly customizable, similar to @chakra-ui/icon.

styled-icons

styled-icons is a library that provides a collection of icons from various icon libraries, designed to work seamlessly with styled-components. It offers a similar level of customization and flexibility as @chakra-ui/icon.

README

Icon

A base React icon component for Chakra UI.

Installation

yarn add @chakra-ui/icon