【React】Chakra UIのIconでReact Iconsを使う

Chakra UIのIconでReact Iconsを使いたい！

概要

今回の記事では、Chakra UIのIconでReact Iconsを使う手順を掲載する。

仕様書

環境

• react 18.2.0
• react-icons 4.11.0
• chakra-ui/react 2.8.1

手順書

asにReact Iconを渡すとChakra UIのIconでReact Iconsを使える。

import { Icon } from '@chakra-ui/react';
import { MdCheck } from "react-icons/md";

const MyIcon: React.FC = () => {
    return (
        <Icon as={MdCheck} w={8} h={8}/>
    );
}

Chakra UIのIconのcolorも使える！

import { Icon } from '@chakra-ui/react';
import { MdCheck } from "react-icons/md";

const MyIcon: React.FC = () => {
    return (
        <Icon color='gray.500' as={MdCheck} w={8} h={8}/>
    );
}

まとめ（感想文）

React Icons、めちゃ便利k。Amazonとかのアイコンもあったり。
React以外でも使いたい。