실험적 SVG 컴포넌트

타입: boolean
기본값: false

추가된 버전: astro@5.0.0

이 기능을 사용하면 SVG 파일을 가져와서 Astro 컴포넌트로 사용할 수 있습니다. Astro는 SVG 콘텐츠를 HTML 출력에 인라인으로 포함시킵니다.

이 기능을 활성화하려면 Astro 구성에서 experimental.svg를 true로 설정하세요:

{
 experimental: {
   svg: true,
 },
}

이 기능을 사용하려면 로컬 .svg 파일의 기본 가져오기를 참조하세요. 이 가져오기는 Astro 컴포넌트로 취급되므로, 반드시 동적 태그를 사용할 때와 동일한 규칙 (예: 대문자 사용)을 따라야 합니다

---
import Logo from './path/to/svg/file.svg';
---

<Logo />

SVG 컴포넌트 속성

섹션 제목: SVG 컴포넌트 속성

기본 <svg> 요소에서 허용하는 width, height, fill, stroke 및 기타 모든 속성을 전달할 수 있습니다. 이러한 속성들은 자동으로 기본 <svg> 요소에 적용됩니다. 만약 원본 .svg 파일에 속성이 존재하고 해당 속성이 컴포넌트에 전달되면, 컴포넌트에 전달된 값이 원본 값을 덮어씁니다.

---
import Logo from '../assets/logo.svg';
---

<Logo width={64} height={64} fill="currentColor" />

전체 개요를 확인하고 이 실험적 API에 대한 피드백을 제공하려면, SVG 기능 RFC를 참조하세요.