[React] 아이콘 사용시 라이브러리에서 SVG를 사용하게된 이유

아이콘을 사용할 때 React-icons를 주로 사용했다.

웬만한 아이콘들이 전부 다 있고 라이브러리를 다운받아서 import하기만 하면 쉽게 사용할 수 있기 때문이다.

 

이번에 사이드 프로젝트를 진행하면서 난관을 겪었다.

투두리스트 인풋 안에 버튼을 만들어 아이콘을 넣었고 relative, absolute하고 right를 0으로 했지만 오른쪽에 미세한 공간이 남았다.

끝 라인을 맞추고 싶었는데 margin-right, padding-right등으로 하드코딩이 가능하겠지만,

이유를 찾고 효율적인 방법을 찾고 싶었다.

개발자 도구로 확인해보니 이유를 어렵지 않게 찾을 수 있었다.

svg크기와 path크기가 있는데 svg크기가 path크기 보다 더 크기 때문에 공간이 남았던 것이다.

라이브러리에서 svg, path크기를 직접적으로 조정하는건 나오지 않았고, 단순히 아이콘의 크기 조정만 가능한것 같다.

그래서 나는 라이브러리 사용을 중단하고 svg를 사용하기로 했다.

 

 

✔️ SVG 사용 방법

svg는 Heroicons을 이용했다.

라이브러리를 사용하지 않아 용량도 줄일 수 있는 장점도 있다.

 

원하는 아이콘을 검색 후 SVG로 복사를 한다.

파일명.svg를 만들고 그 안에 복사하면 끝이다.

 

// Plus.svg
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" >
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>

 

나는 Plus.svg로 만들었다.

 

vite와 typescript를 사용하는 경우 플러그인을 설치 후 설정을 해줘야 한다.

설치를 안하면 사용할 수 없다.

yarn add -D vite-plugin-svgr

 

 

vite.config.ts에 들어가서 플러그인을 import한다.

import svgr from "vite-plugin-svgr";

 

 

플러그인 안에 리액트 옆에 svgr()을 추가한다.

export default defineConfig({
  plugins: [react(), svgr()],
});

 

 

tsconfig.json 파일에 가서 types 부분을 추가해준다.

"compilerOptions": 
{
    ...
    "types": ["vite-plugin-svgr/client"] // 추가
	...
},

 

 

메인 루트 파일 안에 svg.d.ts 파일을 만들고 파일 안에 아래 내용을 넣어준다.

declare module '*.svg' {
  const content: React.FC<React.SVGProps<SVGElement>>;
  export default content;
}

 

 

아이콘을 사용할 곳으로 가서 import하면 컴포넌트처럼 사용이 가능하다.

나는 절대 경로로 사용하고 있어서 앞에 @로 시작한다.

그리고 파일명.확장자명 뒤에 ?react를 꼭 작성해야한다.

import Plus from '@/assets/Plus.svg?react';

 

 

여기서 나는 width(가로길이), height(세로길이), viewBox(보이는 영역), fill(색상)을 변경해주었다.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 17 24" stroke="#ffffff">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>

 

input의 끝에 맞출 수 있게 되었다.

 

처음에 설치하고 세팅하는 부분이 복잡아긴 하지만 한번 설정을 해놓으면 간편하게 사용이 가능할것 같고, 스타일을 각각의 svg앞에 넣을 수 있어 찾고 변경하기에도 편리하고 코드도 깔끔해져서 앞으로 svg를 자주 이용할 생각이다.