Next.js에 커스텀 SVG 아이콘 추가하기

목차

1. 아이콘 추가하기 1.1 SVG 아이콘 다운로드하기 1.2 아이콘 폴더 생성하기 1.3 인덱스 파일 작성하기
2. Next.js 설정 변경 2.1 Next.js 환경 설정 파일 열기 2.2 커스텀 웹팩 설정 추가하기
3. 아이콘 렌더링 3.1 아이콘 컴포넌트에 렌더링하기 3.2 아이콘 크기 조절하기
4. 아이콘 스타일링 4.1 Tailwind CSS 사용하기 4.2 일반 CSS 스타일링 적용하기
5. 커스텀 SVG 아이콘 사용하기 5.1 렌더링하기 5.2 아이콘 커스터마이징하기

아이콘 추가하기

아이콘을 Next.js 프로젝트에 추가하는 것은 직관적이지 않을 수 있습니다. 하지만 이제 구체적인 방법을 알려드릴게요. 아이콘을 추가하는 과정은 두 가지 단계로 이루어집니다. 세부 내용은 아래에서 자세히 알아보세요.

1.1 SVG 아이콘 다운로드하기

먼저 원하는 아이콘을 다운로드해야 합니다. 아이콘 웹사이트를 방문하여 원하는 아이콘을 고른 후 SVG 파일로 다운로드합니다. 이 과정은 매우 간단하니 어렵지 않을 거예요.

1.2 아이콘 폴더 생성하기

다운로드한 SVG 아이콘을 저장할 폴더를 생성하세요. components 폴더 안에 svgs 폴더를 생성한 후 아이콘을 해당 폴더 안에 넣어둡니다. 여기서 원하는 아이콘을 react 컴포넌트와 유사한 이름으로 변경하는 것이 좋습니다.

1.3 인덱스 파일 작성하기

svgs 폴더 안에 index.ts 파일을 생성하고 해당 파일에 모든 SVG 아이콘을 내보내세요. 예를 들어, 만약 아이콘 파일 이름이 web-development.svg라면 export { default as WebDevelopment } from './web-development.svg'; 와 같이 작성합니다. 이렇게 하면 해당 아이콘을 렌더링할 때 사용할 수 있게 됩니다.

Next.js 설정 변경

Next.js 프로젝트의 설정 파일을 변경해야 합니다. 이 과정을 통해 커스텀 웹팩 설정을 추가할 수 있습니다.

2.1 Next.js 환경 설정 파일 열기

Next.js 프로젝트의 환경 설정 파일을 열어야 합니다. 파일의 위치는 프로젝트에 따라 다를 수 있지만, 대개 next.config.js라는 이름으로 생성되어 있습니다.

2.2 커스텀 웹팩 설정 추가하기

이제 Next.js 환경 설정 파일에 커스텀 웹팩 설정을 추가해야 합니다. 다음과 같은 코드 스니펫을 사용하면 됩니다.

const withSvgr = require('next-svgr');

module.exports = withSvgr({
  // 추가적인 커스텀 웹팩 설정 작성
});

또한 next-svgr 패키지를 설치해야 합니다. 터미널에서 npm install @svgr/webpack 명령어를 사용하여 패키지를 설치하세요.

아이콘 렌더링

이제 우리는 프론트엔드에서 생성한 아이콘을 렌더링할 수 있게 되었습니다. 아래의 단계를 따라 해보세요.

3.1 아이콘 컴포넌트에 렌더링하기

렌더링하고자 하는 아이콘을 해당 컴포넌트에 추가하세요. 예를 들어, WebDevelopment 아이콘을 렌더링하고 싶다면 다음과 같이 작성합니다.

import { WebDevelopment } from './components/svgs';

const MyComponent = () => {
  return <WebDevelopment />;
};

export default MyComponent;

3.2 아이콘 크기 조절하기

원하는 아이콘 크기로 조절할 수 있습니다. Tailwind CSS를 사용한다면, class 속성을 이용하여 아이콘의 크기를 조절할 수 있습니다. 예를 들어, text-8xl 클래스를 추가하면 아이콘의 크기가 매우 커집니다. 단순한 CSS 스타일링을 사용하는 경우에도 style 속성을 이용하여 크기를 조절할 수 있습니다. 예를 들어, font-size: 100px를 적용하면 아이콘이 커집니다.

아이콘 스타일링

아이콘을 원하는 스타일로 꾸밀 수 있습니다. Tailwind CSS를 사용한다면, 간단한 클래스를 추가하여 스타일을 적용할 수 있습니다. 예를 들어, text-red 클래스를 추가하면 아이콘의 아웃라인 색을 빨강으로 변경할 수 있습니다. 일반 CSS 스타일을 적용하려면 style 속성을 이용해 스타일을 설정하세요.

커스텀 SVG 아이콘 사용하기

스타일링한 커스텀 SVG 아이콘을 사용할 수 있습니다. 아래 단계를 따라 해보세요.

5.1 렌더링하기

먼저 렌더링하고자 하는 아이콘을 해당 컴포넌트에 추가하세요. 이전과 같은 방식으로 작성하면 됩니다. 예를 들어, MobileDevelopment 아이콘을 렌더링하려면 다음과 같이 작성합니다.

import { MobileDevelopment } from './components/svgs';

const MyComponent = () => {
  return <MobileDevelopment />;
};

export default MyComponent;

5.2 아이콘 커스터마이징하기

원하는 스타일과 클래스를 적용하여 아이콘을 커스터마이징할 수 있습니다. 예를 들어, 아이콘의 색상을 text-green-500 클래스로 변경하고 크기를 text-2xl로 조절하려면 다음과 같이 작성합니다.

import { MobileDevelopment } from './components/svgs';

const MyComponent = () => {
  return <MobileDevelopment className="text-2xl text-green-500" />;
};

export default MyComponent;

스타일링할 때 주의할 점은 아이콘의 SVG 파일에 있는 fill 속성과 충돌하는 스타일이 있는지 확인하는 것입니다. 해당 fill 속성을 제거하고 원하는 스타일을 적용하면 원하는 대로 아이콘을 커스터마이징할 수 있습니다.

프로젝트에 도움이 되는 자료들:

• Next.js 공식 문서
• Tailwind CSS 공식 문서
• Next SVG Loader npm 패키지