Vuetify v-for 改变 v-icon 颜色答案

【问题标题】：Vuetify v-for change v-icon colorVuetify v-for 改变 v-icon 颜色
【发布时间】：2021-04-17 14:49:18
【问题描述】：

我有一个包含按钮的页脚，我迭代这些按钮以更改每个按钮的图标，我对颜色做了同样的事情，但现在有一个问题， 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 颜色渐变？我必须扭曲所有代码吗？

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

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

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

<style>
/* https://stackoverflow.com/a/44940095/6277151 */
.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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：