React - SVG 아이콘 컬러지정 (With Styled-component)

평소의 사용방법

프로젝트에서 아이콘을 사용할 때 SVG이용을 많이합니다. 기본 사이즈의 png 나 jpg를 이용하면
이미지가 깨질 수 있어 svg 이용을 많이 이용하게 됐어요
하지만 메인 페이지의 배너 같이 1920사이즈 같은 경우는 svg로는 용량이 무겁기 때문에
png파일 크기를 x3을 이용하고 타이니png 통해 파일용량을 줄이고 사용합니다

 

• 아이콘은 svg
• 큰 이미지는 png x3 → 타이니 png 용량 줄이고 사용

 

해결하고 싶은 부분 발견

저는 아이콘의 색상이 다를 때마다 svg를 새로 다운을 받으면서 사용했습니다.

이번에 Tooltip 컴포넌트를 만들었을 때 화살표 부분 때문에 화살표 부분을 고민했어요

네모칸은 Div, 하단의 화살표는 svg

 

• 컬러를 props로 넘겨줄 때 svg 컬러도 같이 바뀌었으면
• 툴팁의 컬러를 바꿀 때마다 svg를 바꾸고 싶지 않다

 

해결방법

SVG를 import 할 때 ReactComponent 컴포넌트로 불러옵니다.
Styled-componet로 작업할 시 path → fill 속성을 사용하면 컬러를 수정할 수 있습니다.

import { ReactComponent as TooltipIcon } from "@/src/assets/icons/icon-tooltip.svg";

import colorSet, { ColorType } from "@/src/styles/color";
import React, { HTMLAttributes, ReactNode, forwardRef } from "react";
import styled from "styled-components";
import { ReactComponent as TooltipIcon } from "@/src/assets/icons/icon-tooltip.svg";

interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
  text: ReactNode;
  tooltipColor: ColorType;
}

const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
  ({ text, tooltipColor, ...props }, ref) => {
    return (
      <TooltipContainer ref={ref} tooltipColor={tooltipColor} {...props}> <-- {...props}
        {text}
        <StyledTooltipIcon tooltipColor={tooltipColor} />
      </TooltipContainer>
    );
  }
);

export default Tooltip;

const TooltipContainer = styled.div<{ tooltipColor: ColorType }>`
  position: relative;
  text-align: center;
  width: max-content;
  padding: 4px 10px;
  background: ${({ tooltipColor }) => colorSet[tooltipColor]};
  border-radius: 4px;
`;

const StyledTooltipIcon = styled(TooltipIcon)<{ tooltipColor: ColorType }>`
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  bottom: -8px;

  path {
    fill: ${({ tooltipColor }) => colorSet[tooltipColor]};
  }
`;

icon-tooltip.svg 은 초록색 화살표 svg 지만 fill 속성을 이용해서 직접 컬러를 수정 할 수 있습니다.

{... props}를 해주는 경우는 밖에서 styled-component로 확장해서 사용할 때 스타일을 같이 사용하기 위해서입니다.

 

실제 사용 시

import Tooltip from "@/src/components/atom/Tooltip";
.
.
.
<StyledTooltip
  text={
    <Typo color="white" typoType="b10m">
      40%
    </Typo>
  }
 tooltipColor="red1"
 isInnerWindow={isInnerWindow} <-- 프로젝트 내에서 인터셉션 옵저버를 이용한 코드 현재 svg컬러와는 무관합니다.
/>

<StyledTooltip
  text={
    <Typo color="white" typoType="b10m">
      40%
    </Typo>
  }
 tooltipColor="gray1"
 isInnerWindow={isInnerWindow} <-- 프로젝트 내에서 인터셉션 옵저버를 이용한 코드 현재 svg컬러와는 무관합니다.
/>

<StyledTooltip
  text={
    <Typo color="white" typoType="b10m">
      40%
    </Typo>
  }
 tooltipColor="blue1"
 isInnerWindow={isInnerWindow} <-- 프로젝트 내에서 인터셉션 옵저버를 이용한 코드 현재 svg컬러와는 무관합니다.
/>

 

참고 블로그 : React에서 svg 활용