🔵

Heroicons with Next.js

2024/12/09に公開

Next.js

Bun

heroicons

tech

What heroicons

https://heroicons.com/

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
Available as basic SVG icons and via first-party React and Vue libraries.

Tailwind CSSのメーカーによる、手作りの美しいSVGアイコン。
基本的なSVGアイコンとして、またファーストパーティのReactとVueのライブラリから利用できます。

こちらから追加する。

bunを使用してNext.jsのプロジェクトに追加してみる。

bun add @heroicons/react

使いたいアイコンの上にマウスをホバーすると、svgかjsxのどちらか選択するのが表示される。jsxの方をコピーする。

コードは長い。

export default function Home() {
  return (
    <div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="currentColor"
        className="size-6"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"
        />
      </svg>
    </div>
  );
}

こんな感じになります。

トーストを使ってみる

よくあるcheck iconつきのトーストも作ってみますか。

check iconを探してコピーする。

bun add react-hot-toast

component/に作成する。

interface CheckIconProps {
  onClick?: () => void;
}

export default function CheckIcon({ onClick }: CheckIconProps) {
  return (
    <button
      onClick={onClick}
      className="rounded-full p-2 hover:bg-green-100 transition-colors"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="green"
        className="size-6"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
        />
      </svg>
    </button>
  );
}

コンポーネントをimportして使ってみましょう。

interface CheckIconProps {
  onClick?: () => void;
}

export default function CheckIcon({ onClick }: CheckIconProps) {
  return (
    <button
      onClick={onClick}
      className="rounded-full p-2 hover:bg-green-100 transition-colors"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="green"
        className="size-6"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
        />
      </svg>
    </button>
  );
}

page.tsxを修正する。

'use client';

import { toast } from 'react-hot-toast';

export default function Home() {
  const handleClick = () => {
    toast.success('登録されました', {
      duration: 3000,
      position: 'bottom-center',
    });
  };

  return (
    <div>
      <button
        onClick={handleClick}
        className="flex items-center gap-2 rounded-md bg-white px-4 py-2 shadow hover:bg-gray-50"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth={1.5}
          stroke="green"
          className="size-6"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
          />
        </svg>
        <span>登録する</span>
      </button>
    </div>
  );
}

https://youtu.be/nT_KinI4B9k

感想

svgの色を変更してよくあるcheck iconのトーストを作ってみました。他のもオシャレなsvgがあるので試してみたいですね。普段はreact iconsしか使ってないので活用したい。

What heroicons

トーストを使ってみる

感想

Discussion