실험적 SVG 컴포넌트

타입: boolean
기본값: false

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

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

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

`size`

편의를 위해 SVG 컴포넌트는 size 속성도 허용합니다. size는 width와 height 속성을 동일한 값으로 설정하는 단축 속성입니다.

다음 예시는 HTML <svg>의 width와 height 속성을 따로 설정하는 대신 Astro의 size 속성을 사용하여 너비와 높이를 모두 48로 설정합니다:

<!-- `size` prop을 사용하여 너비와 높이를 모두 설정하기 -->
<Logo size={48} />

`mode`

SVG 컴포넌트에 mode 속성을 추가하여 가져온 SVG 파일을 처리하는 기본 구성된 svg.mode를 재정의할 수 있습니다.

다음 예시는 로고의 SVG 콘텐츠를 HTML 출력에 인라인으로 포함시키는 대신 스프라이트 시트를 생성합니다:

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

<Logo size={64} mode="sprite" />

experimental.svg.mode

타입: string
기본값: 'inline'

Added in: astro@5.0.0

가져온 SVG 파일을 처리하는 기본 방식입니다. 별도로 지정하지 않으면 Astro는 SVG 콘텐츠를 HTML 출력에 인라인으로 포함시킵니다.

{
 experimental: {
   svg: {
     mode: 'sprite',
   }
 },
}

inline: Astro는 SVG 콘텐츠를 HTML 출력에 인라인으로 포함시킵니다. (기본값)
sprite: Astro는 가져온 모든 SVG 파일로 스프라이트 시트를 생성합니다.

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

기여하기 커뮤니티 Sponsor