ant-design / ant-design-icons

⭐ Ant Design SVG Icons
https://ant.design/components/icon/
MIT License
939 stars 577 forks source link

Use `prefixCls` for `updateCss` to allow multiple instances of `IconProvider` #650

Open matzeeable opened 2 weeks ago

matzeeable commented 2 weeks ago

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:

https://github.com/ant-design/ant-design-icons/blob/11966e46ed5f74e09f179c9cfb1ef80a598ef924/packages/icons-react/src/utils.ts#L169

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? 😊