CRA SVG 파일 ReactComponent 이슈

SVG 파일 ReactComponent 이슈

index 에서 관리하지 말자

• 이슈 발생

  정적 파일들을 assets 폴더에 저장

  assets/index.js 에서 정적 파일 import 를 관리함

  {ReactComponent as SVGName} from ‘./svgname.svg’ 로 import 후 export 함

  컴포넌트에서 svg 를 import 해서 사용

  경우에 따라 svg 에서 특정 요소가 깨진 상태로 출력됨

• 발생 이유

  svg 가 최적화되면 모든 avg가 동일한 id 가 부여됨

• 해결 방법

  유사한 id 를 가진 svg 의 id를 변경