diff --git a/.changeset/unlucky-trees-look.md b/.changeset/unlucky-trees-look.md
new file mode 100644
index 00000000000..82f7515e51c
--- /dev/null
+++ b/.changeset/unlucky-trees-look.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+fix(design-system): Allow additional bundles for IconsProvider
diff --git a/packages/design-system/src/components/IconsProvider/IconsProvider.spec.tsx b/packages/design-system/src/components/IconsProvider/IconsProvider.spec.tsx
index 2ac8b232ded..3f4e3575ddd 100644
--- a/packages/design-system/src/components/IconsProvider/IconsProvider.spec.tsx
+++ b/packages/design-system/src/components/IconsProvider/IconsProvider.spec.tsx
@@ -56,4 +56,12 @@ context('', () => {
);
cy.getByTestId('wrapper').find('symbol').should('have.length', 2);
});
+ it('should support additionalBundles props', () => {
+ const additionalBundles = ['/some/other/icons', '/more/icons/is/better'];
+ cy.intercept('/some/other/icons', '').as('getOtherBundle');
+ cy.intercept('/more/icons/is/better', '').as('getMoreBundle');
+ cy.mount();
+ cy.getByTest('other-icons').should('to.exist');
+ cy.getByTest('more-icons').should('to.exist');
+ });
});
diff --git a/packages/design-system/src/components/IconsProvider/IconsProvider.tsx b/packages/design-system/src/components/IconsProvider/IconsProvider.tsx
index f7d1b5bf9f0..de71e7c8e10 100644
--- a/packages/design-system/src/components/IconsProvider/IconsProvider.tsx
+++ b/packages/design-system/src/components/IconsProvider/IconsProvider.tsx
@@ -119,10 +119,12 @@ function isRootProvider(ref: RefObject) {
*/
export function IconsProvider({
bundles = DEFAULT_BUNDLES,
+ additionalBundles = [],
defaultIcons = {},
icons = {},
}: {
- bundles?: string[] | [];
+ bundles?: string[];
+ additionalBundles?: string[];
defaultIcons?: Record;
icons?: Record;
}) {
@@ -131,10 +133,12 @@ export function IconsProvider({
const [shouldRender, setShouldRender] = useState(true);
useEffect(() => {
- if (!Array.isArray(bundles)) {
+ if (!Array.isArray(bundles) || !Array.isArray(additionalBundles)) {
return;
}
+
bundles
+ .concat(additionalBundles)
.filter(url => !hasBundle(url))
.forEach(url => {
FETCHING_BUNDLES[url] = fetch(url)
@@ -143,7 +147,7 @@ export function IconsProvider({
delete FETCHING_BUNDLES[url];
});
});
- }, [bundles]);
+ }, [bundles, additionalBundles]);
useEffect(() => {
if (!isRootProvider(ref)) {