[SVGR] SVG 파일 컴포넌트 사용

 

@svgr/webpack을 활용해 SVG 파일을 컴포넌트로 변환

 

1. @svgr/webpack 설정하기

SVG 파일을 React 컴포넌트로 변환하기 위해 @svgr/webpack 패키지를 사용

1.1. 패키지 설치

npm install @svgr/webpack --save-dev​

 

1.2. next.config.js에서 Webpack 설정

// next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/, // .svg 확장자를 가진 파일을
      use: ["@svgr/webpack"], // svgr로 처리합니다.
    });

    return config;
  },
};

 

2. SVG 파일을 컴포넌트로 사용하기

아이콘이 여러개 일때 

// components/Icon.js
import Star from '@/public/icons/star.svg'
import StarFill from '@/public/icons/star-fill.svg'
import Heart from '@/public/icons/heart.svg'
import HeartFill from '@/public/icons/heart-fill.svg'

const Icons = {
  Star: Star,
  StarFill: StarFill,
  Heart: Heart,
  HeartFill: HeartFill,
};
// Icons 객체의 키로 아이콘 이름으로 사용
type IconsName = keyof typeof Icons;

const Icon = ({
  iconName,
  className
}:{
  iconName: IconsName,
  className?: string
}) => {
  const SelectedIcon = Icons[iconName];
  if (!SelectedIcon) {
	return null; // 아이콘이 없을 경우 null을 반환하여 렌더링하지 않음
  }
  return <SelectedIcon className={className} />;
};

export {Icon};

 

3. Next.js 페이지에서 컴포넌트 사용하기

// pages/index.js
import Icon from '../components/Icon';

export default function Home() {
  return (
    <Icon iconName="Star" className="size-4 text-gray-300" />
	<Icon iconName="StarFill" className="size-4 text-[#FFD217]" />
	<Icon iconName="Heart" className="size-4 text-gray-300" />
	<Icon iconName="HeartFill" className="size-4 text-[#FFD217]" />
  );
}

 

4. SVG 저장

svg 에 있는 width/height 속성은 제거해줘야 벡터로 적용됨

width="24" height="24"

<최종파일 형태>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
  <polyline points="20 6 9 17 4 12"></polyline>
</svg>