00.vue用デザインフレームワークvuetify:06.vuetifyでアイコンを利用

差分

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

この比較画面へのリンク

--- 00.vue用デザインフレームワークvuetify:06.vuetifyでアイコンを利用 [2019/01/31] – [1. Vuetify公式のMaterial Iconsを設定する方法] adash333
+++ 00.vue用デザインフレームワークvuetify:06.vuetifyでアイコンを利用 [2019/01/31] (現在) – [MDIのインストール方法その2？] adash333
@@ 行 5: / 行 5: @@
   -Font Awesomeアイコン
   -Material Design Icons（名前がMaterial Iconsとそっくりですが、別物で、こちらの方が欲しいものが揃っている印象があります）
+https://vuetifyjs.com/ja/framework/icons
 https://vuetifyjs.com/ja/components/icons
@@ 行 26: / 行 28: @@
 Material Iconsのリスト
-https://vuetifyjs.com/ja/framework/icons
+https://material.io/tools/icons/
 Vue.jsにVuetifyを導入するためには、以下の3つが必要です。
@@ 行 112: / 行 114: @@
 ===== 3. Material Design Iconsアイコンの導入方法 =====
+実際にアイコンを使用するときは、
+https://materialdesignicons.com
+からアイコンを探してから、以下を参考に記載。
 https://www.npmjs.com/package/vue-material-design-icons
@@ 行 119: / 行 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両方を同時に使う方法が説明されています。

00.vue用デザインフレームワークvuetify/06.vuetifyでアイコンを利用.1548936310.txt.gz · 最終更新: 2019/01/31 by adash333