[Vuejs]-Svg images cannot change css heroicons img tag

by

0👍

Using the vue-inline-svg package worked.

The component is now after importing the package.

<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>

Leave a comment