#321 Add Icon component

fluentcms · Dec 13, 2023 · 7592667 · 7592667
1 parent 0f4d2ad
commit 7592667
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 14 deletions.
diff --git a/src/FluentCMS.Web.UI/Components/Core/Alert.razor b/src/FluentCMS.Web.UI/Components/Core/Alert.razor
@@ -1,5 +1,5 @@
 <div class="f-alert f-alert-type-@Type" id="@Id" role="alert">
-    <Icon Class="f-alert-icon" Pack="carbon" Name="information-filled" />
+    @* <Icon Class="f-alert-icon" Pack="carbon" Name="information-filled" /> *@
     <div>
         @ChildContent
     </div>

diff --git a/src/FluentCMS.Web.UI/Components/Core/Icon.razor b/src/FluentCMS.Web.UI/Components/Core/Icon.razor
@@ -1,21 +1,72 @@
-<span class="f-icon f-icon-size-@Size @Class" @attributes=@RestProps>
-    <iconify-icon icon=@($"{Pack}:{Name}") width="100%" height="100%" />
+@inherits BaseComponent
+
+<span class=@this.GetClasses() @attributes=@AdditionalAttributes>
+    @switch (Name)
+    {
+        case IconNameEnum.Plus:
+            <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                viewBox="0 0 18 18">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M9 1v16M1 9h16" />
+            </svg>
+            break;
+        case IconNameEnum.Delete:
+            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
+                <path
+                    d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z" />
+            </svg>
+            break;
+        case IconNameEnum.InformationFilled:
+            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                    d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z">
+                </path>
+            </svg>
+            break;
+        case IconNameEnum.Settings:
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="mr-2 w-4 h-4"
+                aria-hidden="true">
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z">
+                </path>
+            </svg>
+            break;
+        case IconNameEnum.Filter:
+            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd"
+                    d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
+                    clip-rule="evenodd"></path>
+            </svg>
+            break;
+        case IconNameEnum.Search:
+            <svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z">
+                </path>
+            </svg>
+            break;
+        case IconNameEnum.Edit:
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 -ml-0.5" viewBox="0 0 20 20" fill="currentColor"
+                aria-hidden="true">
+                <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
+                <path fill-rule="evenodd"
+                    d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+                    clip-rule="evenodd"></path>
+            </svg>
+            break;
+
+    }
 </span>
 
 @code {
     [Parameter]
-    public string Name {get; set;} = "";
-
-    [Parameter]
-    public string Pack {get; set;} = "tabler";
+    public IconNameEnum Name { get; set; } = IconNameEnum.Default;
 
     [Parameter]
-    public string Class {get; set;} = "";
+    [CssProperty]
+    public ColorEnum Color { get; set; } = ColorEnum.Default;
 
     [Parameter]
-    public string Size {get; set;} = "md";
-
-
-    [Parameter(CaptureUnmatchedValues = true)]
-    public Dictionary<string, object> RestProps {get; set;}
+    [CssProperty]
+    public SizeEnum Size { get; set; } = SizeEnum.Default;
 }
diff --git a/src/FluentCMS.Web.UI/Components/Enums/ColorEnum.cs b/src/FluentCMS.Web.UI/Components/Enums/ColorEnum.cs
@@ -0,0 +1,16 @@
+namespace FluentCMS.Web.UI.Components;
+
+public enum ColorEnum
+{
+    Default,
+    Primary,
+    Secondary,
+    Success,
+    Danger,
+    Warning,
+    Info,
+    Light,
+    Dark,
+    White,
+    Transparent
+}
diff --git a/src/FluentCMS.Web.UI/Components/Enums/IconNameEnum.cs b/src/FluentCMS.Web.UI/Components/Enums/IconNameEnum.cs
@@ -0,0 +1,13 @@
+namespace FluentCMS.Web.UI.Components.Core;
+
+public enum IconNameEnum
+{
+    Default,
+    Plus,
+    Delete,
+    InformationFilled,
+    Settings,
+    Filter,
+    Search,
+    Edit,
+}
diff --git a/src/FluentCMS.Web.UI/Components/Enums/SizeEnum.cs b/src/FluentCMS.Web.UI/Components/Enums/SizeEnum.cs
@@ -0,0 +1,9 @@
+namespace FluentCMS.Web.UI.Components;
+
+public enum SizeEnum
+{
+    Default,
+    Small,
+    Medium,
+    Large
+}
diff --git a/src/FluentCMS.Web.UI/Previews/Pages/Components.razor b/src/FluentCMS.Web.UI/Previews/Pages/Components.razor
@@ -1,5 +1,5 @@
 @page "/previews/components"
-@layout PanelLayout 
+@layout PanelLayout
 
 <PageHeader Title="Components">
     <PageActions>
@@ -25,6 +25,56 @@
     </div>
 </div>
 
+<div class="py-8">
+    <h2 class="font-bold text-2xl">Icons</h2>
+    <div class="py-4 flex flex-col gap-4">
+        <Icon Name="IconNameEnum.Plus" />
+        <Icon Name="IconNameEnum.InformationFilled" />
+        <Icon Name="IconNameEnum.Delete" />
+    </div>
+    <div class="py-4 flex flex-col gap-4">
+        <h1 class="text-4xl">
+            <Icon Name="IconNameEnum.InformationFilled" /> Default
+        </h1>
+
+
+        <div>
+            <Icon Size="SizeEnum.Small" Name="IconNameEnum.InformationFilled" /> Small
+        </div>
+
+        <div>
+            <Icon Size="SizeEnum.Medium" Name="IconNameEnum.InformationFilled" /> Medium
+
+        </div>
+        <div>
+            <Icon Size="SizeEnum.Large" Name="IconNameEnum.InformationFilled" /> Large
+        </div>
+    </div>
+    <div class="py-4 flex flex-col gap-4">
+        <h1 class="text-4xl">
+            <Icon Color="ColorEnum.Primary" Name="IconNameEnum.InformationFilled" /> Primary
+        </h1>
+        <h1 class="text-4xl">
+            <Icon Color="ColorEnum.Secondary" Name="IconNameEnum.InformationFilled" /> Secondary
+        </h1>
+        <h1 class="text-4xl">
+            <Icon Color="ColorEnum.Success" Name="IconNameEnum.InformationFilled" /> Success
+        </h1>
+        <h1 class="text-4xl">
+            <Icon Color="ColorEnum.Danger" Name="IconNameEnum.InformationFilled" /> Danger
+        </h1>
+
+        <h1 class="text-4xl">
+            <Icon Color="ColorEnum.Info" Name="IconNameEnum.InformationFilled" /> Info
+        </h1>
+
+        <h1 class="text-4xl">
+            <Icon Color="ColorEnum.Warning" Name="IconNameEnum.InformationFilled" /> Warning
+        </h1>
+
+    </div>
+</div>
+
 <div class="py-8">
     <h2 class="font-bold text-2xl">Checkbox</h2>
     <div class="py-4 flex flex-col gap-4">