React, NextJs에 SVG 사용하기

개요

프로젝트를 진행하면서 아이콘을 사용하는 부분이 꽤 있다. 근데 보통 아이콘은 svg로 사용하지만 왜 svg로 사용할까? 이참에 svg에 대해 알아보고, 어떻게 적용하는지에 대해 알아보려고 한다. 

 

SVG란?

SVG(Scalable Vector Graphics)는 웹 친화적인 벡터 파일 포맷이다. JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장한다. 해상도, 세부 정보, 품질에 아무런 영향을 주지 않으면서 더 작은 파일 크기로 압축하는 무손실압축 방식을 사용한다. 텍스트로 작성되기 때문에 스크린 리더와 검색 엔진이  해당 텍스트를 분석하므로 접근성과 SEO 측면에서 좋다.

 

SVG 사용하기

1. svg 아이콘 사이트

 

먼저 아이콘을 구할 사이트를 찾아야 한다. 가장 먼저 생각 떠오른 사이트는 당연 폰트어썸이다. 그래도 더 찾아보자 하면서 둘러본 결과 React SVG Incons 라는 사이트가 생각보다 잘 되어있다는 생각이 들어서 두번째 사이트를 사용했다.

 

font awesome

Font Awesome

 

React SVG Icons

React SVG Icons

 

2. svg 파일 다운로드 하기

 

React SVG Icons 사이트는 파일을 다운로드 하는 방식이 아닌 copy해서 사용하는 방식이다. 리액트에 맞는 컴포넌트를 제공하고, Typescript 코드와, React Native 코드 또한 제공해 준다. 나는 svg 코드만 따로 복사해서 사용했다.

 

src/assets/Star.svg

 <svg
      viewBox="0 0 1024 1024"
      fill="currentColor"
      height="1.5em"
      width="1.5em"
    >
      <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z" />
    </svg>

 

3. svgr을 통해 React Component로 사용하기

 

svgr 라이브러리를 사용하면 svg 파일을 컴포넌트 처럼 import 하여 사용할 수 있다.

yarn add @svgr/webpack -D

 

next.config.mjs

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
     ..//
  },
};

export default nextConfig;

 

app.tsx

import Star from "@/assets/Star.svg";

const App = () => {

  return (
  	<div>
      	   <Star/>
        </div>
  );
};

export default App;

 

4. 아이콘 속성값 커스텀하기

 

기본적으로 제공하는 아이콘의 색상이나 가로,세로 값을 변경하여 사용해야 될 때가 있다. 아니 많다. 그러면 어떻게 변경하여 사용하는가? 정말 간단하다. 아래의 코드를 확인해 보자.

 <svg
      viewBox="0 0 1024 1024"
      fill="currentColor"
      height="1.5em"
      width="1.5em"
    >
      <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z" />
    </svg>

 

svg에는 기본적인 속성 값이 있는데 위의 파일은 공통으로 사용되는 부분이고, 재사용 가능한 파일이기 때문에 한개의 속성을 변경한다고 해서 위의 값을 변경할 순 없다. 그렇기 때문에 import 해서 사용하는 아이콘의 속성값을 커스텀 해줘야 한다. 아래의 예제를 확인하는 것이 빠르겠다.

import Star from "@/assets/Star.svg";

const App = () => {

  return (
  	<div>
      	   <Star fill="#000000" width="50px" height="50px" />
        </div>
  );
};

export default App;