TIL 2022-08-30 Svelte SVG styling Best Practice?

SVG를 붙이는 작업을 하고 있었는데, SVG안에 CSS를 적용할 일이 생겼다. (사실 적용 안할 일이 적을거 같지만...)

 

 

기존에 나는 SVG를 .svelte 파일로 선언해 컴포넌트처럼 사용하고 있었다.

 

따라서 해당 SVG svelte 파일에

 

<svg
  class={$$props.class}
  width="15"
  height="15"
  viewBox="0 0 15 15"
  fill="none"
>
~~~
</svg>

이렇게 class를 인자로 받을수 있도록 설정해준 뒤

<div>
  <SomeSvg class="abcd"/>
</div>

<style>
   .abcd{
     ~~~~
    }
</style>

이런 구조를 통해서 스타일링을 적용하려고 했는데 불가능했음!

 

정확히는 class는 적용되지만 그에 맞는 CSS는 적용되지 않는 상태

 

이는 Svelte 에서는 자식 컴포넌트에 CSS를 보내주지 않기 떄문에 일어남.

 

왜 안보내주는가?

자식 컴포넌트가 하나의 루트 요소로 둘러쌓여있을 필요가 없기 떄문임.

그래서 자식 컴포넌트로 보내는 CSS는 unused가 떠서 제거됨.

 

그러면 어떻게 해야하는가?

 

위의 구조로 할 수 있는 유일한 방법은 :global 스코프로 HTML에 직접 css를 때려박는 수밖에 없음....

 

근데 이게 자식 컴포넌트에 style 내려줄때마다 global 선언해버리면,

지금이야 미니미니마이니모 토이프로젝트지만 어느정도 규모의 프로젝트에서는 분명 겹쳐서 문제 생기거나 의도치 않은 스타일링 나오는 경우 분명 있을텐데, 참 말이 안되는거 같음....

 

아니면 미리 자식 컴포넌트에 class에 따른 CSS를 설정하고 class만 내려주는 식이나, 변수로 받아서 이에 대한걸 동적으로 처리하는 방법등이 있는거 같은데, 이것도 제약이 너무 심함....

 

모든 style에 대해 일일히 다 하는것도 귀찮고 한두개 스타일링을 위해 별도로 변수를 파거나 하는것조차도 매우매우 별로임.

 

일단 첫 Svelte 프로젝트라 기존에 익숙하게 사용하던 scss만 사용했었는데, 이 참에 tailwind css나 이런 류로 갈아타야될까 싶음.

 

얘는 class 이름만 보내줘도 빌드되면서 css가 나오는거라 자식으로 'h-6 w-6' 이런거 내려주면 정상적으로 잘 작동할듯.