Vue3 + Viteでmaterial iconを使う

みんな大好きmaterial design icon(マテリアルアイコン) をVue3とViteの環境で使ってみたので、その備忘録。

Vite .config.jsに追記するのかと思っていたら、不要でした。
やり方は全部こちらに書いてありますが、一応。

vue-material-design-icons

A collection of material design icons as Vue single file components. Latest version: 5.1.2, last published: 6 months ago. Start using vue-material-design-icons ...

www.npmjs.com

アイコンはこちらから探せます。

Material Design Icons

View all the Material Design icons and more from the community.

materialdesignicons.com

インストール

npm i vue-material-design-icons

yarnの場合

yarn add vue-material-design-icons

インポート

import MenuIcon from 'vue-material-design-icons/Menu.vue';

components: {
  MenuIcon;
}

グローバルの場合

import MenuIcon from 'vue-material-design-icons/Menu.vue';

Vue.component('menu-icon', MenuIcon);

描画

<menu-icon />