アイコンフォントとは

昨今のWebアプリではいたるところでアイコンフォントが使われます。有名どころではGoogleの Material Icons や Font Awesome ですが今回はTaiwindファミリーである Heroicons を使います。

アイコンフォントは通常の画像と違い、CSSベースで色や大きさ、太さを調整することができます。またベクター形式なのでフォントサイズによらず鮮明に表示され、容量も軽量となっています。

Heroiconsの導入

HeroiconsにはReactコンポーネントが用意されています。これを使うことで未使用のアイコンを読み込む必要がなくなります。プロジェクトディレクトリで以下のコマンドを実行します。

ターミナル

npm install @heroicons/react

Heroiconsの使い方

以下のように使いたいアイコンをコンポーネントとしてインポートした上で使用することができます。tailwindのクラスで幅や高さ、色を調整できます。

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

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

使用するアイコンは下記一覧から探してください。

https://heroicons.com/

アイコンからコードをコピーするのではなく、使用したいアイコンの名前で下記のフォーマットでインポートしてコンポーネントとして使いましょう。アウトライン系アイコンと塗りつぶし系アイコンの２パターンがあり、インポートの際に末尾を変えることで使い分けが可能です。

// 塗りつぶし系アイコン（末尾がsolid）
import { BeakerIcon } from '@heroicons/react/solid';

// アウトライン系アイコン（末尾がoutline）
import { BeakerIcon } from '@heroicons/react/outline';