dotnetcore · ArgoZhang · Jun 23, 2024 · Jun 22, 2024 · Jun 22, 2024 · Jun 22, 2024
diff --git a/BootstrapBlazor.sln b/BootstrapBlazor.sln
@@ -142,6 +142,10 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BootstrapBlazor.BootstrapIc
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BootstrapBlazor.DockView", "src\Extensions\Components\BootstrapBlazor.DockView\BootstrapBlazor.DockView.csproj", "{EB33F94D-BCA7-4B85-98E5-C093D798C804}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.IconPark", "src\Extensions\Components\BootstrapBlazor.IconPark\BootstrapBlazor.IconPark.csproj", "{6BDE87D7-62D9-4650-95F5-B60225BAFA68}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "UniTestIconPark", "test\UniTestIconPark\UniTestIconPark.csproj", "{D46E8593-641F-4C90-9D95-3ABF41A327FB}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -322,6 +326,14 @@ Global
 		{EB33F94D-BCA7-4B85-98E5-C093D798C804}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{EB33F94D-BCA7-4B85-98E5-C093D798C804}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{EB33F94D-BCA7-4B85-98E5-C093D798C804}.Release|Any CPU.Build.0 = Release|Any CPU
+		{6BDE87D7-62D9-4650-95F5-B60225BAFA68}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{6BDE87D7-62D9-4650-95F5-B60225BAFA68}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{6BDE87D7-62D9-4650-95F5-B60225BAFA68}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{6BDE87D7-62D9-4650-95F5-B60225BAFA68}.Release|Any CPU.Build.0 = Release|Any CPU
+		{D46E8593-641F-4C90-9D95-3ABF41A327FB}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{D46E8593-641F-4C90-9D95-3ABF41A327FB}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{D46E8593-641F-4C90-9D95-3ABF41A327FB}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{D46E8593-641F-4C90-9D95-3ABF41A327FB}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -378,6 +390,8 @@ Global
 		{23F9B17E-67F7-4009-99BE-209EEE65EBF3} = {CD062AB6-244D-402A-8F33-C37DAC5856CC}
 		{CA517F07-F3BA-424B-BACD-3D83122B38CD} = {CD062AB6-244D-402A-8F33-C37DAC5856CC}
 		{EB33F94D-BCA7-4B85-98E5-C093D798C804} = {CD062AB6-244D-402A-8F33-C37DAC5856CC}
+		{6BDE87D7-62D9-4650-95F5-B60225BAFA68} = {CD062AB6-244D-402A-8F33-C37DAC5856CC}
+		{D46E8593-641F-4C90-9D95-3ABF41A327FB} = {7C1D79F1-87BC-42C1-BD5A-CDE4044AC1BD}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {0DCB0756-34FA-4FD0-AE1D-D3F08B5B3A6B}

diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -44,7 +44,8 @@
     <PackageReference Include="BootstrapBlazor.Gantt" Version="8.0.1" />
     <PackageReference Include="BootstrapBlazor.Holiday" Version="8.0.1" />
     <PackageReference Include="BootstrapBlazor.Html2Pdf" Version="8.1.0" />
-    <PackageReference Include="BootstrapBlazor.ImageCropper" Version="*" />
+    <PackageReference Include="BootstrapBlazor.IconPark" Version="8.0.1" />
+    <PackageReference Include="BootstrapBlazor.ImageCropper" Version="0.0.4" />
     <PackageReference Include="BootstrapBlazor.Live2DDisplay" Version="8.0.0" />
     <PackageReference Include="BootstrapBlazor.Markdown" Version="8.0.0" />
     <PackageReference Include="BootstrapBlazor.MaterialDesign" Version="8.0.3" />

diff --git a/src/BootstrapBlazor.Server/Components/Components/Pre.razor.css b/src/BootstrapBlazor.Server/Components/Components/Pre.razor.css
@@ -5,6 +5,10 @@
     overflow: hidden;
 }
 
+    .pre-code:not(:last-child) {
+        margin-bottom: 1rem;
+    }
+
     .pre-code .loading {
         padding: .5rem 1rem;
     }

diff --git a/src/BootstrapBlazor.Server/Components/Samples/IconParks.razor b/src/BootstrapBlazor.Server/Components/Samples/IconParks.razor
@@ -0,0 +1,55 @@
+@page "/icon-park"
+@inject IStringLocalizer<IconParks> Localizer
+
+<h3>@Localizer["IconParkTitle"]</h3>
+
+<h4>@Localizer["IconParkDescription"]</h4>
+
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
+    <section ignore>
+        <p>@((MarkupString)Localizer["NormalDesc"].Value)</p>
+    </section>
+    <div class="icon-park-list">
+        <SvgIcon Name="a-cane"></SvgIcon>
+        <SvgIcon Name="abdominal"></SvgIcon>
+        <SvgIcon Name="abnormal"></SvgIcon>
+        <SvgIcon Name="acceleration"></SvgIcon>
+        <SvgIcon Name="accept-email"></SvgIcon>
+        <SvgIcon Name="acoustic"></SvgIcon>
+        <SvgIcon Name="activity-source"></SvgIcon>
+        <SvgIcon Name="ad-product"></SvgIcon>
+        <SvgIcon Name="ad"></SvgIcon>
+        <SvgIcon Name="add-computer"></SvgIcon>
+        <SvgIcon Name="add-four"></SvgIcon>
+        <SvgIcon Name="add-item"></SvgIcon>
+        <SvgIcon Name="add-mode"></SvgIcon>
+        <SvgIcon Name="add-music"></SvgIcon>
+        <SvgIcon Name="add-one"></SvgIcon>
+        <SvgIcon Name="add-pic"></SvgIcon>
+        <SvgIcon Name="add-picture"></SvgIcon>
+        <SvgIcon Name="add-print"></SvgIcon>
+        <SvgIcon Name="add-subset"></SvgIcon>
+        <SvgIcon Name="add-subtract"></SvgIcon>
+        <SvgIcon Name="add-text-two"></SvgIcon>
+        <SvgIcon Name="add-text"></SvgIcon>
+        <SvgIcon Name="add-three"></SvgIcon>
+        <SvgIcon Name="add-two"></SvgIcon>
+        <SvgIcon Name="add-user"></SvgIcon>
+        <SvgIcon Name="add-web"></SvgIcon>
+        <SvgIcon Name="add"></SvgIcon>
+        <SvgIcon Name="address-book"></SvgIcon>
+        <SvgIcon Name="adjacent-item"></SvgIcon>
+        <SvgIcon Name="adjustment"></SvgIcon>
+        <SvgIcon Name="adobe-illustrate"></SvgIcon>
+        <SvgIcon Name="adobe-indesign"></SvgIcon>
+        <SvgIcon Name="adobe-lightroom"></SvgIcon>
+        <SvgIcon Name="adobe-photoshop"></SvgIcon>
+        <SvgIcon Name="afferent-four"></SvgIcon>
+        <SvgIcon Name="afferent-three"></SvgIcon>
+        <SvgIcon Name="afferent-two"></SvgIcon>
+        <SvgIcon Name="afferent"></SvgIcon>
+        <SvgIcon Name="afro-pick"></SvgIcon>
+        <SvgIcon Name="agreement"></SvgIcon>
+    </div>
+</DemoBlock>
+
diff --git a/src/BootstrapBlazor.Server/Components/Samples/IconParks.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/IconParks.razor.cs
@@ -0,0 +1,13 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// IconPark 图标库示例
+/// </summary>
+public partial class IconParks
+{
+
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/IconParks.razor.css b/src/BootstrapBlazor.Server/Components/Samples/IconParks.razor.css
@@ -0,0 +1,12 @@
+.icon-park-list {
+    display: flex;
+    flex-wrap: wrap;
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    padding: 0.5rem;
+}
+
+    .icon-park-list ::deep .bb-svg-icon {
+        --bb-svg-icon-width: 16px;
+        padding: 0.5rem;
+    }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFixedHeader.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFixedHeader.razor
@@ -71,20 +71,24 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["DialogTitle"]" Introduction="@Localizer["DialogIntro"]" Name="Dialog" ShowCode="false">
-    <p>@((MarkupString)Localizer["DialogDesc"].Value)</p>
-    <Pre>&lt;style&gt;
+    <section ignore>
+        <p>@((MarkupString)Localizer["DialogDesc"].Value)</p>
+        <Pre>&lt;style&gt;
     .dialog-table .modal-body {
         height: calc(100vh - 400px);
         overflow: hidden;
     }
 &lt;/style&gt;</Pre>
-    <style>
-        .dialog-table .modal-body {
-            height: calc(100vh - 400px);
-            overflow: hidden;
-        }
-    </style>
 
+        <HeadContent>
+            <style>
+                .dialog-table .modal-body {
+                    height: calc(100vh - 400px);
+                    overflow: hidden;
+                }
+            </style>
+        </HeadContent>
+    </section>
     <Button Text="@Localizer["DialogButtonText"]" OnClick="OnClickDialog"></Button>
 </DemoBlock>
 

diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
@@ -630,6 +630,11 @@ void AddData(DemoMenuItem item)
                     Url = "handwritten"
                 },
                 new()
+                {
+                    Text = Localizer["IconPark"],
+                    Url = "icon-park"
+                },
+                new()
                 {
                     Text = Localizer["LinkButton"],
                     Url = "link-button"

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4668,7 +4668,8 @@
     "PrintService": "PrintService",
     "ConnectionService": "ConnectionService",
     "ExportPdfButton": "ExportPdfButton",
-    "ThemeProvider": "IThemeProvider"
+    "ThemeProvider": "IThemeProvider",
+    "IconPark": "ByteDance IconPark"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -6469,5 +6470,12 @@
     "CardWidth": "Card Width",
     "CardMargin": "Card Margin",
     "CardGroupMargin": "Card Group Margin"
+  },
+  "BootstrapBlazor.Server.Components.Samples.IconParks": {
+    "IconParkTitle": "ByteDance Svg Icon Lib",
+    "IconParkDescription": "It has covered all platforms of ByteDance commercial product series and has been introduced and used by 12 platforms as the underlying code, ensuring the uniformity of icon style and cognition.",
+    "NormalTitle": "Icon",
+    "NormalIntro": "Use the <code>BootstrapBlazorSvgIcon</code> component to set its <code>Name</code> parameter.",
+    "NormalDesc": "For more icon names, please visit ByteDance official website <a href=\"https://iconpark.oceanengine.com/official\" target=\"_blank\">https://iconpark.oceanengine.com/official</a>"
   }
 }
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -4668,7 +4668,8 @@
     "PrintService": "打印服务 PrintService",
     "ConnectionService": "在线连接服务 ConnectionService",
     "ExportPdfButton": "导出 Pdf 按钮 ExportPdfButton",
-    "ThemeProvider": "主题服务 IThemeProvider"
+    "ThemeProvider": "主题服务 IThemeProvider",
+    "IconPark": "字节跳动图标 IconPark"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -6469,5 +6470,12 @@
     "CardWidth": "卡片宽度",
     "CardMargin": "卡片边距",
     "CardGroupMargin": "卡片组边距"
+  },
+  "BootstrapBlazor.Server.Components.Samples.IconParks": {
+    "IconParkTitle": "字节跳动图标库",
+    "IconParkDescription": "已覆盖字节跳动商业化产品系所有平台，并被12个平台作为底层代码引入使用，保证了图标样式与认知的统一性",
+    "NormalTitle": "图标组件",
+    "NormalIntro": "使用 <code>BootstrapBlazorSvgIcon</code> 组件设置其 <code>Name</code> 参数即可",
+    "NormalDesc": "更多图标名称请访问字节跳动官网 <a href=\"https://iconpark.oceanengine.com/official\" target=\"_blank\">https://iconpark.oceanengine.com/official</a>"
   }
 }
diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json
@@ -98,6 +98,7 @@
     "live2d-display": "Live2DDisplays",
     "locator": "Locators",
     "logout": "Logouts",
+    "icon-park": "IconParks",
     "image-viewer": "ImageViewers",
     "input-number": "InputNumbers",
     "input": "Inputs",

diff --git a/src/Extensions/Components/BootstrapBlazor.IconPark/BootstrapBlazor.IconPark.csproj b/src/Extensions/Components/BootstrapBlazor.IconPark/BootstrapBlazor.IconPark.csproj
@@ -0,0 +1,16 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <Version>8.0.1</Version>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Icon</PackageTags>
+    <Description>Bootstrap UI components extensions of ByteDance IconPark</Description>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="BootstrapBlazor" Version="8.0.0" />
+  </ItemGroup>
+
+</Project>
diff --git a/src/Extensions/Components/BootstrapBlazor.IconPark/SvgIcon.razor b/src/Extensions/Components/BootstrapBlazor.IconPark/SvgIcon.razor
@@ -0,0 +1,6 @@
+@inherits BootstrapComponentBase
+@namespace BootstrapBlazor.Components
+
+<div @attributes="@AdditionalAttributes" class="@ClassString">
+    <svg xmlns="http://www.w3.org/2000/svg"><use href="@Href"></use></svg>
+</div>
diff --git a/src/Extensions/Components/BootstrapBlazor.IconPark/SvgIcon.razor.cs b/src/Extensions/Components/BootstrapBlazor.IconPark/SvgIcon.razor.cs
@@ -0,0 +1,43 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using Microsoft.AspNetCore.Components;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// DockViewIcon 组件
+/// </summary>
+public partial class SvgIcon
+{
+    /// <summary>
+    /// 获得/设置 图标名称
+    /// </summary>
+    [Parameter, NotNull]
+    [EditorRequired]
+    public string? Name { get; set; }
+
+    /// <summary>
+    /// 获得 图标地址
+    /// </summary>
+    [Parameter, NotNull]
+    public string? Href { get; set; }
+
+    /// <summary>
+    /// 获得 样式字符串
+    /// </summary>
+    private string? ClassString => CssBuilder.Default("bb-svg-icon")
+        .AddClass($"bb-svg-icon-{Name}")
+        .Build();
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        Href ??= $"./_content/BootstrapBlazor.IconPark/icon-park.svg#{Name}";
+    }
+}
diff --git a/src/Extensions/Components/BootstrapBlazor.IconPark/SvgIcon.razor.css b/src/Extensions/Components/BootstrapBlazor.IconPark/SvgIcon.razor.css
@@ -0,0 +1,14 @@
+.bb-svg-icon {
+    --bb-svg-icon-width: 12px;
+    --bb-svg-icon-color: var(--bs-body-color);
+    display: inline-flex;
+}
+
+    .bb-svg-icon > svg {
+        width: var(--bb-svg-icon-width);
+        height: var(--bb-svg-icon-width);
+    }
+
+        .bb-svg-icon > svg > * {
+            stroke: var(--bb-svg-icon-color);
+        }
diff --git a/src/Extensions/Components/BootstrapBlazor.IconPark/_Imports.razor b/src/Extensions/Components/BootstrapBlazor.IconPark/_Imports.razor
@@ -0,0 +1,2 @@
+@namespace BootstrapBlazor.Components
+@using Microsoft.AspNetCore.Components.Web
diff --git a/src/Extensions/Components/BootstrapBlazor.IconPark/logo.png b/src/Extensions/Components/BootstrapBlazor.IconPark/logo.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@namespace BootstrapBlazor.Components
		@using Microsoft.AspNetCore.Components.Web