search

Kyounghwan01 / blog-comment

blog 코멘트 링크 레포
0 stars 0 forks source link

blog/React/handling-svg/ #49

Open utterances-bot opened 1 year ago

utterances-bot commented 1 year ago

react, next에서 svg 다루기 | 기억보다 기록을

React.js - svg 다루기 react, next svg, next

https://kyounghwan01.github.io/blog/React/handling-svg/

kimkyeseung commented 1 year ago

잘봤습니다.. 근데 혹시 fill 이라던가 svg 파일에 prop을 넘기려면 어떻게 해야하는지도 아시나요??

Kyounghwan01 commented 1 year ago

@kimkyeseung 해당svg를 react 컴포넌트로 감싼 후 컴포넌트가 받은 props를 fill에 넣으면 될 것 같습니다!

cokid1998 commented 1 year ago

nextjs에서도 react에서 svg 사용법 - 2번케이스처럼 ReactComponent로 만들어 사용할 수없나요?

nextjs에서 사용하는 방식은 따로 export해서 import하는 방식이아니라 IDE에 미리보기가 안떠서 export해서 import해오는 과정으로 사용하고싶은데요,,

Kyounghwan01 commented 1 year ago

@cokid1998 dynamic import 사용하시면 callback으로 import 된 svg가 떨어질텐데 그 값에는 ReactComponent라는 속성이 있습니다. 그 값을 컴포넌트로 감싸면 될듯합니다.

const [svgComponent, setSvgComponent] = useState(null);
import('xxx.svg').then(svg -> setSvgComponent(svg))

const Icon = svgComponent.ReactComponent;

<Icon />

수도코드로 대충 작성하였습니다. 용도에 맞게 바꾸시면 될 것 같습니다.