【Vue】tailwindcssでSVGアイコンを使う方法

Vueでtailwindcssを使っているときに、SVGアイコンを使う方法を紹介します。

結論から言うと、Tailwind公式のアイコン集HeroiconsをVue用パッケージ@heroicons/vueで入れるのが一番手軽です。npm install @heroicons/vueのあと、現行のv2では@heroicons/vue/24/outlineや@heroicons/vue/24/solidからアイコンをimportし、class="h-6 w-6 text-gray-500"のようにTailwindのクラスでサイズと色を指定します。この記事の古いコードにある@heroicons/vue/solidはv1の書き方で、v2ではパスにサイズ(24・20・16)が入ります。

SVGアイコン提供元

SVGアイコンを提供しているところはいろいろありますが、heroiconsがtailwindcssを使用する場合を想定して作られていて、使いやすいです。

アイコンをクリックしてSVGを選択して、そのままtemplateタグに貼り付けるだけで利用できます。

npmを使って利用する場合は下のような手順になります。

ライブラリをインポート

npm install @heroicons/vue

上のコマンドでプロジェクトにライブラリを追加します。

template

<template>
  <div>
    <UserIcon class="h-5 w-5 text-red-500"/>
    <span>...</span>
  </div>
</template>

コンポーネントとして使います。

script

<script>
import { UserIcon } from '@heroicons/vue/solid'

export default {
  components: { UserIcon }
}</script>

必要なものだけimportして、componentsに登録すると使えるようになります。

名前を指定するときは上のサイトかjsファイルの中身をすべて確認できる公式サイトのhttps://unpkg.com/browse/@heroicons/vue@1.0.1/outline/から調べるといいです。

現行バージョン(v2)と<script setup>での書き方

上のコードはHeroicons v1(@heroicons/vue@1.x)のものです。現在インストールされるv2では、importパスにアイコンのサイズが入ります。Vue 3の<script setup>ならcomponentsへの登録も不要です。

<script setup>
import { UserIcon } from '@heroicons/vue/24/outline'
import { ClockIcon } from '@heroicons/vue/24/solid'
</script>

<template>
  <button class="flex items-center gap-2">
    <UserIcon class="h-6 w-6 text-gray-500" aria-hidden="true" />
    <span>プロフィール</span>
  </button>
</template>

• 24/outline・24/solid: 24pxグリッドの標準サイズ。通常はこれを使う
• 20/solid: ボタン内やテキスト横などの小さめ用途
• 16/solid: さらに小さいラベル用(v2.1以降)

アイコン名はheroicons.comでアイコンをクリックすると表示される名前(例: user)をPascalCaseにしてIconを付けたものです(user → UserIcon、arrow-right → ArrowRightIcon)。色はSVGがcurrentColorを使っているので、text-*クラスで変わります。

うまく表示されないときの確認

• Failed to resolve import "@heroicons/vue/solid": v2をv1のパスで読んでいます。@heroicons/vue/24/solidに変えます
• アイコンが巨大に表示される: h-* w-*のクラスを付け忘れています。SVGは既定でコンテナ幅いっぱいに広がります
• 色が変わらない: 親のtext-*ではなくアイコン自身にtext-*を付けるか、Tailwindのビルド対象(content)にその.vueファイルが含まれているか確認します
• 名前が分からない: v2ではChevronDownIconのようにv1から改名されたものがあります。heroicons.comで検索して確認します

自前のSVG画像を表示したい場合のパス解決はVue 3で画像を表示する方法、Tailwindの@applyでエディタにエラーが出る場合はvscodeでtailwindの@applyを使うとerrorが表示されるときの解決策を参考にしてください。

アウトラインとソリッド

アウトラインのSVGアイコンが必要な場合、’@heroicons/vue/outline’をインポートします。
ソリッドのSVGアイコンが必要な場合、’@heroicons/vue/solid’をインポートします。
(v2では上で説明したとおり'@heroicons/vue/24/outline'・'@heroicons/vue/24/solid'です)

import { UserIcon } from '@heroicons/vue/solid'
import { ClockIcon } from '@heroicons/vue/outline'

アウトラインは線画で軽い印象、ソリッドは塗りつぶしで視認性が高いので、ナビゲーションの選択中だけソリッドにする、といった使い分けがよく行われます。