Sveltekit에서 tailwindcss와 SVG를 사용할때, 마우스 오버로 색상 쉽게! 바꾸기

sveltekit의 경우 svg 처리가 좀 ....

깔끔하게 처리가 안된다 생각했는데

이번에 그나마 편한 방법을 찾게되어 글을 쓴다

 

기존에 하던 작업은 조금 번거로웠고

이번에 들.... 번거로운 방법을 소개할까한다.

 

static-adapter로 구동되는 경우는 

https://github.com/poppa/sveltekit-svg

이 패키지를 사용하면 되고,

 

 

ssr를 사용하는 adapter의 경우는..... 

제가 설명드리는 방법이 그나마 편했습니다.

 

 

svg 예제 이미지

 

svg 예제 코드 내부

<svg width="44" height="44" viewBox="0 0 44 44" fill="none"   xmlns="http://www.w3.org/2000/svg">
    <path d="M22.5926 16.2588C21.4844 16.2588 16.2696 17.0899 16.0903 22.5818C18.8933 21.9299 21.077 19.6973 21.6311 16.8618C22.4948 18.7358 24.8252 21.4247 28.8503 21.0988C28.117 18.3121 25.6074 16.2588 22.5926 16.2588Z" fill="white"/>
    <path d="M18.5185 25.2218C19.1935 25.2218 19.7407 24.6746 19.7407 23.9996C19.7407 23.3246 19.1935 22.7773 18.5185 22.7773C17.8435 22.7773 17.2963 23.3246 17.2963 23.9996C17.2963 24.6746 17.8435 25.2218 18.5185 25.2218Z" fill="white"/>
    <path d="M26.6666 25.2218C27.3416 25.2218 27.8888 24.6746 27.8888 23.9996C27.8888 23.3246 27.3416 22.7773 26.6666 22.7773C25.9915 22.7773 25.4443 23.3246 25.4443 23.9996C25.4443 24.6746 25.9915 25.2218 26.6666 25.2218Z" fill="white"/>
    <path d="M32.3704 22.7778C32.3704 17.3837 27.9867 13 22.5926 13C17.1985 13 12.8148 17.3837 12.8148 22.7778C11.9185 22.7778 11.1852 23.5111 11.1852 24.4074V27.6667C11.1852 28.563 11.9185 29.2963 12.8148 29.2963H14.4444V22.7778C14.4444 18.28 18.0948 14.6296 22.5926 14.6296C27.0904 14.6296 30.7408 18.28 30.7408 22.7778V30.9259H20.963V32.5556H30.7408C31.637 32.5556 32.3704 31.8222 32.3704 30.9259V29.2963C33.2667 29.2963 34 28.563 34 27.6667V24.4074C34 23.5111 33.2667 22.7778 32.3704 22.7778Z" fill="white"/>
</svg>

 

티스토리에서 svg파일을 첨부하면 이미지로 변경되서, 파일 제공이 안되니.. 텍스트를 복사해다가 써보세요

 

 

 

 

사전 지식

SVG의 진한 벡터 선들은 <path>로 되어 있습니다.

그래서 그 선들을 tailwindcss로 색칠하려면 fill이란곳에 색상을 써줘야합니다.

 

 

 

 

기존에 하던 방식

1. svg 확장자를 svelte로 바꾼다

2. svg파일 내부에 script를 작성한다

3. 다양한 옵션을 위해서 export let 을 수도없이 쓴다.....

4. svg파일 내부에 있는 svg태그를 수정한다.

5. svg 를 추가하고 싶은곳에서 import 

6. svg에 각종 변수 건내주기

7. svg를 다른 div로 감싸서 tailwindcss 적용하기

8. hover 처리하기

 

 

 

 

변경된 방식

1. svg 확장자를 svelte로 바꾼다

2. svg파일 내부에 script를 작성한다

3. 다양한 옵션을 위해서 export let 을 수도없이 쓴다.....

4. svg파일 내부에 있는 svg태그를 수정한다.

5. svg 를 추가하고 싶은곳에서 import 

6. svg에 각종 변수 건내주기

7. svg를 다른 div로 감싸서 tailwindcss 적용하기

8. hover 처리하기

 

 

 

비교해보니 8가지 과정이 4가지로 변경되었다.

 

 

 

자세한 방법은 다음과 같다!

 

 

 

 

우선 

tailwind.config.js 파일 수정이 필요하다.

export default {
  .........
  variants: {
    fill: ['hover', 'focus'], //SVG hover:fill-somecolors 적용하기 위한 코드. 
    .............
  },
  .......
}

variants > fill > hover 을 추가해준다.

 

 

 

 

2. svg 파일 수정

<svg width="44" height="44" viewBox="0 0 44 44" class={$$props.class} xmlns="http://www.w3.org/2000/svg">
    <path d="M22.5926 16.2588C21.4844 16.2588 16.2696 17.0899 16.0903 22.5818C18.8933 21.9299 21.077 19.6973 21.6311 16.8618C22.4948 18.7358 24.8252 21.4247 28.8503 21.0988C28.117 18.3121 25.6074 16.2588 22.5926 16.2588Z" />
    <path d="M18.5185 25.2218C19.1935 25.2218 19.7407 24.6746 19.7407 23.9996C19.7407 23.3246 19.1935 22.7773 18.5185 22.7773C17.8435 22.7773 17.2963 23.3246 17.2963 23.9996C17.2963 24.6746 17.8435 25.2218 18.5185 25.2218Z"/>
    <path d="M26.6666 25.2218C27.3416 25.2218 27.8888 24.6746 27.8888 23.9996C27.8888 23.3246 27.3416 22.7773 26.6666 22.7773C25.9915 22.7773 25.4443 23.3246 25.4443 23.9996C25.4443 24.6746 25.9915 25.2218 26.6666 25.2218Z" />
    <path d="M32.3704 22.7778C32.3704 17.3837 27.9867 13 22.5926 13C17.1985 13 12.8148 17.3837 12.8148 22.7778C11.9185 22.7778 11.1852 23.5111 11.1852 24.4074V27.6667C11.1852 28.563 11.9185 29.2963 12.8148 29.2963H14.4444V22.7778C14.4444 18.28 18.0948 14.6296 22.5926 14.6296C27.0904 14.6296 30.7408 18.28 30.7408 22.7778V30.9259H20.963V32.5556H30.7408C31.637 32.5556 32.3704 31.8222 32.3704 30.9259V29.2963C33.2667 29.2963 34 28.563 34 27.6667V24.4074C34 23.5111 33.2667 22.7778 32.3704 22.7778Z" />
</svg>

 

마우스 hover시에 변경되고 싶은 곳의 

svg태그나 path태그에 있는 fill을 모두 삭제해준다.

 

그리고 svg 최 상단에 있는 class 부분을 props를 이용해서 class를 건네준다. class={$$props.class}

 

svg 파일 확장자를 svelte로 변경합니다.

그러면 svg파일을 컴포넌트처럼 사용이 가능합니다.

test_file.svg => test_file.svelte

 

 

3. import 

    import TestSvg from '$lib/test_file.svelte';

 

 

4. 사용시 

<TestSvg class="fill-red-600 hover:fill-green-800"/>

 

 

적용된 모습.

 

 

 

 

 

 

더 쉬운 방법은 다음 기회에!