Icon

作为几何数据供 PathIcon 使用的 Lucide 图标。

示例可交互

Icon — Avalonia UIKit

Live demo unavailable

<WrapPanel ItemSpacing="12" LineSpacing="12">
  <PathIcon Data="{StaticResource UIKit.Icon.Check}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Plus}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Minus}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Close}" />
  <PathIcon Data="{StaticResource UIKit.Icon.ChevronDown}" />
  <PathIcon Data="{StaticResource UIKit.Icon.ChevronRight}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
  <PathIcon Data="{StaticResource UIKit.Icon.ExternalLink}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Folder}" />
  <PathIcon Data="{StaticResource UIKit.Icon.FolderOpen}" />
  <PathIcon Data="{StaticResource UIKit.Icon.File}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Calendar}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Inbox}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Bell}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Star}" />
  <PathIcon Data="{StaticResource UIKit.Icon.User}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Eye}" />
  <PathIcon Data="{StaticResource UIKit.Icon.EyeOff}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Info}" />
  <PathIcon Data="{StaticResource UIKit.Icon.CircleCheck}" />
  <PathIcon Data="{StaticResource UIKit.Icon.TriangleAlert}" />
  <PathIcon Data="{StaticResource UIKit.Icon.CircleX}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Loader}" />
</WrapPanel>

用法

主题覆盖 PathIcon，并把 Lucide 图标作为几何资源：把 Data 设为其中之一，例如 {StaticResource UIKit.Icon.Search}（应用拥有哪些图标见图标，全部图标见图标页面）。图标为 16px，即 medium 尺寸，并使用其 Foreground。xsmall、small、large 样式类分别给出 12、14 和 24px，任何其他的 Width 与 Height 都会精确缩放轮廓。

要按名称绘制组件自带的图标，请使用 uikit:Icon。

示例

三个尺寸样式类、默认尺寸，以及通过 Width 与 Height 得到的 48px 图标。

尺寸可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <PathIcon Classes="xsmall" Data="{StaticResource UIKit.Icon.Copy}" />
  <PathIcon Classes="small" Data="{StaticResource UIKit.Icon.Copy}" />
  <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
  <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Copy}" />
  <PathIcon Width="48" Height="48" Data="{StaticResource UIKit.Icon.Copy}" />
</StackPanel>

用 Foreground 上色（这里分别是主题的弱化色、主色和危险色画刷），并用 RenderTransform 旋转图标。

颜色可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Copy}" />
  <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Copy}" Foreground="{DynamicResource UIKit.MutedForeground}" />
  <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Copy}" Foreground="{DynamicResource UIKit.Primary}" />
  <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.Copy}" Foreground="{DynamicResource UIKit.Danger}" />
  <PathIcon Classes="large" Data="{StaticResource UIKit.Icon.ChevronRight}">
    <PathIcon.RenderTransform>
      <RotateTransform Angle="90" />
    </PathIcon.RenderTransform>
  </PathIcon>
</StackPanel>

Icon

#用法

#示例

用法

示例