73 lines
1.9 KiB
Vue
73 lines
1.9 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>
|
|
|
|
/* primary: $blue-dianne (#204853) */
|
|
.svg-primary {
|
|
filter: invert(19%) sepia(18%) saturate(1514%) hue-rotate(151deg) brightness(97%) contrast(85%);
|
|
}
|
|
|
|
/* secondary: $fiord (#3c5b63) */
|
|
.svg-secondary {
|
|
filter: invert(27%) sepia(12%) saturate(1506%) hue-rotate(153deg) brightness(96%) contrast(87%);
|
|
}
|
|
|
|
/* accent: $parchment (#f2e5d6) */
|
|
.svg-accent {
|
|
filter: invert(93%) sepia(13%) saturate(1217%) hue-rotate(331deg) brightness(101%) contrast(90%);
|
|
}
|
|
|
|
/* findata/info/warning: $sirocco (#758385) */
|
|
/* Cả ba đều dùng chung bộ lọc này */
|
|
.svg-findata,
|
|
.svg-info,
|
|
.svg-warning {
|
|
filter: invert(56%) sepia(10%) saturate(301%) hue-rotate(167deg) brightness(92%) contrast(82%);
|
|
}
|
|
|
|
/* danger: $danger-red (#f14668) */
|
|
.svg-danger {
|
|
filter: invert(34%) sepia(91%) saturate(2465%) hue-rotate(332deg) brightness(100%) contrast(97%);
|
|
}
|
|
|
|
/* success: $forest-green (#2F7C4E) */
|
|
.svg-success {
|
|
filter: invert(20%) sepia(21%) saturate(2657%) hue-rotate(119deg) brightness(97%) contrast(86%);
|
|
}
|
|
|
|
/* dark: $cutty-sark (#566c72) */
|
|
.svg-dark {
|
|
filter: invert(36%) sepia(11%) saturate(1009%) hue-rotate(152deg) brightness(96%) contrast(85%);
|
|
}
|
|
|
|
/* light: $pearl-bush (#e3d8cb) */
|
|
.svg-light {
|
|
filter: invert(92%) sepia(21%) saturate(233%) hue-rotate(334deg) brightness(100%) contrast(91%);
|
|
}
|
|
|
|
/* twitter: $pewter (#959b99) */
|
|
.svg-twitter {
|
|
filter: invert(70%) sepia(7%) saturate(271%) hue-rotate(170deg) brightness(94%) contrast(89%);
|
|
}
|
|
|
|
/* Các màu cơ bản tiện ích */
|
|
.svg-white {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
.svg-black {
|
|
filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(235deg) brightness(107%) contrast(107%);
|
|
}
|
|
</style>
|