File tree 1 file changed +5
-14
lines changed 1 file changed +5
-14
lines changed Original file line number Diff line number Diff line change 83
83
aria-label ={isFavorite ? " Remove from favorites" : " Add to favorites" }
84
84
title ={isFavorite ? " Remove from favorites" : " Add to favorites" }
85
85
>
86
- {#if isFavorite }
87
- <svg xmlns =" http://www.w3.org/2000/svg" class =" heart-icon filled" viewBox =" 0 0 24 24" width =" 24" height =" 24" >
88
- <path fill =" currentColor" d =" M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
89
- </svg >
90
- {:else }
91
- <svg xmlns =" http://www.w3.org/2000/svg" class =" heart-icon" viewBox =" 0 0 24 24" width =" 24" height =" 24" >
92
- <path fill =" none" stroke =" currentColor" stroke-width =" 2" d =" M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
93
- </svg >
94
- {/if }
86
+ <i class ={` fa-heart heart-icon ${isFavorite ? ' fas filled' : ' far' } ` }></i >
95
87
</button >
96
88
</div >
97
89
{:else }
98
90
<div class =" code-heart" >
99
- {#if isFavorite }
100
- <svg xmlns =" http://www.w3.org/2000/svg" class =" heart-icon filled" viewBox =" 0 0 24 24" width =" 24" height =" 24" >
101
- <path fill =" currentColor" d =" M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
102
- </svg >
103
- {/if }
91
+ {#if isFavorite }
92
+ <i class =" fas fa-heart heart-icon filled" ></i >
93
+ {/if }
104
94
</div >
105
95
{/if }
106
96
120
110
align-items : center ;
121
111
justify-content : center ;
122
112
transition : transform 0.2s ease ;
113
+ font-size : 24px ;
123
114
}
124
115
125
116
.heart-button :hover {
You can’t perform that action at this time.
0 commit comments