TIL69-01 리액트에서 svg 파일 사용하기

• React에서 SVG 아이콘을 사용하는 방법은 여러 가지가 있지만, 가장 일반적인 방법은 아래와 같다.

  1. SVG 파일 가져오기
     • SVG 파일을 가져와서 프로젝트 내부에 저장한다.
       
  2. SVG 파일을 컴포넌트로 변환하기
     • SVG 파일을 React 컴포넌트로 변환하기 위해서는 svg-to-react와 같은 라이브러리를 사용할 수 있다.
     • 또는, 직접 React 컴포넌트를 만들어서 SVG 코드를 작성할 수도 있습니다.
  3. SVG 아이콘 사용하기
     • 컴포넌트에서 SVG 아이콘을 사용하려면, import 문을 사용하여 SVG 컴포넌트를 가져와야 한다.
     • 그런 다음 JSX 코드에서 SVG 컴포넌트를 사용하면 된다.

• 아래는 예시 코드다.

// MyIcon.js

import React from 'react';
import { ReactComponent as MyIconSvg } from './my-icon.svg';

const MyIcon = () => {
  return (
    <div>
      <MyIconSvg />
    </div>
  );
};

export default MyIcon;

• 아래와 같이 스타일드 컴포넌트를 사용하여 SVG 파일을 스타일링할 수 있다.

import styled from 'styled-components';
import { ReactComponent as Logo } from './logo.svg';

const StyledSVG = styled(Logo)`
  width: 50px;
  height: 50px;
  fill: #000;
`;