API 参考
Icon
可用于 action 或 list 项的内置图标列表。
例子
import { Icon, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="Icon" icon={Icon.Circle} />
</List>
);
}
枚举成员
Image.Mask
可用于更改图像形状的蒙版。
可以方便地塑造头像或列表中的其他项。
例子
import { Image, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item
title="Icon"
icon={{
source: "https://raycast.com/uploads/avatar.png",
mask: Image.Mask.Circle,
}}
/>
</List>
);
}
枚举成员
类型
Image
显示不同类型的图像，包括网络图像或捆绑的资源。
将图像变换成代码，例如 mask 或 tintColor。
例子
// Built-in icon
const icon = Icon.Eye;
// Built-in icon with tint color
const tintedIcon = { source: Icon.Bubble, tintColor: Color.Red };
// Bundled asset with circular mask
const avatar = { source: "avatar.png", mask: ImageMask.Circle };
// Implicit theme-aware icon
// with 'icon.png' and 'icon@dark.png' in the `assets` folder
const icon = "icon.png";
// Explicit theme-aware icon
const icon = { source: { light: "https://example.com/icon-light.png", dark: "https://example.com/icon-dark.png" } };
属性
FileIcon
Finder 中使用的图标。
例子
import { List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="File icon" icon={{ fileIcon: __filename }} />
</List>
);
}
属性
Image.ImageLike
ImageLike: URL | Asset | Icon | FileIcon | Image;
支持的图像类型的联合类型。
例子
import { Icon, Image, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="URL" icon="https://raycast.com/uploads/avatar.png" />
<List.Item title="Asset" icon="avatar.png" />
<List.Item title="Icon" icon={Icon.Circle} />
<List.Item title="FileIcon" icon={{ fileIcon: __filename }} />
<List.Item
title="Image"
icon={{
source: "https://raycast.com/uploads/avatar.png",
mask: Image.Mask.Circle,
}}
/>
</List>
);
}
Image.Source
Image.Source: URL | Asset | Icon | { light: URL | Asset; dark: URL | Asset }
为了保持一致性，最好在列表、操作面板和其他地方使用内置图标。如果特定图标不是内置的，您可以按文件名从扩展的 assets 文件夹中引用自定义图标，例如 my-icon.png。或者，您可以引用指向图像的绝对 HTTPS URL 或使用表情符号。您还可以为浅色和深色主题指定不同的远程或本地资源。
例子
import { Icon, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="URL" icon={{ source: "https://raycast.com/uploads/avatar.png" }} />
<List.Item title="Asset" icon={{ source: "avatar.png" }} />
<List.Item title="Icon" icon={{ source: Icon.Circle }} />
<List.Item
title="Theme"
icon={{
source: {
light: "https://raycast.com/uploads/avatar.png",
dark: "https://raycast.com/uploads/avatar.png",
},
}}
/>
</List>
);
}
Image.Fallback
Image.Fallback: Asset | Icon | { light: Asset; dark: Asset }
无法加载源图像时将显示的备用图像。可以是本地文件资源、内置图标、单个表情符号或主题识别资源。任何指定的 mask 或 tintColor 也将应用于备用图像。
例子
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
表示 URL 的字符串。
例子
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 是一个字符串，表示来自 assets/ 文件夹的资源。
例子
import { List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="Asset" icon={{ source: "avatar.png" }} />
</List>
);
}
