43 lines
1.5 KiB
Vue
43 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: 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> |