Css 覆盖Vuetify图标组件

我已经创建了一个组件，它包装了默认组件，使其在使用font awesome时表现得更好

由于字体图标不是方形的，因此会导致大小和对齐不一致的问题。我通过创建一个包装器来解决这个问题，该包装器强制元素为正方形，并使用“字体大小：100%；”来确保包含不规则形状的图标

问题是，所有具有“prepend图标”/“append图标”的vuetify组件在使用字体时仍然显示不好

我想知道是否有方法以不同的名称导入v-icon，在我的包装器组件中使用它，然后将我的包装器定义为正确的v-icon。理论上，这将使用prepend/append图标解决所有vuetify组件的对齐/大小调整问题

有人知道我如何重写这样的库组件吗

---

感谢

我做了一件非常类似的事情，在整个项目中，我不得不用SVG替换默认图标（在Vuetify的旧版本中），同时仍然希望使用

v-icon

组件

我最终创建了一个名为SVGIcon.vue。然后我定义了一些图标名称，如下所示：

Vue.use(Vuetify, {
  icons: {
    // reusable custom icon
    'vuejs': {
      component: FontAwesomeIcon,
      props: {
        icon: ['fab', 'vuejs']
      }
    }
  }
})

（示例取自Vuetify文档。）

您还可以将自定义的“道具”传递给您定义的每个图标

最后，您可以这样使用它：

$vuetify.icons.vuejs

（vuejs是图标的名称。）

---

这就是我最后要做的。对你来说，这可能太冗长了。无论如何，一定要让我知道您对这种方法的看法。

请分享您的代码