feat(UniverIcon): add UniverIcon component (#5557)

ArgoZhang · web-flow · commit 6d8ca20f7992 · 2025-03-07T10:25:57.000+08:00
* doc: 增加 UniverIcon 组件

* doc: 更新本地化资源文件

* chore: 增加 UniverIcon 依赖包

* doc: 增加 UniverIcon 菜单

* doc: 增加菜单多语言支持

* chore: 更新包

* refactor: 微调样式

* refactor: 增加 IconLayout 母版页

* doc: 更新样式表路径

* test: 更新单元测试
diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -64,6 +64,7 @@
     <PackageReference Include="BootstrapBlazor.SummerNote" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.TableExport" Version="9.2.1" />
     <PackageReference Include="BootstrapBlazor.Topology" Version="9.0.0" />
+    <PackageReference Include="BootstrapBlazor.UniverIcon" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.UniverSheet" Version="9.0.0-beta05" />
     <PackageReference Include="BootstrapBlazor.VideoPlayer" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.WinBox" Version="9.0.7" />
diff --git a/src/BootstrapBlazor.Server/Components/Layout/IconLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/IconLayout.razor
@@ -0,0 +1,4 @@
+﻿@inherits LayoutComponentBase
+@layout MainLayout
+
+@Body
diff --git a/src/BootstrapBlazor.Server/Components/Layout/IconLayout.razor.cs b/src/BootstrapBlazor.Server/Components/Layout/IconLayout.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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Layout;
+
+/// <summary>
+/// Icon Layout Component
+/// </summary>
+public partial class IconLayout
+{
+
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIconList.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIconList.razor
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIcons.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIcons.razor
@@ -0,0 +1,27 @@
+﻿@page "/univer-icon"
+@layout MainLayout
+@inject IStringLocalizer<UniverIcons> Localizer
+
+<h3>@Localizer["UniverIconTitle"]</h3>
+
+<h4>@Localizer["UniverIconDescription"]</h4>
+
+<PackageTips Name="BootstrapBlazor.UniverIcon" />
+
+<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.UniverIcon/BootstrapBlazor.UniverIcon.bundle.scp.css" rel="stylesheet"&gt;</Pre>
+
+<Pre>&lt;UniverIcon Name="create-copy-single"&gt;&lt;/UniverIcon&gt;</Pre>
+
+<div>@((MarkupString)Localizer["Icons"].Value)</div>
+
+<div class="icon-list">
+    <UniverIconList></UniverIconList>
+</div>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIcons.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Icons/UniverIcons.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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples.Icons;
+
+/// <summary>
+/// OctIcons 图标示例
+/// </summary>
+public partial class UniverIcons
+{
+
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/_Imports.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/_Imports.razor
@@ -0,0 +1 @@
+﻿@layout IconLayout
diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
@@ -1583,6 +1583,12 @@ void AddIcons(DemoMenuItem item)
                 {
                     Text = Localizer["OctIcon"],
                     Url = "oct-icon"
+                },
+                new()
+                {
+                    IsNew = true,
+                    Text = Localizer["UniverIcon"],
+                    Url = "univer-icon"
                 }
             };
             AddBadge(item);
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4856,6 +4856,7 @@
     "Affix": "Affix",
     "Watermark": "Watermark",
     "OctIcon": "Oct Icons",
+    "UniverIcons": "Univer Icons",
     "Typed": "Typed",
     "UniverSheet": "UniverSheet"
   },
@@ -6781,6 +6782,15 @@
     "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.Icons.UniverIcons": {
+    "UniverIconTitle": "Univer Svg Icon Lib",
+    "UniverIconDescription": "Icons used by Univer",
+    "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://univer.ai/en-US/icons\" target=\"_blank\">[portal]</a>"
+  },
   "BootstrapBlazor.Server.Components.Samples.BootstrapBlazorIcons": {
     "IconsTitle": "Icon",
     "IconsDescription": "Supports font icons, vector SVG icons, and Image pictures",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -4856,6 +4856,7 @@
     "Affix": "固钉组件 Affix",
     "Watermark": "水印组件 Watermark",
     "OctIcon": "Oct Icons",
+    "UniverIcon": "Univer Icons",
     "Typed": "打字机效果 Typed",
     "UniverSheet": "表格组件 UniverSheet"
   },
@@ -6781,6 +6782,15 @@
     "P3": "请拷贝下方样式即可",
     "Icons": "图标列表请通过 <a href=\"https://primer.style/foundations/icons\" target=\"_blank\">[传送门]</a> 查看"
   },
+  "BootstrapBlazor.Server.Components.Samples.Icons.UniverIcons": {
+    "UniverIconTitle": "Univer Icon 图标库",
+    "UniverIconDescription": "Icons used by Univer",
+    "CopiedTooltipText": "拷贝成功",
+    "P1": "1. 引用扩展组件包后添加包内置样式文件开启图标",
+    "P2": "2. 开启样式隔离，编译后自动引用组件样式",
+    "P3": "请拷贝下方样式即可",
+    "Icons": "图标列表请通过 <a href=\"https://univer.ai/en-US/icons\" target=\"_blank\">[传送门]</a> 查看"
+  },
   "BootstrapBlazor.Server.Components.Samples.BootstrapBlazorIcons": {
     "IconsTitle": "Icon 图标",
     "IconsDescription": "同时支持字体图标、矢量 Svg 图标、以及 Image 图片",
diff --git a/src/BootstrapBlazor.Server/wwwroot/css/site.css b/src/BootstrapBlazor.Server/wwwroot/css/site.css
@@ -369,3 +369,24 @@ code {
     --bd-callout-code-color: #e685b5;
     --bd-pre-bg: #1b1f22;
 }
+
+.icon-list {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+    .icon-list > div {
+        padding: 1rem 30px;
+        border: 1px solid var(--bs-border-color);
+        border-radius: var(--bs-border-radius);
+        margin: 0.25rem;
+        cursor: pointer;
+        transition: background-color .3s linear;
+    }
+
+        .icon-list > div:hover {
+            background-color: var(--bb-primary-color);
+            color: #fff;
+        }
diff --git a/test/UnitTest/Services/BootstrapBlazorRootRegisterServiceTest.cs b/test/UnitTest/Services/BootstrapBlazorRootRegisterServiceTest.cs
@@ -28,6 +28,7 @@ public void Subscribe_Ok()
         var service = new BootstrapBlazorRootRegisterService();
         var identifier = new object();
         service.Subscribe(identifier, new BootstrapBlazorRootOutlet());
+        service.Subscribe(identifier, new BootstrapBlazorRootOutlet());
         service.Unsubscribe(new object());
     }
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +@inherits LayoutComponentBase
 +@layout MainLayout
++
 +@Body
Original file line number	Diff line number	Diff line change
`@@ -1583,6 +1583,12 @@ void AddIcons(DemoMenuItem item)`
`1583`	`1583`	`{`
`1584`	`1584`	`Text = Localizer["OctIcon"],`
`1585`	`1585`	`Url = "oct-icon"`
	`1586`	`+ },`
	`1587`	`+ new()`
	`1588`	`+ {`
	`1589`	`+ IsNew = true,`
	`1590`	`+ Text = Localizer["UniverIcon"],`
	`1591`	`+ Url = "univer-icon"`
`1586`	`1592`	`}`
`1587`	`1593`	`};`
`1588`	`1594`	`AddBadge(item);`