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)) {