[2024-02-05] 팀 프로젝트 회고 - Icon 재사용컴포넌트 만들기

1. Icon 컴포넌트 만들기

나는 아래와 같이 id만 적어서 재사용성 높은 Icon 컴포넌트를 만들려고했다.

svg파일 모음

원래 리액트에서는 그냥 아래처럼 경로 갖고와서 use로 사용하면 됐었다.

 

 

하지만 NextJS는 조금 다르게 해야했다

 

일단 검색하면 svgr 패키지를 설치해라 뭐다 하는데 

이 방법은 내가 원하는 방법이 아니다.

 

1. 폴더 최상위 경로에 public 폴더생성

2. public/assets/icon-sprite.svg 생성

3. 아래와 같이 사용

그럼 내가 원하는 id값을 넣었을 때 원하는 icon을 사용할 수 있게된다.

 

괜히 svgr을 설치해서 해라 이런 것때메 시간이 걸렸다..ㅠㅠ

 

2. svg에서 fill과 stroke 색상을 같게하려면?

svg의 색상이 다크모드일 때를 생각해야돼서 fill값과 stroke값을 상속시켜주고 있었다.

근데 storke로 구성되어있는 svg가 있고

fill로 구성되어있는 svg가 있다.

여기서 stroke와 fill을 모두 사용하는 svg가 있다면 어떻게해야할까?

SVG의 상위 요소에서 stroke 색상을 fill과 동일하게 설정하려면 currentColor 값을 사용할 수 있습니다.
이는 현재 사용 중인 텍스트 색상과 동일한 값을 가집니다.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 
viewBox="0 0 24 24" fill="currentColor" 
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

  <circle cx="12" cy="12" r="10" />
  <line x1="12" y1="8" x2="12" y2="12" />
  <line x1="12" y1="16" x2="12" y2="16" />
</svg>

이런식으로 사용하면 된다.