Question

我正在使用vuetify 1.1.8和vue 3.0.0-rc.3。我正在尝试使用我设计的项目中的一些自定义SVG图标，而不是vuetify

支持的Material Icons或FontAwesome Icons中的默认图标。

我尝试使用vue-svg-loader加载我的自定义svg图标，并将其用作组件。像这样

<template>
    <icon-one></icon-one>
</template>

<script>
    import iconOne from './public/iconOne.svg'
    export default{
        components:{
                 iconOne
          }
    }
</script>

但是vue-svg-loader的问题在于我无法在<v-text-field>的{{1}}以及我可以自由使用append-icon的许多其他地方使用它们。

我还读过vuetify docs，他们提到使用自定义图标，但我认为这也无济于事。

有人可以帮我这个忙吗？也许我应该尝试材质角支持的精灵图像

TL; DR

我有自定义的自制SVG图标，我想在vuetify中将它们用作<v-icon>

Answer 1

对于Vuetify＆Nuxt，您可以这样操作：

将徽标文件放入静态文件夹，并在元件文件夹中创建CompanyLogo.vue：

<template>
  <img src="/company-logo.svg">
</template>

然后您可以通过<CompanyLogo />

在其他所有组件中使用它

如果需要，也可以设置动画效果，例如像这样：

<template>
  <img
    class="LogoAnimation"
    src="/company-logo.svg"
  >
</template>

<style>
.LogoAnimation {
  transform: rotateY(560deg);
  animation: turn 3.5s ease-out forwards 1s;
}

@keyframes turn {
  100% {
    transform: rotateY(0deg);
  }
}
</style>

Answer 2

实际上，您可以在其自己的Vue单个文件组件中创建一个vue图标，然后注册该组件，以便vuetify可以在VICon（v-icon）组件内部使用它。

要创建Vue组件图标，只需将SVG放在模板标签的内部，如Vue Cookbook所示。本文档还应帮助您在任何vue应用程序中使用该组件。

<template>
    <svg>...</svg>
</template>

接下来，您需要向vuetify注册该组件。 Vuetify配置有时在索引文件中，或者在现代的vue-cli中，可以在@ / src / plugins / vuetify.js中找到。

在那里，您可以按照Vuetify's site所示注册组件（您已经提到了此链接），但是此文档可能是更新的或不清楚的。

现在，该组件将被注册，并且可以在VApp内部的任何位置使用。但是，与标准图标不同，您需要在v-icon插槽内使用$ vuetify.icons。[icon-name]。在Vuetify示例中，图标被注册为“产品”。要使用此功能，您需要添加

<v-icon>>$vuetify.icons.product</v-icon>

我正在一个正在进行的项目中工作。我将保留当前状态为here的分支。

图标组件位于/ src / icons中。 Vuetify配置位于/ src / plugins中，而svg图标组件位于/src/components/PlotSelector.vue中。

Answer 3

所以基本上我认为您误解了Vuetify Icons的工作原理，不适用于实际的svg文件，而是使用图标字体（例如，真棒字体和材料提供的字体）来工作。使用自定义组件可以注册使用预先提供的字符串的全局组件，该字符串使用其字体名称调用图标。

Vue.use(Vuetify, {
  iconfont: 'mdi',
  icons: {
    'product': 'mdi-dropbox',
    'support': 'mdi-lifebuoy',
    'steam': 'mdi-steambox',
    'pc': 'mdi-desktop-classic',
    'xbox': 'mdi-xbox',
    'playstation': 'mdi-playstation',
    'switch': 'mdi-nintendo-switch'
  }
})

在这里您可以看到正在注册材质设计图标，然后传入icons对象，该对象用作键->值映射来调用所需的图标。这样做是为了简单起见，因为图标字体经常使用不能有效用作键的字符（即，mdi-dropbox在上面变成$ vuetify.icons.product）。

<template>
  <div class="my-component">
    <v-icon v-text="icon"></v-icon>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    props: {
      icon: {
        type: String,
        default: '$vuetify.icons.cancel'
      }
    }
  }
</script>

在这里，我们正在创建一个自定义组件，该组件具有嵌入其中的逻辑，并且由于其将图标逻辑封装在其中而变得可重用。尽管仍使用与默认字体相同的图标字体或作为道具传递，但是很遗憾，这里没有任何更改。

老实说，除非您有很多图标，然后使字体图标听起来像是过分杀伤，否则创建一个图标组件并将svg传递到一个简单的<img>标签并使用CSS可能会更简单。操纵它的坐姿/外观。

Answer 4

每vue v2 docs

创建包含svg图标代码

的自定义组件

// CustomIcon.vue
<template>
  <svg>
    ...
  </svg>
</template>

在vuetify配置中包含自定义图标组件：

// vuetify.ts

import CustomIcon from '@/components/CustomIcon.vue'

export default new Vuetify({
  theme: {/**/},
  icons: {
    values: {
      custom: { // name of our custom icon
        component: CustomIcon, // our custom component
      },
    },
  },
})

像这样使用它

<v-icon>$vuetify.icons.custom</v-icon>

或快捷方式：

<v-icon>$custom</v-icon>

如何在Vuetify中添加自定义SVG图标-Vue

4 个答案: