From 98874839767eebd479b0a48e2a7e57c3e06f4f9d Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Tue, 16 Jul 2024 09:25:12 +0900
Subject: [PATCH] anchor 2

---
 .../Pages/Components/CompoAnchor.razor          | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/BlazorFluentUI/Components/Pages/Components/CompoAnchor.razor b/BlazorFluentUI/Components/Pages/Components/CompoAnchor.razor
index db40f1a..61c9bf7 100644
--- a/BlazorFluentUI/Components/Pages/Components/CompoAnchor.razor
+++ b/BlazorFluentUI/Components/Pages/Components/CompoAnchor.razor
@@ -23,6 +23,23 @@ The <code>FluentAnchor</code> component supports the same visual appearances as
     <p><b>Message</b>: @message</p>
 </FluentCard>
 
+<FluentLabel class="my-3" Typo="Typography.H4">Anchor with Icons</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical">
+        <FluentAnchor Href="#">
+            With icon at start
+            <FluentIcon Value="@(new Icons.Regular.Size16.AnimalTurtle())" Color="Color.Accent" Slot="start" />
+        </FluentAnchor>
+        <FluentAnchor Href="#">
+            With icon at end
+            <FluentIcon Value="@(new Icons.Regular.Size16.AnimalTurtle())" Color="Color.Accent" Slot="end" />
+        </FluentAnchor>
+        <FluentAnchor Href="#">
+            <FluentIcon Value="@(new Icons.Regular.Size28.AnimalTurtle())" Color="Color.Accent" />
+        </FluentAnchor>
+    </FluentStack>
+</FluentCard>
+
 @code {
     string? message;
 }