SVG파일 사용하기

https://www.youtube.com/watch?v=8CvsPqt-OyY

• 자세한 사용법
  생활코딩 : https://opentutorials.org/course/2418/13666

1. 컴포넌트 임포트
   import { ReactComponent as SearchIcon } from '../icon/search_icon.svg';

2. svg파일

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 20">
  <g 
        fill= 'none'
        stroke= '#000'
        stroke-linecap= 'round'
        stroke-miterlimit= '10'
        stroke-width= '1.5px'>
    
  <circle class="cls-1" cx="9.67" cy="4.87" r="3.87"/>
  <path class="cls-1" d="M1.35,19.6V17.89a6.46,6.46,0,0,1,6.46-6.46h4.42a6.46,6.46,0,0,1,6.46,6.46V19.6" transform="translate(-0.35 -0.13)"/>
  </g>
</svg>

• viewBox : 스크린크기
• fill, stroke, path로 조절
• id 겹치지 않게 조심 !!!! ====> 일러스트에서 svg 만들고 바로 사용하지 말고 위의 코드대로 편집해서 사용합니다

3. 프롭스로 색변경 등 css 조절 가능
   <ChatIcon stroke='#868E96'></ChatIcon>

---

https://ichi.pro/ko/react-aeb-mich-svg-saengseong-123794023192050

https://velog.io/@yjs3819/as%EB%A5%BC-%ED%86%B5%ED%95%9C-SVG-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%99%95%EC%9E%A5%EC%84%B1-%EB%86%92%EC%9D%B4%EA%B8%B0

svg를 컴포넌트로 사용하기

npm install file-loader --save-dev
https://blog.naver.com/PostView.naver?blogId=handam81&logNo=222525190332&parentCategoryNo=&categoryNo=&viewDate=&isShowPopularPosts=false&from=postView

https://runchi.dev/react/react-svg/

https://gaemi606.tistory.com/entry/React-SVG-%EC%82%AC%EC%9A%A9

컴포넌트로 불러오기

• svg파일 수정 : 변경하고 싶은 부분의 값을 current로 바꾸기

<svg
  height='current' 
  width='current'  
  fill="current" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  version="1.1"
   x="0px" y="0px" 
   viewBox="0 0 60 60" 
   style="enable-background:new 0 0 60 60;" 
   xml:space="preserve"
>
<path d="..."></path>
</svg>

• 컴포넌트로 불러와 사용

import { ReactComponent as HeartImg } from "../images/heart.svg";

• props를 이용해 width값, height값, fill(색상)을 변경할 수 있음

 <HeartImg width="30" height="30" fill="#FF6666" />