Vue.jsでtwitterのアイコンを表示させたい

Question

解決したいこと

SideMenu内のアイコン表示についての質問です。

<script>タグの中のitemsにて、iconとして twitterのアイコン、gitのアイコンを表示したいのですが書き方がわかりません。 main.jsの方では、fontAwesomeのインポートは終わっています。 よろしくお願いします。 ```Vue <template> <b-sidebar id="sidebar-backdrop" bg-variant="white" text-variant="light" backdrop shadow > <div class="px-4 mt-5 mb-5 display-1 font-weight-medium">Menu</div> <v-divider/> <v-list-item v-for="(item, index) in items" :key="index" @click="getUrl(item.title)"> <v-list-item-icon> <v-icon>{{ item.icon }}</v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title> {{ item.title }} </v-list-item-title> </v-list-item-content> </v-list-item> </b-sidebar> </template> <script> export default { components: { }, data() { return { items: [ { title: 'home', icon: 'mdi-home' }, { title: 'twitter', icon: ['fab', 'twitter'] }, { title: 'git', icon: 'mdi-home' }, ] } }, methods: { getUrl(title) { if(title === 'twitter') { location.href = "https://twitter.com/" } else if (title === 'git') { location.href = "https://github.com/" } else { location.href = `${title}` } } } }; </script>

Answer 1

VuetifyでFont Awesomeのiconを使用する場合、fas と prefix fa- を付ける必要があります。
twitterの場合、指定するicon名は fa-twitter になります。

{ title: 'twitter', icon: 'fas fa-twitter' },

https://vuetifyjs.com/en/components/icons/#material-design