사용법

import { ReactComponent as PenguinIcon } from './images/penguinIcon.svg'

<PenguinIcon />

 

만약 너비, 높이, 색을 바꾸고자 하는 경우,

1. 해당 svg 파일로 이동하여, width와 height, fill에 current를 붙인다.

<svg width="current" height="current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M17 6H22V8H20V21C20 ............" fill="current"/>
</svg>

 

2. 사용하는 곳에서 수정한다.

import { ReactComponent as PenguinIcon } from './images/penguinIcon.svg'

<PenguinIcon width={30} height={40} fill="#000000" />

'Language > React' 카테고리의 다른 글

React cloneElement  (0) 2022.12.29
React 라이브러리 없이 캐러셀 구현하기  (0) 2022.11.28
React AWS Amplify DataStore Tutorial  (0) 2022.10.10
React Basic Settings ( Team Project )  (0) 2022.07.02
React props.children  (0) 2022.07.01

+ Recent posts