SVG 스타일 프로퍼티

SVG 요소를 스타일링할 때 쓸 수 있는 JSX 스타일 프로퍼티에 대해 알아봐요. chakra.svg를 쓰면 SVG 요소도 토큰 기반 스타일링을 그대로 적용할 수 있어요.

출처: 문서

본문

fill 프로퍼티로 SVG 요소의 채우기 색을 설정해요.

<chakra.svg fill="blue.500">
  <path d="..." />
</chakra.svg>

Prop	CSS Property	Token Category
`fill`	`fill`	`colors`

stroke 프로퍼티로 SVG 요소의 선(stroke) 색을 설정해요.

<chakra.svg stroke="blue.500">
  <path d="..." />
</chakra.svg>

Prop	CSS Property	Token Category
`stroke`	`stroke`	`colors`

strokeWidth 프로퍼티로 SVG 요소의 선 두께를 설정해요.

<chakra.svg strokeWidth="1px">
  <path d="..." />
</chakra.svg>

Prop	CSS Property	Token Category
`strokeWidth`	`stroke-width`	`borderWidths`