[공유노트] Svg 컴포넌트 사용

 

 

리액트 협업 프로젝트 : 개발 관련 유용한 정보 공유 목적의 웹페이지 URL 아카이빙 서비스

 

01. svg 이미지 사용방식

Svg.js에 필요한 아이콘을 컴포넌트화해서 사용하는 방식이다.

svg 이미지의 크기, 컬러 변경의 여지를 고려했을 때 원하는 대로 커스텀이 가능하기 때문에

컴포넌트화 하는 방식을 사용해보면 좋다.

svg 코드에서 바꾸고자 하는 요소를 current로 바꾼 후, 사용하는 컴포넌트에서 props로 내려준 후 수정 가능하다.

// Svg.js
export const ExternalLink = () => {
  return (
    <svg
      width="current"
      height="current"
      ...
    >
      ...
    </svg>
  );
};

export const ArrowDown = () => {
  return (
    <svg
      width="current"
      height="current"
      ...
    >
      ...
    </svg>
  );
};

...

// ViewCard.js 
import ExternalLink from "./Svg";

<Link to="#">
      <a>
          <ExternalLink width="10" height="10"/>
          공유페이지 새창으로 열기
      </a>
  </Link>

 

02. 컴포넌트 파일 내 index.js에서 import, export 하는 방식 수정

• 컴포넌트를 일일이 import 하는 방식

import { ExternalLink, ArrowDown, ArrowLeft, EditIcon } from "./Svg";

export { ExternalLink, ArrowDown, ArrowLeft, EditIcon };

•  모두(*) import 하는 방식

import * as Svg from "./Svg";

export {Svg};

 

 

 

03. 깃모지 커밋 메세지

♻️ : Refactor code.

- 결과의 변경 없이 코드의 구조를 재조정할 때 사용

- 주로 가독성을 높이고 유지보수를 편하게 할 때 사용 (버그를 없애거나, 새로운 기능을 추가할때 때 사용 X)

 

 

🩹 : Simple fix for a non-critical issue.

- 중요하지 않은 문제에 대한 간단한 코드를 수정할 때

 

 

 

 

 

참고

React, Next에서 svg 다루기

React.js - svg 다루기

 

[React] React에서 SVG 활용하기

[React] React에서 SVG 활용하기