1. YutoYasunaga

    Posted

    YutoYasunaga
Changes in title
+Ruby on Rails アプリにVuetifyとFontAwesomeの導入
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,59 @@
+# Vuetify導入
+
+```
+yarn add vuetify @fortawesome/fontawesome-free
+```
+
+```javascript:app/javascript/packs/plugins/vuetify.js
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import "vuetify/dist/vuetify.min.css"
+import '@fortawesome/fontawesome-free/css/all.css'
+
+Vue.use(Vuetify)
+export default new Vuetify({
+ icons: {
+ iconfont: 'fa',
+ }
+})
+```
+
+
+```javascript:app/javascript/packs/main.js
+import vuetify from './plugins/vuetify'
+
+document.addEventListener('DOMContentLoaded', () => {
+ const app = new Vue({
+ vuetify,
+ render: h => h(App)
+ }).$mount()
+ document.body.appendChild(app.$el)
+})
+```
+
+## 使用例
+
+```html
+<v-icon>fas fa-home</v-icon>
+```
+
+
+# FontAwesome導入
+
+```
+yarn add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome
+```
+
+```javascript:app/javascript/packs/main.js
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+Vue.config.productionTip = false
+Vue.component('FontAwesomeIcon', FontAwesomeIcon)
+```
+
+### 使用例
+
+```html
+<FontAwesomeIcon icon="user"/>
+<FontAwesomeIcon :icon="['far', 'star']"/>
+<FontAwesomeIcon :icon="['fab', 'facebook']"/>
+```