Material Design Icons を Vue で JavaScript 的に使う

はじめに

Vuetify で Material Design Icons を使っている例はよく見かけるけど、 Vuetify 無しでの例がなかなか見当たらないので自分用にメモ（と言っても公式ドキュメントにほとんど書いてある）

前提

単一ファイルコンポーネントでの例を記載します

使ってみた

基本的な使い方

1. 導入する

   npm install @mdi/js @jamescoyle/vue-icon
   

2. インポートして使えるようにする

   <script>
   import SvgIcon from '@jamescoyle/vue-icon'
   import { mdiAccount } from '@mdi/js'
   
   export default {
     components: { SvgIcon },
     computed: {
       account () {
         return mdiAccount
       }
     }
   }
   </script>
   

   （公式ドキュメントでは data 使ってるけど、特に状態として持たせたいわけではないので computed を使った）

3. 使う

   <template>
     <svg-icon type="mdi" :path="account"></svg-icon>
     account
   </template>
   

4. こうなる
   

サイズや色を変える

これはどっちかというと @jamescoyle/vue-icon の使い方だが、サイズ指定やスタイリングも可能

<svg-icon type="mdi" :path="path" :size="16" style="color: gray; vertical-align: middle">