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.2.0, last published: 9 months ago. Start using vue-material-design-icons ...

www.npmjs.com

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

Material Design Icons - Icon Library - Pictogrammers

The original. Following Google's Material Design guidelines for system icons, MDI is our largest library, touting over 7200 unique icons!

pictogrammers.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 />