Изменение цвета иконок при наведении?

Question

[setupx]

В папке /shared/ui/icon/Icon.vue я расположил все иконки таким образом:

code

<script setup lang="ts">

import type { IconType } from "@/shared/ui/icon/types"

interface Props {
  type: IconType
  size: number
}

const { type, size } = defineProps<Props>()

</script>

<template>
 <svg v-else-if="type === 'star'" xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24"
       fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
       class="lucide lucide-star">
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
  </svg>

</template>

и использую его в button(получаю по slot)

code

<script setup lang="ts">

import { computed } from "vue"
import { Typography } from "@/shared/ui/typography"

interface Props {
  color: "primary" | "secondary" | "tertiary" | "danger" | "only" // TODO: над only подумать
  state: "default" | "loading"
  size: "L" | "M" | "S"
  disabled?: boolean
}

const props = defineProps<Props>()

const btnClasses = computed(() => [
  `button`,
  `color_${props.color}`
])

const divClasses = computed(() => [
  `size_${props.size}`
])

</script>

<template>
  <button :class="btnClasses" :disabled="props.disabled">
    <div :class="['flex', 'justify-center', 'items-center', ...divClasses, { 'opacity-50': props.disabled }]">
      <slot name="leftIcon"></slot>
      <Typography v-if="size === 'L'" class="text-center font-semibold px-1" tagName="span" size="xl">
        <slot></slot>
      </Typography>
      <Typography v-else-if="size === 'M'" class="text-center font-semibold px-1" tagName="span" size="l">
        <slot></slot>
      </Typography>
      <slot name="rightIcon"></slot>
    </div>
  </button>
</template>

Вопрос: как мне сделать изменение цвета у svg при hover, active, disabled?

Answer 1

[Sigma Male]

У тегов svg и path есть свойства для задания цвета: stroke и fill
Пример на SCSS:

.button {
     svg, path {
        &:hover {
            fill: #000;
            stroke: #000;
        }
    }
}

В зависимости от ситуации задавайте цвет только для svg или только для path или для обоих одновременно. Тоже самое касается свойств stroke и fill. В зависимости от иконки может работать только одно свойство, а второе моет мешать. В общем, нужно самую малость поэкспериментировать.

Comments

[setupx]

да. я уже увидел их свойства. когда поигрался в браузере с ними. благодарю

Answer 2

[Сергей delphinpro]

stroke="currentColor" 

<button class="primary">

.primary {
  background: var(--primary);
  color: #fff;
  &:hover {
    color: #ccc;
  }
}

Comments

[Sigma Male]

С помощью color можно задать цвет для иконочных шрифтов, но не для обычных svg иконок.

[Сергей delphinpro]

Sigma Male, читайте внимательно, плиз.
Я шрифты для иконок не использую уже много лет. И все же управляю их цветом с помощью color.

[Sigma Male]

Сергей delphinpro, Перепроверил работу свойств и не могу с Вами согласится, color не влияет на цвет обычных svg иконок.

[Сергей delphinpro]

Sigma Male, плохо перепроверили. или я несколько лет в тумане живу=)))
Но поясню:
Значение currentColor принимает текущий цвет. Вычисленное значение свойства color.
Если вы зададите своим свг иконкам обводку или заливку (stroke/fill) значение currentColor, то оно примет вычисленное значение свойства color для элемента.

Простой пример:

В HTML

<div class="myicon">
  <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M73.092 164.452h255.813c4.949 0 9.233-1.807 12.848-5.424 3.613-3.616 5.427-7.898 5.427-12.847s-1.813-9.229-5.427-12.85L213.846 5.424C210.232 1.812 205.951 0 200.999 0s-9.233 1.812-12.85 5.424L60.242 133.331c-3.617 3.617-5.424 7.901-5.424 12.85 0 4.948 1.807 9.231 5.424 12.847 3.621 3.617 7.902 5.424 12.85 5.424zM328.905 237.549H73.092c-4.952 0-9.233 1.808-12.85 5.421-3.617 3.617-5.424 7.898-5.424 12.847s1.807 9.233 5.424 12.848L188.149 396.57c3.621 3.617 7.902 5.428 12.85 5.428s9.233-1.811 12.847-5.428l127.907-127.906c3.613-3.614 5.427-7.898 5.427-12.848 0-4.948-1.813-9.229-5.427-12.847-3.614-3.616-7.899-5.42-12.848-5.42z"/></svg>
</div>

В CSS

.mycolor {
  color: red;
}

Иконка станет красной

Пруф:


PS И на хрена я так стараюсь...