@@ -7,6 +7,7 @@ const props = defineProps({
77 name: { type: String , required: true , default: " warning"
88 size: { type: [String , Number ], default: " 16"
99 color: { type: String , default: null },
10+ hoverColor: { type: String , required: false },
1011 rotate: { type: [String , Number ], default: 0 },
1112 fill: { type: Boolean , default: false },
1213 scale: { type: [String , Number ], default: 1 },
@@ -15,8 +16,8 @@ const props = defineProps({
1516
1617const styles = computed (() => {
1718 const s = {
18- minWidth: ` ${ props .size } `
19- minHeight: ` ${ props .size } `
19+ minWidth: ` ${ props .size } `
20+ minHeight: ` ${ props .size } `
2021 transformBox: " view-box"
2122 transformOrigin: " center center"
2223 transform: " "
@@ -25,7 +26,7 @@ const styles = computed(() => {
2526 const ops = []
2627 if (props .rotate ) ops .push (` rotate(${ props .rotate } `
2728 if (props .scale != 1 ) ops .push (` scale(${ props .scale } `
28- if (ops .length ) s .transform = ops .join (" "
29+ if (ops .length ) s .transform = ops .join (" "
2930
3031 return s
3132})
@@ -38,6 +39,11 @@ const classes = computed(() => {
3839 return iconClasses
3940})
4041
42+ const hoverColorVar = computed (() => {
43+ if (! props .hoverColor ) return " transparent"
44+ return ` var(--txt-${ props .hoverColor } `
45+ })
46+
4147const getIcon = () => {
4248 return icons[props .name .charAt (0 ).toLowerCase () + props .name .slice (1 )]
4349}
@@ -48,7 +54,14 @@ const isSplitted = () => {
4854script >
4955
5056<template >
51- <svg viewBox =" 0 0 24 24" :width =" size" :height =" size" :style =" styles" :class =" [classes, loading && $style.loading]" role =" img"
57+ <svg
58+ viewBox =" 0 0 24 24"
59+ :width =" size"
60+ :height =" size"
61+ :style =" styles"
62+ :class =" [classes, hoverColor && $style.hovered, loading && $style.loading]"
63+ role =" img"
64+ >
5265 <path v-if =" !isSplitted(name)" :d =" getIcon(name)"
5366 <template v-else >
5467 <path v-if =" !Array.isArray(getIcon(name))" :d =" getIcon(name)" :style =" { opacity: path.opacity }"
@@ -70,6 +83,14 @@ const isSplitted = () => {
7083 animation 1s ease-in-out infinite ;
7184}
7285
86+ .hovered {
87+ transition all 0.2s ease ;
88+
89+ &:hover {
90+ fill : v-bind(hoverColorVar);
91+ }
92+ }
93+
7394@keyframes skeleton {
7495 0% {
7596 opacity 1 ;
@@ -83,4 +104,4 @@ const isSplitted = () => {
83104 opacity 1 ;
84105 }
85106}
86- style >
107+ style >
0 commit comments