Как сделать эффект изменения цвета иконок при наведении на них курсора мыши?

Для реализации изменения цвета иконок при наведении на них курсора мыши, можно использовать CSS псевдокласс `:hover`. 

Пример кода CSS для изменения цвета иконок при наведении:

```css
.icon:hover {
  color: red; /* измените на желаемый цвет */
}
```

Если все иконки находятся в компоненте Icon.vue, то можно добавить класс `icon` в шаблон компонента:

```html
<template>
  <svg class="icon"></svg>
</template>
```

Затем в стилях компонента Icon.vue добавить стили для псевдокласса `:hover`:

```css
<style scoped>
.icon:hover {
  fill: red; /* измените на желаемый цвет */
}
</style>
```

Таким образом, при наведении курсора на иконку SVG в компоненте Icon.vue, её цвет будет изменяться на указанный в стилях. 

Для реализации изменения цвета иконок при активации или отключении кнопки, можно также использовать CSS псевдоклассы `:active` и `:disabled` соответственно. 

Пример кода CSS для изменения цвета иконок при активации и отключении:

```css
.icon:active {
  color: blue; /* измените на желаемый цвет */
}

.icon:disabled {
  color: grey; /* измените на желаемый цвет */
}
```

При использовании кнопок с этими псевдоклассами в вашем приложении, иконки внутри компонента Icon.vue будут менять цвет при активации и отключении кнопки.

stroke="currentColor" 

<button class="primary">

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