SVG изображения не могут изменить css тег герои img

Question

Это может быть глупый вопрос, у меня есть приложение vue, и я хочу использовать героиконы https://www.heroicons.com/. В компоненте у меня есть

<template>
  <a :href="url" target="_blank" class="w-full lg:w-1/3 px-2">
    <div
      class="shadow-md mb-16 p-8 pt-12 rounded gridItem bg-theme-secondary relative transition duration-300 ease-in-out transform hover:-translate-y-1"
    >
      <img :src="require(`@/assets/images/icons/${icon}`)" class="absolute top-0 -mt-10 w-20" />
      <h2 class="text-xl font-medium mb-2">{{ gridTitle }}</h2>
      <p class="text-base">{{ gridAText }}</p>
      <p class="text-sm">{{ gridBText }}</p>
    </div>
  </a>
</template>

и пример использования у меня есть

<GridItem
  icon="heroicon-server-sm.svg"
  grid-title="FTP Access"
  grid-a-text="With full FTP access you can upload and install files to enhance your playing experience quickly."
/>

здесь я вызываю svg, но как вывести фактический svg, потому что с помощью изображения тег Я не могу изменить SVG, используя классы в SVG.

---

Вот пример SVG

<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" class="heroicon-server heroicon heroicon-sm">
    <polygon class="heroicon-server-housing heroicon-component-fill" points="10 56 10 53 7 53 7 1 53 1 53 53 50 53 50 56 53 56 53 59 7 59 7 56 10 56"></polygon>
    <path class="heroicon-server-boxes heroicon-component-accent heroicon-component-fill" d="M9 3h42v14H9V3zm0 15h42v14H9V18zm0 15h42v14H9V33z"></path>
    <path class="heroicon-server-controls heroicon-component-fill" d="M12 7h10v6H12V7zm0 15h10v6H12v-6zm0 15h10v6H12v-6zm18-24a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
    <rect class="heroicon-shadows" width="40" height="3" x="10" y="53"></rect>
    <path class="heroicon-outline" fill-rule="nonzero" d="M8 54a2 2 0 0 1-2-2V2c0-1.1.9-2 2-2h44a2 2 0 0 1 2 2v50a2 2 0 0 1-2 2h-1v1h3v5H6v-5h3v-1H8zM52 2H8v50h44V2zm-3 52H11v1h38v-1zM8 57v1h44v-1H8zm2-54h41v14H9V3h1zm40 1H10v12h40V4zM39 6v8h-1V6h1zM13 7h9v6H12V7h1zm8 1h-8v4h8V8zm20-2v8h-1V6h1zm1 0h1v8h-1V6zm3 0v8h-1V6h1zm1 0h1v8h-1V6zm3 5v1h-1v-1h1zm-1 2h1v1h-1v-1zm-18 0a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm2-3a2 2 0 1 0-4 0 2 2 0 0 0 4 0zm-22 8h41v14H9V18h1zm0 1v12h40V19H10zm29 2v8h-1v-8h1zm-26 1h9v6H12v-6h1zm8 1h-8v4h8v-4zm20-2v8h-1v-8h1zm1 0h1v8h-1v-8zm3 0v8h-1v-8h1zm1 0h1v8h-1v-8zm3 5v1h-1v-1h1zm-1 2h1v1h-1v-1zm-18 0a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm2-3a2 2 0 1 0-4 0 2 2 0 0 0 4 0zm-22 8h41v14H9V33h1zm0 1v12h40V34H10zm29 2v8h-1v-8h1zm-26 1h9v6H12v-6h1zm8 1h-8v4h8v-4zm20-2v8h-1v-8h1zm1 0h1v8h-1v-8zm3 0v8h-1v-8h1zm1 0h1v8h-1v-8zm3 5v1h-1v-1h1zm-1 2h1v1h-1v-1zm-18 0a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm2-3a2 2 0 1 0-4 0 2 2 0 0 0 4 0z"></path>
</svg>

Вот классы, которые вы изменили с CSS как показано на сайте

.heroicon-outline {
  fill: #303034;
}
.heroicon-shadow {
  fill: #000;
  opacity: 0.4;
}
.heroicon-component-fill {
  fill: #fff;
}
.heroicon-component-accent {
  fill: #7acfc0;
}

Answer 1

Использование пакета vue-inline-svg сработало.

Теперь компонент импортирован после импорта пакета.

<template>
  <a :href="url" target="_blank" class="w-full lg:w-1/3 px-2">
    <div
      class="shadow-md mb-16 p-8 pt-12 rounded gridItem bg-theme-secondary relative transition duration-300 ease-in-out transform hover:-translate-y-1"
    >
      <inline-svg
        :src="require(`@/assets/images/icons/${icon}`)"
        class="absolute top-0 -mt-10 w-20"
      ></inline-svg>
      <h2 class="text-xl font-medium mb-2">{{ gridTitle }}</h2>
      <p class="text-base">{{ gridAText }}</p>
      <p class="text-sm">{{ gridBText }}</p>
    </div>
  </a>
</template>