差分

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

--- 00.vue用デザインフレームワークvuetify:06.vuetifyでアイコンを利用 [2019/01/31] – [Font Awesomeアイコンの導入方法] 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 Iconsとそっくりですが、別物で、こちらの方が欲しいものが揃っている印象があります）
+https://vuetifyjs.com/ja/framework/icons
-===== リンク =====
 https://vuetifyjs.com/ja/components/icons
 v-iconコンポーネント
@@ 行 9: / 行 14: @@
 （1）公式のMaterial Icons
 https://material.io/tools/icons/
 （2）Font Awesomeアイコン
@@ 行 20: / 行 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を使用できるらしいです。
-===== Font Awesomeアイコンの導入方法 =====
+===== 2. Font Awesomeアイコンの導入方法 =====
+通常のhtmlファイルで利用する場合は、
 https://fontawesome.com/start
 へ行き、リンクをindex.htmlのhead内に記載する。
@@ 行 40: / 行 63: @@
 https://fontawesome.com/icons?d=gallery
 からアイコン（フリーのもの）を探してから、以下を参考に記載。
+https://qiita.com/JotarO_Oyanagi/items/541ea88870ee3b6888e9
+@JotarO_Oyanagi
+年01月05日に投稿
+シングルファイルコンポーネント内で Font Awesome をクラス指定で使う
+→Vue.jsで用いる場合は、この方法がお勧めです。
+  -codesandboxの場合、Add Dependencyから、@fontawesome/fontawesome-free-webfontsをインストール
+  -main.jsでimport
+<code>
+// Font Awesome のメインファイルを import
+import '@fortawesome/fontawesome-free-webfonts/css/fontawesome.css'
+// 使用するカテゴリーのファイルを import
+import '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css'
+import '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css'
+import '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css'
+</code>
+  -アイコンを使用したいコンポーネントのtemplate
+内で以下のように記載
+<code>
+<template>
+  <div>
+    <i class="fab fa-accessible-icon"/>
+  </div>
+</template>
+</code>
+fabとかfasとか書く必要があるそうです。farも使えますが、fal（Light）だけは有料なのでフリー版では使用できないとのことです。
+その他のリンク
 https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
@@ 行 50: / 行 107: @@
 Font awesome を Vue.js で使ってみよう
-https://qiita.com/JotarO_Oyanagi/items/541ea88870ee3b6888e9
-@JotarO_Oyanagi
-年01月05日に投稿
-シングルファイルコンポーネント内で Font Awesome をクラス指定で使う
-→これがよいかも！？
+===== 3. Material Design Iconsアイコンの導入方法 =====
+実際にアイコンを使用するときは、
+https://materialdesignicons.com
+からアイコンを探してから、以下を参考に記載。
+https://www.npmjs.com/package/vue-material-design-icons
+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両方を同時に使う方法が説明されています。
+===== リンク =====
+目次：
+前：
+次：
@@ 行 64: / 行 187: @@
-===== Material Design Iconsアイコンの導入方法 =====
-https://www.npmjs.com/package/vue-material-design-icons