Use prefixCls for updateCss to allow multiple instances of IconProvider

[matzeeable]

Hey!

We are using Ant Design Icons in various WordPress plugins. For this, we need to use IconProvider with a custom prefixCls. Unfortunately, the styles for the second instance of enqueued icons does not get inserted into the DOM as antd-design-icons is already available in the DOM:

ant-design-icons/packages/icons-react/src/utils.ts

Line 169 in 11966e4

updateCSS(mergedStyleStr, '@ant-design-icons', {

To fix this, we apply currently a custom patch through patch-package:

diff --git a/es/utils.js b/es/utils.js
index dfb9d0735e7c0c7cf07ddd1e04924792ebbecc2f..dfdc78cf11860e6b02230230ee00a84e245951fc 100644
--- a/es/utils.js
+++ b/es/utils.js
@@ -79,7 +79,7 @@ export var useInsertStyles = function useInsertStyles(eleRef) {
   useEffect(function () {
     var ele = eleRef.current;
     var shadowRoot = getShadowRoot(ele);
-    updateCSS(mergedStyleStr, '@ant-design-icons', {
+    updateCSS(mergedStyleStr, `@${prefixCls || "antd"}-design-icons`, {
       prepend: true,
       csp: csp,
       attachTo: shadowRoot
diff --git a/lib/utils.js b/lib/utils.js
index da9b34de37c8d2f82cff4e342d071f9b995c39dc..62ea93864bb49490d841fc9d3874a14b6d097301 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -187,7 +187,7 @@ var useInsertStyles = function(eleRef) {
     (0, _react.useEffect)(function() {
         var ele = eleRef.current;
         var shadowRoot = (0, _shadow.getShadowRoot)(ele);
-        (0, _dynamicCSS.updateCSS)(mergedStyleStr, '@ant-design-icons', {
+        (0, _dynamicCSS.updateCSS)(mergedStyleStr, `@${prefixCls || "antd"}-design-icons`, {
             prepend: true,
             csp: csp,
             attachTo: shadowRoot

Is there any reason why prefixCls is not used for the unique ID of the stylesheet? 😊