TIL_0612_svg스타일링 하는 법

프론트엔드의 경우 svg, png, jpeg 등 다양한 형식의 이미지, 아이콘들을 사용할 일들이 있다.
특히 내가 그렇다 ㅎㅎ

css는 속이 시원할만큼 잘 될 때도 있고,
말이 안될만큼 움직이지 않을 때도 있다.

이번에 footer의 아이콘들을 바꾸는 간단한 작업이였지만 꽤나 번거로운 작업이였다
그 동안은 아이콘을 사용했었는데 새로 변경되는 아이콘은 평소엔 괜찮은데
선택 시 변경되는 스타일에 모양대로 배경이 들어가는 형태였다.

기존 소스에서 아이콘에 스타일 공통 적용하던 컴포넌트의 의미를 잃지 않으며 작업하기 위해
여러가지 클래스와 형태를 사용해보았지만 아이콘에 따라 달랐다...
코드 지저분해지는 건 좋지않을 것 같은데... 고민....고민..
(어떤건 fill, 어떤건 stroke 형태와 구조에따라 적용되는 기준이 제각각)

결론적으로는 아이콘 자체를 하나의 이미지로 만들어서 적용되도록 세팅했다.

사실 프론트는 방법은 다양하고 많기 때문에 하는 방법은 어렵지 않다
지저분하지않게, 통일감있게, 더 좋은 코드로 간단히 만들기 위한 고민인 것 같다 ㅎㅎ

진행 중 실제로 사용은 별로 안하지만 알게 된 것은
1. svg도 필요하면 path만 복사해서 생성해서 사용할 수 있다.

• 개발쪽에서 사용하는 아이콘 리스트에 디자이너가 준 아이콘이 없었다
  사실 디자이너도 주기때문에 문제는 없지만 개발쪽에 있는 아이콘주소가 사이즈도 그렇고 사용하기 편했다.
  고민고민 하다가 혹시나?하는 마음에 원하는 도형에 다른 아이콘에 rectangle로 보여지는 path만 복사해서 추가 했더니 만들어졌다..! 덕분에 css 시간 단축!

2. svg에도 prop을 뚫어서 사용하는 법이다.

• 아래와 같은 svg주소가 있다고했을 때 fill="current" 이렇게 원하는 속성에 'current'라고 쓰면 해당 svg를 사용하는 곳에서 fill의 값을 설정할 수 있다.

2-1. svg에 current로 prop을 뚫어준다

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="current" d="M12 12q-1.65 0-2.825-1.175T8 8q0-1.65 1.175-2.825T12 4q1.65 0 2.825 1.175T16 8q0 1.65-1.175 2.825T12 12Zm-8 8v-2.8q0-.85.438-1.563T5.6 14.55q1.55-.775 3.15-1.163T12 13q1.65 0 3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20H4Zm2-2h12v-.8q0-.275-.138-.5t-.362-.35q-1.35-.675-2.725-1.012T12 15q-1.4 0-2.775.338T6.5 16.35q-.225.125-.363.35T6 17.2v.8Zm6-8q.825 0 1.413-.588T14 8q0-.825-.588-1.413T12 6q-.825 0-1.413.588T10 8q0 .825.588 1.413T12 10Zm0-2Zm0 10Z"/></svg>

2-2. 실제 사용하는쪽에서 스타일컴포넌트를 생성하여 svg의 원하는 부분에 컬러 반영되도록 설정해주기

(당연히 svg와 아래코드만으로는 안되고 select가 되기 위해 setValue까지 해줘야합니다^^ 그래야 동기적으로 작동함)

const btn = styled(BottomNavigationAction)<BottomNavigationActionProps>(
    ({ selected, theme }) => ({
      fontSize: pxToRem(12),
      color: selected ? theme.palette.primary.main : defaultColor.color,
      fill:selected ? alpha(theme.palette.primary.main, 0.09) : '#fff',
      '& svg ': {
        stroke: selected ? theme.palette.primary.main : defaultColor.color,
        '& g':{
          fill : selected ? alpha(theme.palette.primary.main, 0.09) : '#fff'
        }
      },
      minWidth: '20%',
      maxWidth: '20%',
      padding: '0 !important',
      '& .00보안-label.selected': {
        fontSize: pxToRem(12),
        color: defaultColor.color,
      },
      '& span ': {
        marginTop: '8px',
      },
    }),
  );

알고나면 간단하지만 svg도 prop을 뚫어서 사용할 수 있는지는 이번에 알게되었다 뿌듯!! 보람!! ㅎㅎㅎ

문득.. 어제 급한 야근을 했는데 팀장님은 급하더라도 조급하게 또는 팀원들을 압박하지 않으신다 탓을 하지도 않으신다
해결하기 위해 고민하고 붙잡고 결국 방법을 찾으신다
이런 평정심 잘 배워둬야지 ㅎㅎ