Как изменять цвет SVG во vue 3 в разных компонентах

Код написан на vue 3. Есть компонент где содержатся все иконки с сайта и есть второй компонент, где переиспользуются иконки из первого компонента. Вопрос, как изменять цвет иконки при наведении на нее, если она находится в другом компоненте? Пробовал передавать через props цвет в родительский компонент и изменять уже там при помощи @mouseover и @mouseleave, вроде получилось, но хотелось бы узнать, можно ли не трогать логику и поменять цвет hover эффектом через css стили?

Это мой компонент с иконками, которые должны через props type отображаться в других компонентах.

Ниже него представлен компонент где используется эта иконка

    ```<template> 
       <svg
          v-if="type === 'search'"
          width="16.000000"
          height="16.000000"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <desc>Created with Pixso.</desc>
          <defs />
          <path
            id="Vector"
            d="M11.88 11.87L15.25 15.25L11.88 11.87ZM11.88 11.88C10.68 13.07 9.06 13.75 7.37 
            13.75C5.68 13.75 4.06 13.07 2.86 11.88C1.67 10.68 1 9.06 1 7.37C1 5.68 1.67 4.06         2.86 
            2.86C4.06 1.67 5.68 1 7.37 1C9.06 1 10.68 1.67 11.88 2.86C13.07 4.06 13.75 5.68 13.75 
            7.37C13.75 9.06 13.07 10.68 11.88 11.88Z"
            stroke="#E4E4E4"
            stroke-opacity="1.000000"
            stroke-width="2.000000"
          />
        </svg>
    <template>
    <script>
    export default {
      name: "MyIcon",
      props: {
        type: {
          type: String,
        },
      },
    };
    </script>```

  <my-icon
    class="navigation-menu__icon"
    type="search"
  ></my-icon>```