覆盖 Vuetify Icon 组件

Question

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

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

问题是所有具有 "prepend-icon" / "append-icon" 的 vuetify 组件在使用 font-awesome 时仍然显示得很糟糕。

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

有谁知道我如何覆盖这样的库组件？

谢谢

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 文档。）

您还可以将自定义 'props' 传递给您定义的每个图标。

终于可以这样使用了：

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

至少我最终是这样做的。对你来说，这可能太long-winded了。无论如何，请告诉我您对这种方法的看法。

覆盖 Vuetify Icon 组件

Override Vuetify Icon component

css

components

overriding

vuejs2

vuetify.js