The Image primitives provide a flexible way to add and manage images and SVGs. Options include Image and SVG, each offering properties for customization and optimization.
The Image primitive is built using Next.js Image component, providing optimized loading and responsive behavior out of the box. For more details on additional features and advanced usage, refer to Next.js Image documentation.
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Specifies the image source URL. |
alt | string | — | Provides alternative text for the image, improving accessibility. |
placeholder | string | — | Placeholder while the image loads. |
priority | boolean | unset/ true | Loads the image with higher priority, useful for above-the-fold images. |
unoptimized | boolean | false | Disables image optimization, loading the image as-is. |
The SVG primitive allows you to embed Scalable Vector Graphics (SVGs) directly in your design.
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Specifies the SVG file source. |
Both Image and SVG primitives can be styled using the Style Panel, Global Styles, and Selectors, allowing full control over their appearance within your design.