Icons & Images

API 参考

Icon

可用于 action 或 list 项的内置图标列表。

例子

import { Icon, List } from "@raycast/api";

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

枚举成员

AddPerson	Airplane	AirplaneFilled
AirplaneLanding	AirplaneTakeoff	Airpods
Alarm	AlarmRinging	AlignCentre
AlignLeft	AlignRight	AmericanFootball
Anchor	AppWindow	AppWindowGrid2x2
AppWindowGrid3x3	AppWindowList	AppWindowSidebarLeft
AppWindowSidebarRight	ArrowClockwise	ArrowCounterClockwise
ArrowDown	ArrowDownCircle	ArrowDownCircleFilled
ArrowLeft	ArrowLeftCircle	ArrowLeftCircleFilled
ArrowNe	ArrowRight	ArrowRightCircle
ArrowRightCircleFilled	ArrowUp	ArrowUpCircle
ArrowUpCircleFilled	ArrowsContract	ArrowsExpand
AtSymbol	BandAid	BankNote
BarChart	BarCode	BathTub
Battery	BatteryCharging	BatteryDisabled
Bell	BellDisabled	Bike
Binoculars	Bird	BlankDocument
Bluetooth	Boat	Bold
Bolt	BoltDisabled	Book
Bookmark	Box	Brush
Bubble	Bug	Building
BulletPoints	BullsEye	Buoy
Calculator	Calendar	Camera
Car	Cart	Cd
Center	Check	CheckCircle
CheckRosette	Checkmark	ChessPiece
ChevronDown	ChevronDownSmall	ChevronLeft
ChevronLeftSmall	ChevronRight	ChevronRightSmall
ChevronUp	ChevronUpSmall	Circle
CircleEllipsis	CircleFilled	CircleProgress
CircleProgress100	CircleProgress25	CircleProgress50
CircleProgress75	ClearFormatting	Clipboard
Clock	Cloud	CloudLightning
CloudRain	CloudSnow	CloudSun
Code	CodeBlock	Cog
Coin	Coins	CommandSymbol
Compass	ComputerChip	Contrast
CopyClipboard	CreditCard	CricketBall
Crop	Crown	Crypto
DeleteDocument	Desktop	Dna
Document	Dot	Download
EditShape	Eject	Ellipsis
Emoji	Envelope	Eraser
ExclamationMark	Exclamationmark	Exclamationmark2
Exclamationmark3	Eye	EyeDisabled
EyeDropper	Female	FilmStrip
Filter	Finder	Fingerprint
Flag	Folder	Footprints
Forward	ForwardFilled	FountainTip
FullSignal	GameController	Gauge
Gear	Geopin	Germ
Gift	Glasses	Globe
Goal	Hammer	HardDrive
Hashtag	Headphones	Heart
HeartDisabled	Heartbeat	Highlight
Hourglass	House	Image
Important	Info	Italics
Key	Keyboard	Layers
Leaderboard	Leaf	LevelMeter
LightBulb	LightBulbOff	LineChart
Link	List	Livestream
LivestreamDisabled	Lock	LockDisabled
LockUnlocked	Logout	Lorry
Lowercase	MagnifyingGlass	Male
Map	Mask	Maximize
MedicalSupport	Megaphone	MemoryChip
MemoryStick	Message	Microphone
MicrophoneDisabled	Minimize	Minus
MinusCircle	MinusCircleFilled	Mobile
Monitor	Moon	Mountain
Mouse	Multiply	Music
Network	NewDocument	NewFolder
Paperclip	Paragraph	Patch
Pause	PauseFilled	Pencil
Person	PersonCircle	PersonLines
Phone	PhoneRinging	PieChart
Pill	Pin	PinDisabled
Play	PlayFilled	Plug
Plus	PlusCircle	PlusCircleFilled
PlusMinusDivideMultiply	PlusSquare	PlusTopRightSquare
Power	Print	QuestionMark
QuestionMarkCircle	QuotationMarks	QuoteBlock
Racket	Raindrop	RaycastLogoNeg
RaycastLogoPos	Receipt	Redo
RemovePerson	Repeat	Reply
Rewind	RewindFilled	Rocket
Rosette	RotateAntiClockwise	RotateClockwise
Ruler	SaveDocument	Shield
ShortParagraph	Shuffle	Sidebar
Signal1	Signal2	Signal3
Snippets	Snowflake	SoccerBall
SpeakerDown	SpeakerHigh	SpeakerLow
SpeakerOff	SpeakerOn	SpeakerUp
SpeechBubble	SpeechBubbleActive	SpeechBubbleImportant
Star	StarCircle	StarDisabled
Stars	Stop	StopFilled
Stopwatch	Store	StrikeThrough
Sun	Sunrise	Swatch
Switch	Syringe	Tag
Temperature	TennisBall	Terminal
Text	TextCursor	TextInput
Torch	Train	Trash
Tray	Tree	Trophy
TwoPeople	Umbrella	Underline
Undo	Upload	Uppercase
Video	Wallet	Wand
Warning	Weights	Wifi
WifiDisabled	Window	WrenchScrewdriver
WristWatch	XMarkCircle	XMarkCircleFilled
XMarkTopRightSquare

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>
  );
}

枚举成员

名称	值
Circle	"circle"
RoundedRectangle	"roundedRectangle"

类型

Image

显示不同类型的图像，包括网络图像或捆绑的资源。

将图像变换成代码，例如 mask 或 tintColor。

提示：为本地资源添加 @dark 后缀，以自动提供深色主题选项，例如：icon.png 和 [e-mail]。

例子

// 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 '[e-mail]' 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" } };

属性

名称	描述	类型
source*	图像的 Image.Source 。	Image.Source
fallback	Image.Fallback 图像，以防无法加载 source。	Image.Fallback
mask	图像的 Image.Mask 。	Image.Mask
tintColor	Color.ColorLike 对图像的所有非透明像素进行着色。	Color.ColorLike

FileIcon

Finder 中使用的图标。

例子

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

export default function Command() {
  return (
    <List>
      <List.Item title="File icon" icon={{ fileIcon: __filename }} />
    </List>
  );
}

属性

名称	描述	类型
fileIcon*	从中获取其图标的文件或文件夹的路径。	string

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 }

图像的来源。可以是远程 URL、本地文件资源、内置图标或单个 Icon 符号。

为了保持一致性，最好在列表、操作面板和其他地方使用内置图标。如果特定图标不是内置的，您可以按文件名从扩展的 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>
  );
}