Question

我知道我可以在Vuetify中使用预定义的材料设计（或超棒的字体等...）图标，

<v-icon>mdi-clock</v-icon>

但是有没有一种方法可以使用v-icon组件在my-icon.svg文件中显示定义为svg的自定义图标？该.svg文件位于我的项目public/img目录中，但是如何在v-icon组件内部引用它？

Answer 1

AFAIK如果要用作外部svg，很遗憾，答案是肯定的。

无论如何，您可以使用vue-svg-loader将svg文件作为组件导入，然后在v-icon内部使用。

import Stack from "@/icons/stack.svg"; // import /src/icons/stack.svg

export default {
  components: {
    Stack
  }
};

然后使用它

<v-icon>
  <Stack/>
</v-icon>

另一种解决方案How To Add Custom SVG Icon in Vuetify - Vue。

Answer 2

您可以使用CSS实现相同的目的。

.v-icon
  height 20px
  width 20px
  &.engine
    background-image url(https://www.svgrepo.com/show/9344/train.svg)
    background-size contain
    background-repeat no-repeat
  &::before
    visibility hidden
    content ""

签出此codepen。

如何在Vuetify v-icon组件中使用自定义SVG图标？

2 个答案: