ant-design-icons
ant-design-icons copied to clipboard
Use `prefixCls` for `updateCss` to allow multiple instances of `IconProvider`
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? 😊