analogcoding

react 에서 SVG 아이콘 컴포넌트로 사용하기. 본문

Be well coding/Mine

react 에서 SVG 아이콘 컴포넌트로 사용하기.

be well 2020. 5. 29. 09:25

svg 파일을 추가하면 element 형태로 나타나는데 이를 컴포넌트화해서 사용하는 방법이다.

 

const Logo = ({ color = "#080405", width = 80, height = 120 }: LogoProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 2929.35 1662.66"
    style={{ width, height }}
  >
  
  ...
  
  </svg>

원하는 색상과 크기에 맞춰 사용할 수 있게 컴포넌트화해서 사용.

 

크기는 style 속성으로 컨트롤하고 색상은 path 부분에 fill 에 적용.

저작자표시

'Be well coding > Mine' 카테고리의 다른 글

react SEO , prerender  (1) 2020.06.16
react + typescript 절대경로 import  (2) 2020.05.15
error Failed to build iOS project. We ran “xcodebuild” command but it exited with error code 65  (0) 2020.05.11
typescript 에서 storybook 사용하기  (0) 2020.04.28
Git branch 이름 변경  (0) 2020.04.22
'Be well coding/Mine' Related Articles more
Comments