라이브러리를 사용하지 않고 SVG를 Next.js의 구성 요소로 가져오는 방법

공식 문서에 따르면 Next.js은 빠른 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 유연한 React 프레임워크입니다. 이에 대한 한 가지 이유는 정적 생성 및 서버 측 렌더링 기능 때문입니다.

그러나 이것은 원래 React Framework를 기반으로 하며 React 구성 요소를 사용한다는 것을 의미합니다.

이제 SVG는 Scalable Vector Graphics을 나타내며 XML을 기반으로 하는 벡터 그래픽 이미지 형식입니다. 이러한 이미지는 벡터 그래픽 형식으로 정의되며 XML 텍스트 파일에 저장됩니다. 따라서 고해상도로 가볍고 무한대로 확장 가능합니다. 또한 모든 텍스트 편집기에서 CSS 속성을 사용하여 편집, 스타일 지정 및 애니메이션을 적용할 수 있습니다. 이것이 소프트웨어 개발자와 설계자 모두가 선호하는 주요 이유 중 일부입니다.

다음을 포함하여 라이브러리 없이 Next.js에서 SVG를 사용하는 몇 가지 방법이 있습니다.

next/image의 이미지 구성요소를 사용하여 게재statically합니다.

이미지 구성 요소도 사용하여 이미지로 가져옵니다.

React 구성 요소로 수동 변환

SVG를 정적으로 제공하려면 루트 디렉토리의 "public"폴더에 SVG를 저장해야 합니다. 그런 다음 "/filename.ext"를 통해 응용 프로그램의 모든 구성 요소에서 참조할 수 있습니다. 예를 들어:

import Image from 'next/image'

function Profile(): JSX.Element {
  return <Image src="/my-icon.svg" alt="my profile" width="64" height="64" />
}

export default Profile

일반적인 이미지 파일처럼 가져오면 여기에서 임의의 폴더에 SVG를 저장하고 이미지를 가져오는 것처럼 가져올 수 있습니다. 그러나 이것은 'public' 디렉토리에 저장되지 않았기 때문에 Next.js에 의해 정적으로 제공되지 않습니다.

import githubIcon from "../assets/icons/github.svg";

const Socials: () => JSX.Element = () => {
  return <Image src={githubIcon} width={16} height={16} alt="github" />
}

export default Socials;

이 처음 두 가지 방법의 단점은 SVG를 이미지로 가져올 때 사용 가능한 스타일 옵션에 제한이 있다는 것입니다. 이미지 색상을 변경할 수 없습니다.

SVG를 수동으로 React 구성 요소로 변환하고 높이, 너비, 색상 및 기타 CSS 속성을 정의하는 소품을 전달할 수 있습니다.

import React from "react";

const ArrowOut: React.FunctionComponent<React.SVGProps<SVGSVGElement>> = ({
  height,
  width,
  className,
}) => (
  <svg
    height={height}
    width={width}
    viewBox="0 0 7 8"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path
      d="M1 7L6 1M6 1H2.08696M6 1V5.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

export default ArrowOut;

'height', 'width', 'className'은 모두 React.SVGProps의 확장 인터페이스인 SVG Attributes에서 사용할 수 있는 속성입니다. 이러한 소품은 부모 구성 요소에서 전달되어 SVG 스타일을 지정할 수 있습니다.

상위 구성요소를 살펴보겠습니다.

import Image from "next/image";
import styled from "styled-components";

import ArrowOut from "./svgs/ArrowOut";

const Socials: () => JSX.Element = () => {
  return (
    <Wrapper>
      <a
        href="https://github.com"
        target="_blank"
        rel="noopener noreferrer"
        className="social"
      >
        <Image src="/github.svg" width={16} height={16} alt="github Icon" />
        <p>GitHub</p>
        <ArrowOut width={"10"} height={"10"} className="nav-svg" />
      </a>
    </Wrapper>
  );
};

const Wrapper = styled.div`
  .social {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin: 2rem 0;

    p {
      margin: 0 1rem;
      min-width: 45px;
    }

    .nav-svg {
      stroke: #fff;
    }
  }

  .social:hover,
  .social:focus,
  .social:active {
    color: #0070f3;
    .nav-svg {
      stroke: #0070f3;
    }
  }
`;

export default Socials;

결과:



여기에서는 매우 다른 방식으로 두 개의 서로 다른 SVG 아이콘을 가져왔습니다. 하나는 너무 스타일이 지정되지 않은 이미지이고 다른 하나는 사용자의 마우스 상호 작용에 따라 변경되는 획 색상이 있는 React 구성 요소입니다.

P.S: 여기서는 스타일 지정을 위해 styled-component를 사용하고 있습니다.

여기까지 읽어주셔서 감사합니다. 즐거우셨기를 바랍니다.

라이브러리 없이 SVG를 Next.js로 가져오는 더 좋은 방법이 있습니까? 아래 댓글에서 공유할 수 있습니다. 감사합니다!