getProgressIcon

Icon to represent the progress of a task, a project, something.

Progress Icon example

Signature

function getProgressIcon(
  progress: number,
  color?: Color | string,
  options?: {
    background?: Color | string;
    backgroundOpacity?: number;
  },
): Image.Asset;

• progress is a number between 0 and 1 (0 meaning not started, 1 meaning finished).

• color is a Raycast Color or a hexadecimal representation of a color. By default it will be Color.Red.

• options.background is a Raycast Color or a hexadecimal representation of a color for the background of the progress icon. By default, it will be white if the Raycast's appearance is dark, and black if the appearance is light.

• options.backgroundOpacity is the opacity of the background of the progress icon. By default, it will be 0.1.

Returns an Image.Asset that can be used where Raycast expects them.

Example

import { List } from "@raycast/api";
import { getProgressIcon } from "@raycast/utils";

export default function Command() {
  return (
    <List>
      <List.Item icon={getProgressIcon(0.1)} title="Project" />
    </List>
  );
}