svg 이용하는방법

1. 개발자도구에 들어가서

저버튼을 누르고 내가 가지고 오려는 이미지 위에 마우스 커서를 올리면 

이렇게 뜬다.

이때 클릭해서 개발자도구에서 확인한다.

 

2.

저 빨간 부분을 눌러서 역삼각형을 만들고, 그 역삼각형위에 마우스 커서를 둔상태에서 F2 버튼을 누른다 .

그럼 나오는 내용을 전체복사를 한다.(ctrl+a) -> (ctrl+c)

 

3. 이제 리액트 파일로 가서 src 폴더안에 assets폴더가 있다면 그 안에 sign1.svg이런식으로 파일을 생성한다.

그안에 복사한 부분을 붙여넣기한다.

근데, 앞부분이 class라고 되어있을것이다. 그걸 className이라고 바꾼다.

그리고 파일 저장.

 

4. 이제 사용할 파일로 간다. 

만약 Logo라는 폴더에서 사용한다면

import { ReactComponent as StackoverFlowLogo } from '../../assets/logo-stackof.svg';

function Logo(){
return(
<>
<StackoverFlowLogo />
stack <p>overflow</p>
</>
)
}
export default Logo;

이렇게 StackoverFlowLogo라고 내가 쓸 이름을 만들어서 styledcomponent처럼 쓰면된다!

 

이제 아주 유용하게 Svg파일을 사용할수있게 되었다 !!!!

개꿀팁