vue3+vuetifyでvue-social-sharing/fontawesomeを使いたい

#vue yarn create vuetify
√ Project name: … vue-social-shareing-test
√ Which preset would you like to install? » Base (Vuetify, VueRouter)
√ Use TypeScript? … No / Yes
√ Would you like to install dependencies with yarn, npm, or pnpm? » yarn

yarn add vue-social-sharing@next

<template>
  <v-container class="fill-height">
    <v-responsive class="d-flex align-center text-center fill-height">
      <v-row class="d-flex align-center justify-center">
        <v-col cols="auto">
          <ShareNetwork
    network="facebook"
    url="https://news.vuejs.org/issues/180"
    title="Say hi to Vite! A brand new, extremely fast development setup for Vue."
    description="This week, I’d like to introduce you to 'Vite', which means 'Fast'. It’s a brand new development setup created by Evan You."
    quote="The hot reload is so fast it\'s near instant. - Evan You"
    hashtags="vuejs,vite"
  >
    Share on Facebook
</ShareNetwork>
        </v-col>
      </v-row>
    </v-responsive>
  </v-container>
</template>

<script setup>
  //
</script>

/**
 * plugins/index.js
 *
 * Automatically included in `./src/main.js`
 */

// Plugins
import { loadFonts } from './webfontloader'
import vuetify from './vuetify'
import router from '../router'
import VueSocialSharing from 'vue-social-sharing'

export function registerPlugins (app) {
  loadFonts()
  app
  .use(VueSocialSharing)
    .use(vuetify)
    .use(router)
}

<template>
  <v-container class="fill-height">
    <v-responsive class="d-flex align-center text-center fill-height">
      <v-row class="d-flex align-center justify-center">
        <v-col cols="auto">
          <ShareNetwork
          v-for="network in networks" :key="network.name" :network="network.name"
    :title="sharing.title"
    :description="sharing.description"
    :quote="sharing.quote"
    :hashtags="sharing.hashtags"
    :twitterUser="sharing.twitterUser"
    :url="url"
  >
    Share on {{ network.name }}
</ShareNetwork>
        </v-col>
      </v-row>
    </v-responsive>
  </v-container>
</template>


<script>
export default {
    props:{
        sharing:{
            type:Object,
            default: () => ({
                title: 'JAPAN RUGBY Player Stats - datairoro',
                description: '',
                quote: '',
                hashtags: 'rugbyjp,ラグビー',
                twitterUser: 'iroro_sports'
            })
        },
        networks:{
            type:Array,
            default: () => [
                { network: 'twitter', name: 'Twitter', icon: 'fab fah fa-lg fa-twitter', color: '#1da1f2' },
                { network: 'facebook', name: 'Facebook', icon: 'fab fah fa-lg fa-facebook-f', color: '#1877f2' },
                { network: 'line', name: 'Line', icon: 'fab fah fa-lg fa-line', color: '#00c300' },
                { network: 'wordpress', name: 'Wordpress', icon: 'fab fah fa-lg fa-wordpress', color: '#21759b' },
                { network: 'evernote', name: 'Evernote', icon: 'fab fah fa-lg fa-evernote', color: '#2dbe60' },
                { network: 'email', name: 'Email', icon: 'far fah fa-lg fa-envelope', color: '#333333' },
            ]
        },
        url:{
            type:String
        }
    }
}
</script>