Vue フレームワークVuetifyで使えるアイコン一覧サイトと使い方

Material Design Iconsというサイトがある。

ここから探す。(アイコンは英語で検索)

Material Design Icons

例えばごみ箱のアイコンならtrashと検索する。

好きなアイコンを選択すると、

import { mdiTrashCanOutline } from '[@mdi/js](https://www.npmjs.com/package/@mdi/js)';

こんな風に出てくる。


書き替え方

上記の例なら、

mdiTrashCanOutline

の大文字の前にハイフンを入れて、そのうえで小文字の表記に書き替えて使う。

↓書き換え後

mdi-trash-can-outline

↓Vuetify公式の説明 この説明でわかんのか…

v-icon
 コンポーネントは、アプリケーションのさまざまな側面にコンテキストを提供するために、グリフの大きなセットを提供します。 利用可能なすべてのアイコンの一覧については、公式の Material Design Icons
 ページをご覧ください。 これらのアイコンのいずれかを使用するには、単純に mdi-
プレフィックスに続いて アイコン名を使用します。

Vuetify - A Material Design Framework for Vue.js

使い方

ボタンとして使いたいならこんな感じになる。

<v-btn icon>
    <v-icon>mdi-trash-can-outline</v-icon>
</v-btn>
無制限に質問可能なプログラミングスクール!

万が一転職できない場合は、転職保障全額返金できるコースもあり!!

無制限のメンター質問対応

 

DMMウェブキャンプでプログラミングを学習しませんか?

独学より成長スピードをブーストさせましょう!

 

まずは無料相談から!

おすすめの記事