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

2021年5月18日Vue.js

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

目次から読む

1. SVGアイコン提供元
2. アウトラインとソリッド

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