feat(icon): two-tone color icon implements

components/core/JsInterop/JSInteropConstants.cs

@@ -67,6 +67,7 @@ public static class JSInteropConstants
 
         #region icon
         public static string CreateIconFromfontCN => IconComponentHelper.CreateIconFromfontCN;
+        public static string GenerateTwotoneSvgIcon => IconComponentHelper.GenerateTwotoneSvgIcon;
         #endregion
 
         #region input
@@ -183,6 +184,7 @@ public static class IconComponentHelper
         {
             private const string FUNC_PREFIX = JSInteropConstants.FUNC_PREFIX + "iconHelper.";
             public static string CreateIconFromfontCN => $"{FUNC_PREFIX}createIconFromfontCN";
+            public static string GenerateTwotoneSvgIcon => $"{FUNC_PREFIX}generateTwotoneSvgIcon";
 
         }
 

components/core/JsInterop/modules/components/iconHelper.ts

@@ -1,11 +1,43 @@
-export class iconHelper {
+import { generate as generateColor } from "@ant-design/colors";
+
+export class iconHelper {
   static createIconFromfontCN(scriptUrl) {
     if (document.querySelector(`[data-namespace="${scriptUrl}"]`)) {
       return;
     }
-    const script = document.createElement('script');
-    script.setAttribute('src', scriptUrl);
-    script.setAttribute('data-namespace', scriptUrl);
+    const script = document.createElement("script");
+    script.setAttribute("src", scriptUrl);
+    script.setAttribute("data-namespace", scriptUrl);
     document.body.appendChild(script);
   }
-}
+
+  static generateTwotoneSvgIcon(svgImg: string, primaryColor: string): string {
+    svgImg = svgImg
+      .replace(/['"]#333['"]/g, '"primaryColor"')
+      .replace(/['"]#E6E6E6['"]/g, '"secondaryColor"')
+      .replace(/['"]#D9D9D9['"]/g, '"secondaryColor"')
+      .replace(/['"]#D8D8D8['"]/g, '"secondaryColor"');
+    const secondaryColors = generateColor(primaryColor);
+    const svg: SVGElement = iconHelper._createSVGElementFromString(svgImg);
+    const children = svg.childNodes;
+    const length = children.length;
+    for (let i = 0; i < length; i++) {
+      const child: HTMLElement = children[i] as HTMLElement;
+      if (child && child.nodeName.toLowerCase() === "path") {
+        if (child.getAttribute("fill") === "secondaryColor") {
+          child.setAttribute("fill", secondaryColors[0]);
+        } else {
+          child.setAttribute("fill", primaryColor);
+        }
+      }
+    }
+    return svg.outerHTML;
+  }
+
+  private static _createSVGElementFromString(str: string): SVGElement {
+    const div = document.createElement("div");
+    div.innerHTML = str;
+    const svg: SVGElement = div.querySelector("svg");
+    return svg;
+  }
+}

components/icon/Icon.razor.cs

@@ -1,4 +1,5 @@
 using System.Threading.Tasks;
+using AntDesign.JsInterop;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 
@@ -7,8 +8,8 @@ namespace AntDesign
     public partial class Icon : AntDomComponentBase
     {
         [Parameter]
-        public string Alt {get; set;}
-            
+        public string Alt { get; set; }
+
         [Parameter]
         public bool Spin { get; set; }
 
@@ -25,7 +26,7 @@ public partial class Icon : AntDomComponentBase
         public string Theme { get; set; } = IconThemeType.Outline;
 
         [Parameter]
-        public string TwotoneColor { get; set; }
+        public string TwotoneColor { get; set; } = "#1890ff";
 
         [Parameter]
         public string IconFont { get; set; }
@@ -73,8 +74,6 @@ protected override async Task OnInitializedAsync()
                 Spin = true;
             }
 
-            await SetupSvgImg();
-
             Button?.Icons.Add(this);
 
             ClassMapper.Add($"anticon")
@@ -83,10 +82,14 @@ protected override async Task OnInitializedAsync()
             await base.OnInitializedAsync();
         }
 
-        protected override async Task OnParametersSetAsync()
+        protected override async Task OnAfterRenderAsync(bool firstRender)
         {
-            await SetupSvgImg();
-            await base.OnParametersSetAsync();
+            if (firstRender)
+            {
+                await SetupSvgImg();
+            }
+
+            await base.OnAfterRenderAsync(firstRender);
         }
 
         protected virtual async Task SetupSvgImg()
@@ -109,6 +112,10 @@ protected virtual async Task SetupSvgImg()
             {
                 var svg = IconService.GetIconImg(Type.ToLowerInvariant(), Theme.ToLowerInvariant());
                 _svgImg = IconService.GetStyledSvg(svg, svgClass, Width, Height, Fill, Rotate);
+                if (Theme == IconThemeType.Twotone)
+                {
+                    _svgImg = await IconService.GetTwotoneSvgIcon(_svgImg, TwotoneColor);
+                }
                 await InvokeAsync(StateHasChanged);
             }
         }

components/icon/IconService.cs

@@ -28,7 +28,7 @@ public static string GetIconImg(string type, string theme)
             return iconImg;
         }
 
-        public static string GetStyledSvg(string svgImg, string svgClass = null, string width = "1em", string height = "1em", string fill = "currentColor", int rotate = 0)
+        public string GetStyledSvg(string svgImg, string svgClass = null, string width = "1em", string height = "1em", string fill = "currentColor", int rotate = 0)
         {
             if (!string.IsNullOrEmpty(svgImg))
             {
@@ -65,5 +65,10 @@ public bool IconExists(string theme = "", string type = "")
 
             return !string.IsNullOrEmpty(icon);
         }
+
+        public async Task<string> GetTwotoneSvgIcon(string svgImg, string twotoneColor)
+        {
+            return await _js.InvokeAsync<string>(JSInteropConstants.IconComponentHelper.GenerateTwotoneSvgIcon, svgImg, twotoneColor);
+        }
     }
 }

components/tsconfig.json

@@ -4,6 +4,7 @@
     "noEmitOnError": true,
     "removeComments": false,
     "sourceMap": true,
+    "moduleResolution": "node",
     "target": "es2015"
   },
   "files": [ "main.ts" ],

package.json

@@ -38,6 +38,7 @@
     "@types/less": "^3.0.3",
     "@types/node": "^16.3.2",
     "@types/resize-observer-browser": "^0.1.3",
+    "@ant-design/colors": "^6.0.0",
     "antd-theme-generator": "1.2.2",
     "babel-core": "^6.26.3",
     "babel-preset-es2015": "^6.24.1",