Как изменить цвет иконки в системе Editable Svg Icons в кулинарной книге vuejs?

Question

Я пытаюсь использовать систему, предложенную vuejs cookbook для хранения значков SVG (https://vuejs.org/v2/cookbook/editable-svg-icons.html)

. Итак, у меня есть 2 компонента: IconBase и IconArrowUp. Мне нужно изменить цвет значка стрелки при наведении (также следует применить переход css).

В статье у них есть свойство * 1006. * Но мне не удалось изменить цвет с помощью css, и использовать такие события, как onmouseenter, не так удобно.

Вот код двух компонентов:

IconBase.vue:

<template>
  <svg xmlns="http://www.w3.org/2000/svg"
       :width="width"
       :height="height"
       viewBox="0 0 100 100"
       role="presentation"
       @click="$emit('click')">
    <g :fill="iconColor">
      <slot />
    </g>
  </svg>
</template>

<script>
  export default {
    props: {
      width: {
        type: [Number, String],
        default: 18
      },
      height: {
        type: [Number, String],
        default: 18
      },
      iconColor: {
        type: String,
        default: 'currentColor'
      }
    }
  }
</script>

И IconArrowUp.vue:

<template>
  <path d="m12.398 40.102 13.402 13.5 14.699-14.801v58.699h19v-58.699l14.699 14.801 13.402-13.5-37.602-37.602z"/>
</template>

Так вот как яиспользовать их (еще один компонент ScrollToTop.vue):

<template>
  <div class="scroll-to-top">
    <icon-base class="icon-arrow-up"
               width="20"
               height="20"
               icon-color="#949494">
      <icon-arrow-up/>
    </icon-base>
  </div>
</template>

Как изменить цвет значка при наведении курсора? Я хочу, чтобы IconArrowUp компонент оставался чистым, чтобы при необходимости использовать его безизменение цвета

Answer 1

Если цвет при наведении всегда один и тот же, вы можете просто использовать псевдо-класс :hover.Например, этот CSS делает значок синим при наведении SVG-контейнера, и переход занимает 400 мсек:

<style scoped>
  /* <g class="icon" ...> */
  .icon {
    transition: fill .4s ease;
  }
  svg:hover .icon {
    fill: blue;
  }
</style>

demo 1

В противном случае, если наведите курсорЦвет динамический, вы бы использовали JavaScript.Вы можете сделать условное условие fill для локального логического значения, которое изменяется в зависимости от событий mouseover / mouseout:

1. В IconBase.vue определить локальную переменную данных (например, с именем * 1018).*) для отслеживания состояния наведения и prop для установки цвета в состоянии наведения:

props: [
  // ...
  iconHoverColor: {
    type: String,
    default: "currentColor"
  }
],
data() {
  return {
    isHover: false
  }
}

Редактируйте шаблон IconBase.vue, чтобы сделать fill условным для isHover, и установите isHover на основе событий mouseover / mouseout контейнера SVG:

<svg @mouseover="isHover=true" @mouseout="isHover=false">
  <g :fill="isHover ? iconHoverColor : iconColor">

Чтобы установить цветовой переход, используйте свойство CSS transition для класса, примененного к <g>:

<style scoped>
  /* <g class="icon" ...> */
  .icon {
    transition: fill .4s ease;
  }
</style>

В ScrollToTop.vue отредактируйте использование IconBase для установки цвета наведения:

<icon-base icon-hover-color="#ff0000" ...>

demo 2