关于vuejs2：如何在Vuetify中添加自定义SVG图标-Vue


How To Add Custom SVG Icon in Vuetify - Vue

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

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

1
2
3
4
5
6
7
8
9
10
11
<template>
    <icon-one></icon-one>
</template>


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

但是vue-svg-loader的问题是我不能在的append-icon和我可以自由使用的许多其他地方使用它们。

我还阅读了他们提到的有关使用自定义图标的vuetify文档，但我认为这也没有帮助。

有人可以帮我这个忙。 也许我应该尝试由材质角度支持的子画面图像

TL; DR

我有自定义的自制SVG图标，我想在vuetify中将它们用作customIcon

相关讨论

每个vuetify v2文档

创建包含svg图标代码的自定义组件

1
2
3
4
5
6
// CustomIcon.vue
<template>
  <svg>
    ...
  </svg>
</template>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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
      },
    },
  },
})

像这样使用

$vuetify.icons.custom

或捷径：

$custom

相关讨论

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

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

1
2
3
<template>
    <svg>...</svg>
</template>

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

您可以在此处注册组件，如Vuetify网站上所示(您已经提到了此链接)，但是此文档可能是更新的或不清楚的。

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

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

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

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

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

将徽标文件放入静态文件夹，然后在components文件夹中创建CompanyLogo.vue：

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

然后可以通过在其他所有组件中使用它

您也可以设置动画，例如像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

相关讨论