覆盖 Vuetify Icon 组件

Posted 2023-02-23

【中文标题】覆盖 Vuetify Icon 组件

【英文标题】：Override Vuetify Icon component

【发布时间】：2019-10-17 07:28:29

【问题描述】：

我创建了一个组件，它包装了默认组件，以使其与 font-awesome 一起表现得更好。

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

问题是所有具有“prepend-icon”/“append-icon”的 vuetify 组件在使用 font-awesome 时仍然显示不好。

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

有没有人知道我可以如何覆盖这样的库组件？

谢谢

【问题讨论】：

请分享您的代码

【参考方案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 是图标的名称。）

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