MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2022.09.21

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

Vuejs+フォントアイコン メイン画像

みなさん、こんにちは。

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

 

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

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

 

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

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

Vueフレームワーク フォントアイコン
BootstrapVue (Bootstrap v4) Bootstrap Icons
Vuetify Material Design Icons (materialdesignicons.com)
Ionic Vue ionicons
Quasar Material Design Icons (fonts.google.com)

 

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

 

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

npm install @mdi/font

 

2. アイコン表示

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

<v-icon class=”” alt=”search icon” :x-large=”true” > mdi-magnify </v-icon>

staticmap4

 

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

 

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

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

 

 

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

 

 

バイ!

 

 

 

 

【Vuejs紹介シリーズ】

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

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

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

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

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

第7回目「Vuejs +OpenStreetMap表示」

 

 

 

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

【関連記事】こんな記事も読まれています

2018.08.02

Directions と Directions Advanced の違い

みなさん、こんにちは。

7月16日より、Google Maps APIs は Google Maps Platform と名前を変え、新しい価・・・

続きを読む

2017.02.11

Directions API で巡回セールスマン問題を解決する

みなさん、こんにちは。
今回は、Google Maps Directions API で、巡回セールスマン問題を解決する方法を解説します!・・・

続きを読む

2017.01.19

Distance Matrix API の使い方を考える

みなさん、こんにちは。

 

今回は、Distance Matrix API の使い方について説明いたします。

続きを読む

 - スタッフ日記