Vue3 + TypeScriptにMaterial Design Icon(mdi)を導入する
3243 ワード
はじめに
導入する際に、思いのほか苦戦したので備忘録として投稿します。
導入
必要となる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>
参考文献
Author And Source
この問題について(Vue3 + TypeScriptにMaterial Design Icon(mdi)を導入する), 我々は、より多くの情報をここで見つけました https://qiita.com/miyazaki_radish/items/359cabda6238ed30ba92著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .