Vue3でSVGアイコンのライブラリ vue-tabler-icons を導入する

導入方法

• vue-tabler-icons 公式サイト

• vueでvue-tabler-iconsを使う方法 公式github

• vue-tabler-iconsのライブラリをinstallする

$ npm install @tabler/icons --save

• ルートディレクトリである src/main.ts のファイルでimportして、プロジェクト全体で使えるようにする（下記の宣言で、どのファイル・どのコンポーネントからも呼び出せるようになる）

import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'
import '@/assets/scss/base.scss'

import VueTablerIcons from 'vue-tabler-icons' // 追加

createApp(App)
　　.use(store)
　　.use(router)
　　.use(VueTablerIcons)　// 追加
　　.mount('#app')

適当なコンポーネント内で呼び出す方法

• 例）src/components/organisms/GlobalNav.vue で導入してみる

<script setup lang="ts"></script>

<template>
  <nav class="global-nav">
    <router-link class="global-nav__item" to="/">Home</router-link>
    <router-link class="global-nav__item" to="/component">
      Component
      <chevron-down-icon /> // 追加
    </router-link>
    <router-link class="global-nav__item" to="/form">Form</router-link>
    <router-link class="global-nav__item" to="/map">Map</router-link>
  </nav>
</template>

• 呼び出すiconのコンポーネントの指定方法

1. vue-tabler-icons 公式サイト からアイコンを探す

2. 選択したアイコンの末尾に -icon をつける
   例）chevron-downの末尾に -icon をつけて chevron-down-icon にする

3. コンポーネントとして呼び出す <chevron-down-icon />

vue-tabler-icons 公式サイトより