The source of an Image. Can be either a remote URL, a local file resource, a built-in Icon or a single emoji.
For consistency, it's best to use the built-in Icon in lists, the Action Panel, and other places. If a specific icon isn't built-in, you can reference custom ones from the assets folder of the extension by file name, e.g. my-icon.png. Alternatively, you can reference an absolute HTTPS URL that points to an image or use an emoji. You can also specify different remote or local assets for light and dark theme.
A fallback Image that will be displayed in case the source image cannot be loaded. Can be either a local file resource, a built-in Icon, a single emoji, or a theme-aware asset. Any specified mask or tintColor will also apply to the fallback image.
Example
import { List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item
title="URL Source With Asset Fallback"
icon={{
source: "https://raycast.com/uploads/avatar.png",
fallback: "default-avatar.png",
}}
/>
</List>
);
}
Image.URL
Image is a string representing a URL.
Example
import { List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="URL" icon={{ source: "https://raycast.com/uploads/avatar.png" }} />
</List>
);
}
Image.Asset
Image is a string representing an asset from the assets/ folder
Example
import { List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="Asset" icon={{ source: "avatar.png" }} />
</List>
);
}
