feat(Icons): add OctIcon component (#5248)

* chore: 增加示例

* chore: 增加菜单

* chore: 增加资源文件

* chore: 增加 IsNew 标志

* chore: 增加依赖包

* chore: 更新键值

* chore: 更新示例

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -48,6 +48,7 @@
     <PackageReference Include="BootstrapBlazor.Mermaid" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.MindMap" Version="9.1.3" />
     <PackageReference Include="BootstrapBlazor.MouseFollower" Version="9.0.1" />
+    <PackageReference Include="BootstrapBlazor.OctIcon" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.OnScreenKeyboard" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.PdfReader" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.Player" Version="9.0.0" />

src/BootstrapBlazor.Server/Components/Samples/Icons/OctIcons.razor

@@ -0,0 +1,27 @@
+@page "/oct-icon"
+@layout MainLayout
+@inject IStringLocalizer<OctIcons> Localizer
+
+<HeadContent>
+    <link rel="stylesheet" href="@Assets["_content/BootstrapBlazor.OctIcon/BootstrapBlazor.OctIcon.bundle.scp.css"]" />
+</HeadContent>
+
+<h3>@Localizer["OctIconTitle"]</h3>
+
+<h4>@Localizer["OctIconDescription"]</h4>
+
+<PackageTips Name="BootstrapBlazor.OctIcon" />
+
+<Tips class="mt-3">
+    <ul class="ul-demo">
+        <li>@Localizer["P1"]</li>
+        <li>@Localizer["P2"]</li>
+    </ul>
+    <div>@Localizer["P3"]</div>
+</Tips>
+
+<Pre>&lt;link href="_content/BootstrapBlazor.OctIcon/BootstrapBlazor.OctIcon.bundle.scp.css" rel="stylesheet"&gt;</Pre>
+
+<Pre>&lt;OctIcon Name="accessibility-16"&gt;&lt;OctIcon&gt;</Pre>
+
+<div>@((MarkupString)Localizer["Icons"].Value)</div>

src/BootstrapBlazor.Server/Components/Samples/Icons/OctIcons.razor.cs

@@ -0,0 +1,14 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples.Icons;
+
+/// <summary>
+/// OctIcons 图标示例
+/// </summary>
+public partial class OctIcons
+{
+
+}

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -1568,6 +1568,12 @@ void AddIcons(DemoMenuItem item)
                 {
                     Text = Localizer["IconPark"],
                     Url = "icon-park"
+                },
+                new()
+                {
+                    IsNew = true,
+                    Text = Localizer["OctIcon"],
+                    Url = "oct-icon"
                 }
             };
             AddBadge(item);

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -4806,7 +4806,8 @@
     "RDKit": "RDKit",
     "SmilesDrawer": "SmilesDrawer",
     "Affix": "Affix",
-    "Watermark": "Watermark"
+    "Watermark": "Watermark",
+    "OctIcon": "OctIcons"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -6719,6 +6720,15 @@
     "P3": "Please copy the following code segement",
     "Icons": "For icon list, please visit <a href=\"https://ant.design/components/icon\" target=\"_blank\">[portal]</a>"
   },
+  "BootstrapBlazor.Server.Components.Samples.Icons.OctIcons": {
+    "OctIconTitle": "Oct Svg Icon Lib",
+    "OctIconDescription": "A scalable set of icons handcrafted with <3 by GitHub",
+    "CopiedTooltipText": "Copied",
+    "P1": "1. After referencing the extension package, add the package built-in style file to open the icon",
+    "P2": "2. Enable css isolation and automatically reference component styles after compilation",
+    "P3": "Please copy the following code segement",
+    "Icons": "For icon list, please visit <a href=\"https://primer.style/foundations/icons\" target=\"_blank\">[portal]</a>"
+  },
   "BootstrapBlazor.Server.Components.Samples.BootstrapBlazorIcons": {
     "IconsTitle": "Icon",
     "IconsDescription": "Supports font icons, vector SVG icons, and Image pictures",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -4806,7 +4806,8 @@
     "RDKit": "分子式组件 RDKit",
     "SmilesDrawer": "分子式组件 SmilesDrawer",
     "Affix": "固钉组件 Affix",
-    "Watermark": "水印组件 Watermark"
+    "Watermark": "水印组件 Watermark",
+    "OctIcon": "OctIcons"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -6719,6 +6720,15 @@
     "P3": "请拷贝下方样式即可",
     "Icons": "图标列表请通过 <a href=\"https://ant.design/components/icon\" target=\"_blank\">[传送门]</a> 查看"
   },
+  "BootstrapBlazor.Server.Components.Samples.Icons.OctIcons": {
+    "OctIconTitle": "Github 图标库",
+    "OctIconDescription": "Primer is a set of guidelines, principles, and patterns for designing and building UI at GitHub.",
+    "CopiedTooltipText": "拷贝成功",
+    "P1": "1. 引用扩展组件包后添加包内置样式文件开启图标",
+    "P2": "2. 开启样式隔离，编译后自动引用组件样式",
+    "P3": "请拷贝下方样式即可",
+    "Icons": "图标列表请通过 <a href=\"https://primer.style/foundations/icons\" target=\"_blank\">[传送门]</a> 查看"
+  },
   "BootstrapBlazor.Server.Components.Samples.BootstrapBlazorIcons": {
     "IconsTitle": "Icon 图标",
     "IconsDescription": "同时支持字体图标、矢量 Svg 图标、以及 Image 图片",