File tree Expand file tree Collapse file tree 1 file changed +27
-0
lines changed
src/content/docs/zh-cn/guides Expand file tree Collapse file tree 1 file changed +27
-0
lines changed Original file line number Diff line number Diff line change @@ -432,6 +432,33 @@ import Logo from '../assets/logo.svg';
432
432
<Logo width={64} height={64} fill="currentColor" />
433
433
```
434
434
435
+ #### ` SvgComponent ` 类型
436
+
437
+ <Since v = " 5.14.0" />
438
+
439
+ 你也可以使用 ` SvgComponent ` 类型对 ` .svg ` 资源强制实施类型安全:
440
+
441
+ ``` astro title="src/components/Logo.astro"
442
+ ---
443
+ import type { SvgComponent } from "astro/types";
444
+ import HomeIcon from './Home.svg'
445
+
446
+ interface Link {
447
+ url: string
448
+ text: string
449
+ icon: SvgComponent
450
+ }
451
+
452
+ const links: Link[] = [
453
+ {
454
+ url: '/',
455
+ text: 'Home',
456
+ icon: HomeIcon
457
+ }
458
+ ]
459
+ ---
460
+ ```
461
+
435
462
### 创建自定义图像组件
436
463
437
464
你可以通过将 ` <Image /> ` 或 ` <Picture/> ` 组件包装在另一个 Astro 组件中来创建自定义、可重用的图像组件。这允许你只设置一次默认属性和样式。
You can’t perform that action at this time.
0 commit comments