Question

我创建了一个包装默认组件的组件，以使它在font-awesome中表现更好。

由于字体真棒图标不是方形的，因此会导致尺寸和对齐问题不一致。我通过创建一个将元素强制为正方形的包装器并使用“ font-size：100％;”来解决此问题。确保包含不规则形状的图标。

问题在于，使用真棒字体时，所有带有“ prepend-icon” /“ append-icon”的vuetify组件仍然显示不佳。

我想知道是否可以用其他名称导入v-icon，然后在我的包装器组件中使用它，然后将我的包装器定义为合法的v-icon。从理论上讲，哪种方法可以使用前置/附加图标解决所有vuetify组件的对齐/大小调整。

有人知道如何覆盖这样的库组件吗？

谢谢

Answer 1

我做过非常相似的事情，在整个项目中，我不得不用SVG替换默认图标（在旧版本的Vuetify中），同时仍然想使用v-icon组件。

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

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

（示例摘自Vuetify文档。）

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

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

<v-icon>$vuetify.icons.vuejs</v-icon>（ vuejs 是图标的名称。）

这至少是我最终要做的。对您来说，这可能太冗长了。无论如何，请让我知道您对这种方法的看法。

覆盖Vuetify图标组件

1 个答案: