728x90
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파일을 사용할수있게 되었다 !!!!
개꿀팁
![](https://t1.daumcdn.net/keditor/emoticon/friends1/large/005.gif)
728x90
'프리프로젝트' 카테고리의 다른 글
preproject 9일차 (0) | 2023.04.21 |
---|---|
git hub 협업 작업방법정리 (0) | 2023.04.21 |