Note > tailwindcsstailwindcss google icon hover color changeBy a3040, Published on Invalid Date
구글 아이콘에 hover 속성을 줘서 색상을 바꿔보려고 합니다.
1.구글 아이콘을 검색후 svg 로 다운 받습니다.
2.tailwindcss의 fill속성을 이용해서 색상을 변경합니다.
1.구글 아이콘 svg 얻기
Material Symbols and Icons - Google Fonts
<svg height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
처음 다운정보에는 xmlns정보가 있으나 삭제했습니다.
2. tailwindcss의 fill 속성을 이용해서 색상 변경하기
<svg class="fill-black hover:fill-blue-500 cursor-pointer" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
class="fill-black hover:fill-blue-500" 기본 검정, 마우스 hover일때 원하는 색상을 선택합니다. 현재 blue-500
처음에 stroke 속성인줄 알았으나 fill 이었습니다.