스벨트에서 구글 머티리얼 아이콘(SVG) 사용 방법

1-1. 스벨트 새 프로젝트를 생성합니다. 

https://blog37.tistory.com/entry/%EC%8A%A4%EB%B2%A8%ED%8A%B8-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95-%EB%B0%A9%EB%B2%95

스벨트 개발 환경 구축 방법

 

1-2. 스벨트 project 폴더 주소창에서 cmd를 입력 후 Enter키를 눌러 윈도우 '명령 프롬프트'를 실행합니다.

 

2. 실행된 윈도우 '명령 프롬프트'에서 아래의 명령어를 실행시켜 svelte-google-materialdesign-icons를 설치합니다.

npm i -D svelte-google-materialdesign-icons

 

3. App.svelte 파일에서 아래의 코드를 작성하면 svelte-google-materialdesign-icons이 적용되는 것을 확인할 수 있습니다.

<script>
    import { 
      Wb_sunny, 
      Dark_mode, 
      Star
    } from 'svelte-google-materialdesign-icons';
</script>

<Wb_sunny/>
<Dark_mode/>
<Star size="24" color="#ffd43b" variation="filled"/>
<Star size="24" color="#ffd43b" variation="outlined"/>
<Star size="24" color="#ffd43b" variation="round"/>
<Star size="24" color="#ffd43b" variation="sharp"/>
<Star size="24" color="#ffd43b" variation="two-tone"/>

---

※ svelte-google-materialdesign-icons에 관한 더 자세한 내용은 아래 링크를 참조하시면 됩니다.

• https://svelte-google-materialdesign-icons.codewithshin.com/

• https://svelte-google-materialdesign-icons.codewithshin.com/round

 

Svelte Google Materialdesign Icons

 

※ 그 외에 다른 스벨트 아이콘 관련 링크

https://svelte-svg-icons.codewithshin.com/

Svelte SVG Icon Sets