More than 3 years have passed since last update.

Vue3 + TypeScriptにMaterial Design Icon(mdi)を導入する

Last updated at 2021-09-28Posted at 2021-09-28

はじめに

導入する際に、思いのほか苦戦したので備忘録として投稿します。

必要となる2種類のパッケージをインストールします。

yarn add mdi-vue @mdi/js

mdi-vueはTypeScriptに対応していないようなので、ルートディレクトリのshims-vue.d.tsでdeclareしてあげます。

shims-vue.d.ts

declare module 'mdi-vue/v3';

最後にmain.tsのcreateAppに以下の記述を追記します。

main.ts

import mdiVue from 'mdi-vue/v3';
import * as mdiJs from '@mdi/js';

createApp(App)
  .use(mdiVue, { icons: mdiJs })
  .mount('#app')

後はmdi-vueで説明されているように、使いたい場所に以下のように記述してあげます。

Home.vue

<template>
  <mdicon name="react" :width="30" :height="30" />
</template>