40 lines
1.5 KiB
Vue
40 lines
1.5 KiB
Vue
<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: invert(39%) sepia(86%) saturate(1828%) hue-rotate(96deg) brightness(104%) contrast(92%);
|
|
}
|
|
.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-blue {
|
|
filter: invert(9%) sepia(98%) saturate(7147%) hue-rotate(248deg) brightness(94%) contrast(145%);
|
|
}
|
|
.svg-green {
|
|
filter: invert(86%) sepia(27%) saturate(7338%) hue-rotate(49deg) brightness(110%) contrast(110%);
|
|
}
|
|
.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) saturate(100%) invert(100%) sepia(2%) saturate(0%) hue-rotate(101deg) brightness(102%) contrast(102%);
|
|
}
|
|
.svg-black {
|
|
filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(235deg) brightness(107%) contrast(107%);
|
|
}
|
|
</style> |