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>
  );
}
Last modified 3mo ago