[discussion] svg 파일 사용법

[L2HYUNN]

이슈 내용

컴포넌트 제작중, svg 파일을 다루는 방법이 필요하다고 생각해 아래의 PR에서 svg component를 만들었습니다.

• ✨ feature: add GNB component #43

size, color, tailwind를 위한 className 등의 prop을 이용해 간단하게 svg를 커스텀하고 재사용할 수 있게 만든 것 까지는 좋았으나,

children으로 svg path를 받아야한다는 단점이 존재했습니다. ( 직접 저희가 path를 넣어주어야 했습니다. )

이러한 단점을 해결하기 위해서 svg-path라는 간단한 모듈을 만들어봤는데요

svg 파일에서 <path /> 부분만 추출하는 모듈입니다.

미완성이라 부족한 부분이 많지만 잘 제작한다고 하더라도 다음과 같은 문제가 남아있는거 같아 discussion을 작성하게 되었습니다.

• svg-path

var cheerio = require('cheerio');
var fs = require('fs');

function extract(contents) {
  var $ = cheerio.load(contents);

  var tag = '';
  $('path').each(function () {
    var d = $(this).attr('d');
    tag += '<path d="' + d + '" /> \n';
  });

  return tag;
}

module.exports = function (dir, path) {
  var file = dir + path;
  var contents = fs.readFileSync(file, 'utf8');
  return extract(contents);
};

• 적용 예제

import type { GetStaticProps } from 'next';
import Svg from 'src/components/common/Svg';
import extract from 'svg-path';

const Experiment = ({ path }: any) => {
  return (
    <>
      <Svg viewBox={22} size={22} color="#AFAFAF">
        {path}
      </Svg>
    </>
  );
};

export const getStaticProps: GetStaticProps = () => {
  const path = extract('svg폴더 path', '/vercel.svg');
  return { props: { path } };
};

export default Experiment;

문제는 path추출을 위해 fs module을 사용하게되는데 이 모듈이 node기반이라 client 환경에서 실행될 수 없다는 것입니다.
따라서 이 문제를 해결하기 위해서는 항상 getStaticProps을 사용해주어야 합니다.

다음과 같이 결과를 받을 수 있지만 string을 html component로 변경해주거나 속성만 받아 path를 생성하는 방식등의 변경이 필요할 것 같아 보입니다.

• 결과
  

결론

module을 충분히 제작할 수 있어보이지만 getStaticProps를 사용해야한다는 점에서 문제가 있어보입니다.

따라서 기존의 svg component를 사용하거나 아래와 같은 library를 사용하는 게 좋아보입니다!

https://react-svgr.com/

react-svgr을 사용하면 svg파일을 간단하게 react component로 변경할 수 있습니다.

참고

• extract-svg-path
• Module Not Found
• File System, Path
• Next.js getStaticProps 사용기

[hwangyena]

저는 개인적으로 svgr을 사용하거나, 컴포넌트에서 필요한 props만 받아서 사용하는 방식을 주로 사용합니다.

const CheckSvg = ({ color }: { color: 'gray' | 'black' | 'white' }) => {
  return (
    <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M1.16675 5.00098L5.05564 8.88987L12.8334 1.11209"
        stroke={color === 'gray' ? '#CBCBCB' : color === 'white' ? '#ffffff' : '#474747'}
        strokeWidth="1.6"
        strokeLinejoin="round"
      />
    </svg>
  );
};

svgr 이나 컴포넌트를 만들어 사용하는 방법 중, 편한 방법으로 사용하면 될 것 같습니다~!!

[L2HYUNN]

@hwangyena 둘 다 좋은거 같습니다!!

수요일날 잠깐 이야기 나눠서 정하면 좋을 거 같아요 :)

[L2HYUNN]

svgr의 경우 next와 관련 설정이 어려울 수 있다고 판단하여 기존에 제가 만들어 놓은 Svg 컴포넌트를 일단 사용하는 거로 결정했습니다.

• ✨ feature: add GNB component #43