【React × BootstrapでSVGアイコンをコンポーネント化して使う方法】

今回は Bootstrapのアイコンをimgで挿入するのではなく、コンポーネント化して使う方法をやったので、忘れないように備忘録として残します。

SVGをReactで使うメリット（拡大しても劣化しない、スタイル変更が簡単）
ではなく のように使えると再利用性が高まる！

1ライブラリのインストール

npm install react-bootstrap-icons

または

yarn add react-bootstrap-icons

２使い方：アイコンをインポートして使う

import { Twitter } from "react-bootstrap-icons";

function SocialIcons() {
  return (
    <div style={{ fontSize: "2rem", display: "flex", gap: "16px" }}>
      <Twitter />
    </div>
  );
}

これでBootstrapのアイコン一覧にあるツイッターの青い鳥アイコンを簡単に使える！！
下記の公式サイトにたくさん載ってるのでぜひ探して使ってみてください！
https://icons.getbootstrap.com/
例えば一番左上の⓪ってアイコンが使いたいなってときは、
「0 circle」って名前なので、スペースはくっつけて、キャメル式にすればコンポーネント化できる！

import { 0Circle } from "react-bootstrap-icons";

function SocialIcons() {
  return (
    <div style={{ fontSize: "2rem", display: "flex", gap: "16px" }}>
      <0Circle />
    </div>
  );
}