マルティスープ
Staff Blog

2022.09.21

VueでMaterial Design Iconを表示する方法

みなさん、こんにちは。

今回は、前回(Vueで地図を表示してみよう！！)に引き続き、Vuejs関連ライブラリを紹介したいと思います。

みなさん、システム開発やWebサイト制作などで時間やコストはかけたくないけど、少しデザインにこだわりたいという時はございませんか？また、デザイナーと一緒に開発したけど、次のフェーズではリソースが空いていなかったという経験はございませんか？

自分たちのプロジェクトでは、「デザイナーじゃないからアイコン一つ作るのに時間がかかる」 or 「作れない」。。。
そんな時に役立つのがフォントアイコンたちです！！

フォントアイコンは、様々な所で利用されていますが、vueフレームワークでも紹介されております。 アイコンの種類も豊富で統一感のあるデザインとなっており、一般的な制作物の中で使用するアイコンは、網羅されているため、とても便利です。

vueフレームワークで紹介されているアイコンは下記の通りです。

今回は、vuetifyで利用しているMaterial Design Icons (materialdesignicons.com)をご紹介したいと思います。

1. アイコンのインストール

2. アイコン表示

vueプロジェクト内に下記のアイコンのコードを埋め込んでみよう。mdi-xxxxに使用したいアイコンフォント名を記載すれば、表示されます。

いかがでしょうか？
このようなアイコンを利用すれば、簡単にアイコンを使うことができますね。

今回、紹介したようなアイコンのパッケージをインストールすると、開発や制作がスムーズに進められると思います。

フォントアイコンを利用すると品質が安定しているため、安心して開発・制作できます。 このような安定した土台の上に、プロジェクトの特徴を添えたモノづくりをしてみませんか？

みなさんも是非お試しください！！

バイ！

【Vuejs紹介シリーズ】

第1回目「Vueで地図を表示してみよう！！」

第3回目「Vueで住所検索する方法」

第4回目「Vueでcsvファイルの取込結果を地図に表示してみる」

第5回目「地図上の図形にイベントを定義する方法」

第6回目「Vuejs + Chartjsでグラフを表示する」

第7回目「Vuejs ＋OpenStreetMap表示」