如何在Nuxt.js中正确实现图标链接的悬停效果

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome

// nuxt.config.js

module.exports = {
  // ...
  modules: [
    '@nuxtjs/fontawesome'
  ],
  fontawesome: {
    icons: {
      solid: true
    }
  }
  // ...
}

<!-- IconLink.vue -->

<template>
  <a class="icon-link" :href="link" :title="title">
    <font-awesome-icon :icon="icon" :class="{ 'hovered': hovered }" />
  </a>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

export default {
  components: {
    FontAwesomeIcon
  },
  props: {
    icon: {
      type: Array,
      required: true
    },
    link: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      hovered: false
    }
  }
}
</script>

<style scoped>
.icon-link {
  display: inline-block;
  transition: color 0.3s;
}

.icon-link:hover {
  color: red; /* 修改为你想要的悬停颜色 */
}

.hovered {
  color: red; /* 修改为你想要的悬停颜色 */
}
</style>

<template>
  <div>
    <IconLink :icon="['fas', 'home']" link="/" title="Home" />
    <IconLink :icon="['fas', 'envelope']" link="/contact" title="Contact" />
  </div>
</template>

<script>
import IconLink from '@/components/IconLink.vue'

export default {
  components: {
    IconLink
  }
}
</script>