TIL 20211125 [항해99 71일차]

svg 파일 이미지 호버 적용

svg파일에서 fill을 사용하면 내부의 색상(배경색)이 설정되고, stroke를 사용하면 개체 주위에 그려진 선의 색상이 설정

// AddRound.svg 파일
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
//fill을 current로 변경 (배경색을 지정한 값으로 변경 할 수 있음)
<circle cx="32" cy="32" r="24" fill="current"/>
<path d="M32 21.333L32 42.6663" stroke="#F5F3F8" stroke-width="1.2" stroke-linecap="round"/>
<path d="M42.6667 32L21.3333 32" stroke="#F5F3F8" stroke-width="1.2" stroke-linecap="round"/>
</svg>

// svg 호버가 적용되야할 컴포넌트
import { ReactComponent as AddRound } from '../svgs/AddRound.svg';

...생략...

<Div
   onClick={() => {
     setClick(true);
     setDisplay({ display: 'none' });
   }}
 >
   <StyledAddRound className="addRound" />
 </Div>
 
 ...생략...
 
const StyledAddRound = styled(AddRound)`
  width: 64px;
  height: 64px;
  fill: ${ColorStyle.PrimaryPurple};
  &:hover {
    fill: ${ColorStyle.HoverPurple};
    transition: 0.3s;
  }
`;

svg 이미지 파일에서 선이 아닌 배경색만 변경하면 되기때문에 hover 했을 경우 fill의 색상을 변경해주면 된다.