chakra-uiのインストール

公式の通り下記を実行

//terminal

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

chakra-ui/iconsもインストール

npm i @chakra-ui/icons

yarn add @chakra-ui/icons

react/iconsもインストール

純粋にchakra-uiのアイコンだけではの足りない
というかreact/iconsを使うことが前提な気がします。

//こっちをインストール
npm install react-icons --save

//大きな開発の時は下記
npm install @react-icons/all-files --save

使ってみる

　
index.tsxを下記のように変更して下さい。

 //  src/pages/indes.tsx

import { Flex, Heading, Icon } from "@chakra-ui/react";
import { SiChakraui } from "react-icons/si";
import { ChatIcon } from "@chakra-ui/icons";

import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <>
      <Flex
        color="blue.600"
        fontSize="50px"
        justify="center"
        align="center"
        mt="100px"
      >
        <Heading>React/iconsのアイコンだよ！</Heading>
        <Icon as={SiChakraui} />
      </Flex>
      <Flex
        color="green.600"
        fontSize="50px"
        justify="center"
        align="center"
        mt="100px"
      >
        <Heading>Chakra-ui/iconsのアイコンだよ！</Heading>
        <ChatIcon />
      </Flex>
    </>
  );
};

export default Home;

npm run devで画面を表示するとこうなると思います。エラーも吐かれてません！

React/icons　には豊富なアイコンんが揃っています。chakra-uiのアイコン、Twitter、Instagramなどのアイコンもあります。
chakra-ui/icons　は必要最低限といった感じです。

そのためchakra-uiには<icon>タグがありこれを使ってreact/iconsを表示させます。

//react/iconsを使う場合
<icons as={対象のアイコン名} />

//chakra-ui/iconsを使う場合
<対象のアイコン名>

react/iconsをインポートするとき

react/iconsのアイコンはファイル別に分かれています。

//頭文字が "si" なのでインポートする際は　"/si"とします。
//その他にも、"ImTwitter" であれば　 "im" となります。
import { SiChakraui } from "react-icons/si";

最初は既に他のアイコンをインポートして使っているのにエラーが出る！となりがちですが、ここが適当か見てみましょう。

後書き　　

ありがとうございます。
chakra-uiが使いやすく、よく使ってます。コンポーネント化されているので、スタイルも当てられて動きもつけられるので使っていて面白いです。

chakra-uiはv2.2.4にアップデートされましたが、Reactv18としか使えません。
Reactv17との下位互換性はないとのことですので、Reactv17の人は注意して下さい。

ちょくちょくchakra-ui関連の投稿をしたいと思います。

雑談

chakra-uiのchakraって「チャクラ」って読むんです。
ナルトが技を出す際にチャクラを使いますがそのチャクラです。

終わり