Vue3 + Viteでmaterial iconを使う

Advertisements
Vue.js

みんな大好き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.3.0, last published: a month ago. Start using vue-material-design-icons i...

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

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!
Advertisements

インストール

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 />
タイトルとURLをコピーしました