<template>
  <nuxt-img loading="lazy" :alt="alt" :class="`svg-${type || 'findata'}`" :style="`width: ${size || 26}px;`"  :src="`/icon/${name || 'check.svg'}`"/>
</template>
<script>
export default {
  props: ['name', 'size', 'type', 'alt']
}
</script>
<style>
.svg-primary {
  filter: brightness(0) saturate(100%) invert(48%) sepia(97%) saturate(2023%) hue-rotate(188deg) brightness(98%) contrast(89%);
}
.svg-danger {
  filter: brightness(0) saturate(100%) invert(16%) sepia(100%) saturate(2983%) hue-rotate(351deg) brightness(101%) contrast(131%);
}
.svg-findata {
  filter: brightness(0) saturate(100%) invert(61%) sepia(85%) saturate(1880%) hue-rotate(340deg) brightness(101%) contrast(101%);
}
.svg-warning {
  filter: invert(86%) sepia(24%) saturate(5381%) hue-rotate(347deg) brightness(100%) contrast(103%);
}
.svg-blue {
  filter: invert(9%) sepia(98%) saturate(7147%) hue-rotate(248deg) brightness(94%) contrast(145%);
}
.svg-green {
  filter: invert(43%) sepia(99%) saturate(1326%) hue-rotate(88deg) brightness(97%) contrast(95%);
}
.svg-grey {
  filter: invert(100%) sepia(0%) saturate(213%) hue-rotate(133deg) brightness(86%) contrast(93%);
}
.svg-gray {
  filter: invert(35%) sepia(10%) saturate(18%) hue-rotate(338deg) brightness(97%) contrast(82%);
}
.svg-gray1 {
  filter: invert(34%) sepia(6%) saturate(71%) hue-rotate(315deg) brightness(95%) contrast(88%);
}
.svg-white {
  filter:  brightness(0) invert(1);
}
.svg-black {
  filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(235deg) brightness(107%) contrast(107%);
}
</style>