[유용한 툴][React][SVG] SVG로 된 가벼운 Spinner 소개

# svg-spinner와 react-svg-spinner를 활용한 가벼운 로딩 아이콘 만드는 방법

- 웹 개발을 하다보면, 항상 필요하게 되는 요소 중 하나가 스피너 입니다. UI 프레임워크를 사용하는 경우에는 해당 프레임워크에서 스피너를 제공하기도 하지만, 만족스럽지 않은 경우가 많습니다. 그러다보니 결국 직접 스피너를 만들게 되는 경우가 많습니다. 오늘 포스팅은 이런 경우에 도움이 되는 팁입니다.

# 사용법

- SVG파일로 사용하실 분이라면 아래의 페이지에 접속해서 마음에 드는 스피너를 찾은 후에 다운 받아서 사용하시면 됩니다

GitHub - n3r4zzurr0/svg-spinners: A collection of 24 x 24 dp SVG spinners! (CSS & SMIL)

- 위의 페이지에 접속하시면, 아래와 같이 Preview와 해당 스피너의 용량 정보를 확인하실 수 있습니다. 스피너의 종류는, Ring, Dot, Bar, Block, Pulse 등이 있습니다.

Rings의 Preview 및 파일 용량 정보

 

- 추가로 React에서 사용하실 분들은 svg코드를 이용해서 컴포넌트를 만드셔도 됩니다. 컴포넌트를 만드는 과정이 귀찮으실 경우, 위의 스피너들을 React Component로 랩핑한 라이브러리를 사용하시는 것도 좋을 것 같습니다. react-svg-spinner 설치 방법은 다음과 같습니다

yarn add react-svg-spinners #npm install react-svg-spinners

 

- 그리고 아래와 같이 사용하시면 됩니다.

import { Pulse } from "react-svg-spinners";

export default function App() {
  return <Pulse />;
}

 

- 스피너의 색깔이나 크기 등도 변경하실 수 있습니다.

 

---