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

Vue.js

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

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/から調べるといいです。

アウトラインとソリッド

アウトラインのSVGアイコンが必要な場合、’@heroicons/vue/outline’をインポートします。 ソリッドのSVGアイコンが必要な場合、’@heroicons/vue/solid’をインポートします。 
import { UserIcon } from '@heroicons/vue/solid'
import { ClockIcon } from '@heroicons/vue/outline'

Vue.js

Posted by devsakaso