Vuetify v-for 更改 v-icon 颜色

Question

我有一个包含按钮的页脚，我反复更改每个按钮的图标，我对颜色做了同样的事情，但现在遇到了问题， Html:

<v-btn
          v-for="icon in icons"
          :key="icon.id"
          class="mx-4 "
          icon
        >
          <v-icon :color="icon.color" size="24px">
            {{ icon.icon }}
          </v-icon>
        </v-btn>

脚本：

data: () => ({
  icons: [
    {
      id: 1,
      icon: 'mdi-facebook',
      color: '#4267B2'
    },
    {
      id: 2,
      icon: 'mdi-twitter',
      color: '#26c6da'
    },
    {
      id: 3,
      icon: 'mdi-linkedin',
      color: '#2867B2'
    },
    {
      id: 4,
      icon: 'mdi-instagram',
      color: '#e4405f'
    },
  ],
}),

如何制作 Instagram 颜色渐变？我必须扭曲所有代码吗？

Answer 1

您不能将 Vuetify 颜色属性用于渐变。

您需要从 https://materialdesignicons.com/ 下载 SVG。

接下来，您需要修改 SVG 以获得所需的渐变。

最后，在您的组件中内联 SVG，当 icon === 'mdi-instagram' 时，您显示内联 SVG。

Answer 2

您可以使用 CSS 来设置图标背景的样式，使用 .mdi-instagram 选择器：

<template>
  <v-icon>mdi-instagram</v-icon>
</template>

<style>
/*  */
.mdi-instagram {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>

结果：

demo

Vuetify v-for 更改 v-icon 颜色

Vuetify v-for change v-icon color

javascript

vue.js

vuetify.js