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] – [3. Material Design Iconsアイコンの導入方法] adash333 | ||
---|---|---|---|
行 5: | 行 5: | ||
-Font Awesomeアイコン | -Font Awesomeアイコン | ||
-Material Design Icons(名前がMaterial Iconsとそっくりですが、別物で、こちらの方が欲しいものが揃っている印象があります) | -Material Design Icons(名前がMaterial Iconsとそっくりですが、別物で、こちらの方が欲しいものが揃っている印象があります) | ||
+ | |||
+ | https:// | ||
https:// | https:// | ||
行 26: | 行 28: | ||
Material Iconsのリスト | Material Iconsのリスト | ||
- | https://vuetifyjs.com/ja/ | + | https://material.io/tools/icons/ |
Vue.jsにVuetifyを導入するためには、以下の3つが必要です。 | Vue.jsにVuetifyを導入するためには、以下の3つが必要です。 | ||
行 112: | 行 114: | ||
===== 3. Material Design Iconsアイコンの導入方法 ===== | ===== 3. Material Design Iconsアイコンの導入方法 ===== | ||
+ | 実際にアイコンを使用するときは、 | ||
+ | https:// | ||
+ | からアイコンを探してから、以下を参考に記載。 | ||
https:// | https:// | ||
行 120: | 行 124: | ||
→英語ですが、非常にわかりやすい説明です。 | →英語ですが、非常にわかりやすい説明です。 | ||
+ | vue-material-design-iconsを使用してみたいと思います。 | ||
+ | |||
+ | -Add Dependencyからvue-material-design-iconsをインストール | ||
+ | -src/ | ||
+ | -src/ | ||
+ | |||
+ | src/main.js | ||
+ | < | ||
+ | import " | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | src/App.vue | ||
+ | < | ||
+ | // template内 | ||
+ | < | ||
+ | |||
+ | // script内 | ||
+ | import CodepenIcon from " | ||
+ | |||
+ | components: { | ||
+ | CodepenIcon | ||
+ | } | ||
+ | </ | ||
+ | {{: | ||
+ | {{: | ||
+ | 参考:https:// | ||
+ | アイコンのリスト:https:// | ||
+ | Importするときの名前の付け方は、以下を参考。 | ||
+ | {{: | ||
00.vue用デザインフレームワークvuetify/06.vuetifyでアイコンを利用.txt · 最終更新: 2019/01/31 by adash333