Note

This documentation describes the Image Vue component for native UI views for Xml templates see image.

Image

Renders a named image using a CSS background or mask class. The name is resolved through the application image registry, with a fallback to the built-in design-system icon set.

Import

import { Image } from '@neos/design-system'

Props

Prop	Type	Default	Description
name	string	undefined	Image/icon name to resolve and render
size	'extrasmall' \| 'small' \| 'medium' \| 'large' \| 'extralarge'	'medium'	Rendered size of the image

Notes

• Image resolution goes through a custom ImageRegistry that applications can extend with custom images.
• For registered images with a darkVersionPath, the component automatically renders the dark-theme variant when the active theme is dark.
• When name is undefined, the component renders nothing.

Usage Examples

Icon from the built-in set

<image name="save" size="small" />
<image name="add" />
<image name="delete" size="large" />

Icon alongside text in a button-like layout

<HorizontalLayout space="extrasmall" vertical-align="center">
  <image name="document" size="small" />
  <Text>Open file</Text>
</HorizontalLayout>

Application logo

<image name="app-logo" size="extralarge" />

In a navigation item

<HorizontalLayout v-for="item in menuItems" :key="item.id" space="small" vertical-align="center">
  <image :name="item.icon" size="small" />
  <Text>{{ item.label }}</Text>
</HorizontalLayout>