差分

このページの2つのバージョン間の差分を表示します。

--- 00.vue用デザインフレームワークvuetify:06.vuetifyでアイコンを利用 [2019/01/31] – [06.vuetifyでアイコンを利用] adash333
+++ 00.vue用デザインフレームワークvuetify:06.vuetifyでアイコンを利用 [2019/01/31] (現在) – [MDIのインストール方法その2？] adash333
@@ 行 1: / 行 1: @@
 ====== 06.vuetifyでアイコンを利用 ======
 Vuetifyで利用することが多いアイコンは、以下の3つとなります。
   -Vuetify公式のMaterial Icons
   -Font Awesomeアイコン
-  -Material Design Icons
+  -Material Design Icons（名前がMaterial Iconsとそっくりですが、別物で、こちらの方が欲しいものが揃っている印象があります）
+https://vuetifyjs.com/ja/framework/icons
 https://vuetifyjs.com/ja/components/icons
@@ 行 13: / 行 14: @@
 （1）公式のMaterial Icons
 https://material.io/tools/icons/
 （2）Font Awesomeアイコン
@@ 行 24: / 行 24: @@
 Material Design Iconsのアイコンの利用をサポートしています。アイコン名にmdi-プレフィックスを付与するだけで使用できます。あなたのプロジェクトにMaterial Design Iconsを導入しておく必要があるので注意して下さい。
-===== Vuetifyにアイコンを設定する方法 =====
+===== 1. Vuetify公式のMaterial Iconsを設定する方法 =====
-同時には一種類しか使用できない？未確認
+Vuetify公式サイトに記載されている方法でVue.jsにVuetifyをインストールすると、自然に使えるようになっています。
+Material Iconsのリスト
+https://material.io/tools/icons/
+Vue.jsにVuetifyを導入するためには、以下の3つが必要です。
-https://vuetifyjs.com/ja/framework/icons
+  -Vuetifyをnpm install(CodeSandboxでは、Add DependencyからVuetifyをインストール)
+  -index.htmlの<head></head>内に、"Material+Icons"を読み込む
+  -src/main.jsで、vuetifyとvuetify.cssをimportして、Vue.use(Vuetify);する。
+index.htmlの追加コード
+<code>
+// </head>の直前に以下を挿入
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet"/>
+</code>
+src/main.jsの追加コード
+<code>
+import Vuetify from "vuetify";
+import "vuetify/dist/vuetify.css";
+Vue.use(Vuetify);
+</code>
+上記の3つの作業を行えば、src/App.vueや、その配下のcomponentで、Vuetifyを使用できるらしいです。
@@ 行 95: / 行 114: @@
 ===== 3. Material Design Iconsアイコンの導入方法 =====
+実際にアイコンを使用するときは、
+https://materialdesignicons.com
+からアイコンを探してから、以下を参考に記載。
 https://www.npmjs.com/package/vue-material-design-icons
@@ 行 102: / 行 123: @@
 https://stackoverflow.com/questions/51792391/vue-cli-3-material-design-icons-installation
 →英語ですが、非常にわかりやすい説明です。
+vue-material-design-iconsを使用してみたいと思います。
+  -Add Dependencyからvue-material-design-iconsをインストール
+  -src/main.jsの変更
+  -src/App.vueでimport
+src/main.js
+<code>
+import "vue-material-design-icons/styles.css"
+</code>
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-185145.png}}
+src/App.vue
+<code>
+// template内
+<codepen-icon />
+// script内
+import CodepenIcon from "vue-material-design-icons/Codepen.vue"
+components: {
+  CodepenIcon
+}
+</code>
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-194314.png}}
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-194529.png}}
+参考：https://www.npmjs.com/package/vue-material-design-icons
+アイコンのリスト：https://materialdesignicons.com/
+Importするときの名前の付け方は、以下を参考。
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-193928.png}}
+==== MDIのインストール方法その2？ ====
+https://dev.materialdesignicons.com/getting-started/webfont
+→この通りにやってうまくいくのか、いまいち分かりません、、、
+==== Nuxt.js+Vuetifyでアイコンの利用方法 ====
+https://qiita.com/high-u/items/b8c708cd3795d2ab4a13
+@high-u
+年05月05日に更新
+Nuxt.js で CSS フレームワークを 3 つ試した。
+→fontAwesomeとMaterial icons両方を同時に使う方法が説明されています。