Vue.jsのライブラリであるVeutifyを使えば見た目のきれいな画面を比較的簡単に表示させることができます。
今回はVuetifyを使ってアイコンを簡単に表示させる方法を紹介します。
アイコンを表示させる方法
結論としては.vueファイルのtemplateに下の一行を入力すればアイコンを表示させることができます。
<v-icon>アイコン名</v-icon>表示させたいアイコンを探そう
ではどのようにアイコンを表示させたいかというと、Material Design Iconsというサイトから探すのが最も簡単です。
VeutifyではMaterial Design Icons・Material Icons・Font Awesome 4・Font Awesome 5のアイコンが使用可能ですが、デフォルトではMaterial Design Iconsが設定されているため設定画面どうな方はこちらから探すことをおすすめします。
検索ウィンドウからアイコンを連想させるようなワード(bookmark、close、exitなど)を入力して目当てのアイコンが見つかったらクリックして詳細を確認します。
赤枠で囲われたアイコン名をチェックしたら最初のコードに戻ってアイコン名を入力します。上の例だとこちらのようになります。
<v-icon>mdi-bookmark-check</v-icon>ここで注意したいのはアイコン名の先頭に`mdi-`をつけることを忘れないでください。(mdi:Material Design Iconsの略だと思います。)
すると上のようにアイコンを簡単に表示させることができました！
Font Awesomeなど他のアイコンを導入したい場合はこちらに導入方法が記載されているので参考にしてください。
コメント