heroiconsの導入方法

Documentationをクリック

npmインストール
https://github.com/tailwindlabs/heroicons#react

npm install @heroicons/react

import文記述

import { BeakerIcon } from '@heroicons/react/24/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-6 w-6 text-blue-500"/>
      <p>...</p>
    </div>
  )
}

importしてタグ書いたらエラー出た

Unhandled Runtime Error

Error: You’re trying to import `@heroicons/react/outline/SearchIcon` from Heroicons v1 but have installed Heroicons v2. Install `@heroicons/react@v1` to resolve this error.

翻訳:

未処理のランタイムエラー
エラー: Heroicons v1 から @heroicons/react/outline/SearchIcon をインポートしようとしていますが、Heroicons v2 がインストールされています。このエラーを解決するには、@heroicons/react@v1 をインストールしてください。

どうやらv2をインストールしたがv1を使おうとしているのが原因ポイ。

公式のgithubを確認する。

The 24×24 outline icons can be imported from @heroicons/react/24/outline, the 24×24 solid icons can be imported from @heroicons/react/24/solid, and the 20×20 solid icons can be imported from @heroicons/react/20/solid.

@heroicons/react/outline ではなく、 @heroicons/react/24/outline をimportするのではないか？
と仮説を立てる。
書き換えたのち、タグの命名が違うのでは？と仮説を立てる。
タグ名は下記に一覧が乗っていた。

https://unpkg.com/browse/@heroicons/react@2.0.13/24/outline/