Skip to content

[core] Add dynamic IconNext component - #8177

Open
ggdouglas wants to merge 4 commits into
developfrom
gd/icons-next-dynamic
Open

[core] Add dynamic IconNext component#8177
ggdouglas wants to merge 4 commits into
developfrom
gd/icons-next-dynamic

Conversation

@ggdouglas

@ggdouglas ggdouglas commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Third of three PRs splitting up #8065, stacked on #8175. Adds the dynamic IconNext component and its runtime icon loader, and strengthens the typing of next icon names.

What's here

  • IconNext (@blueprintjs/core) renders a next-gen icon from a string name, loading its paths asynchronously on first use (autoLoad, on by default). It also accepts an element for passthrough, and switches between outlined (default) and filled variants, falling back to outlined when an icon has no filled variant.
  • IconsNext runtime loader + defaultNextIconPathsLoader (@blueprintjs/icons/next) cache loaded paths and dynamically import the generated paths/ chunk. The component generator now also emits these path modules, so the static and dynamic pipelines share one generator.
  • BlueprintIconsNext is a string-literal union of every next icon name, generated from the manifest. It replaces the old string-based NextIconName (kept as an alias), so passing an unknown name to IconNext or IconsNext.load is now a compile error.
  • IconNextNames is a PascalCase-keyed name object (IconNextNames.Play === "play"), the next-gen counterpart to IconNames.

How to use

import { IconNext } from "@blueprintjs/core";
import { IconNextNames } from "@blueprintjs/icons/next";

<IconNext icon="play" />
<IconNext icon={IconNextNames.Pause} variant="filled" size={24} />
Screenshot 2026-06-18 at 12 04 28@2x

Stack

  1. Base PR ([icons] Add opt-in next-gen static icon components #8065)
  2. assets + manifests ([icons] Add next-generation icon assets and manifests #8174)
  3. static icon components ([icons] Add static @blueprintjs/icons/next icon components #8175)
  4. static icon docs ([docs] Add next-icons documentation page #8182)
  5. (this PR) dynamic IconNext component

@blueprint-previews

Copy link
Copy Markdown

[core] Add dynamic IconNext component and typed next icon names

Build artifact links for this commit: documentation | landing | table | demo | storybook

This is an automated comment from the deploy-preview CircleCI job.

@blueprint-previews

Copy link
Copy Markdown

[docs] Add IconNext documentation page and example

Build artifact links for this commit: documentation | landing | table | demo | storybook

This is an automated comment from the deploy-preview CircleCI job.

@blueprint-previews

Copy link
Copy Markdown

[docs] Add IconNext documentation page and example

Build artifact links for this commit: documentation | landing | table | demo | storybook

This is an automated comment from the deploy-preview CircleCI job.

Base automatically changed from gd/icons-next-static to develop June 26, 2026 18:32
@changelog-app

changelog-app Bot commented Jun 26, 2026

Copy link
Copy Markdown

Generate changelog in packages/core/changelog/@unreleased

Type (Select exactly one)

  • Feature (Adding new functionality)
  • Improvement (Improving existing functionality)
  • Fix (Fixing an issue with existing functionality)
  • Break (Creating a new major version by breaking public APIs)
  • Deprecation (Removing functionality in a non-breaking way)
  • Migration (Automatically moving data/functionality to a new system)

Description

[core] Add dynamic IconNext component


Generate changelog in packages/icons/changelog/@unreleased

Type (Select exactly one)

  • Feature (Adding new functionality)
  • Improvement (Improving existing functionality)
  • Fix (Fixing an issue with existing functionality)
  • Break (Creating a new major version by breaking public APIs)
  • Deprecation (Removing functionality in a non-breaking way)
  • Migration (Automatically moving data/functionality to a new system)

Description

[core] Add dynamic IconNext component


Check the box to generate changelog(s)

  • Generate changelog entry

@ggdouglas
ggdouglas force-pushed the gd/icons-next-dynamic branch 2 times, most recently from 8e19459 to 9fbeae4 Compare June 26, 2026 20:24
@blueprint-previews

Copy link
Copy Markdown

Reconcile IconNextName after static/dynamic merge

Build artifact links for this commit: documentation | landing | table | demo | storybook

This is an automated comment from the deploy-preview CircleCI job.

@ggdouglas
ggdouglas marked this pull request as ready for review June 26, 2026 20:47
@ggdouglas
ggdouglas force-pushed the gd/icons-next-dynamic branch from 9fbeae4 to 27a044e Compare July 29, 2026 19:50
@blueprint-previews

Copy link
Copy Markdown

Reconcile IconNextName after static/dynamic merge

Build artifact links for this commit: documentation | landing | table | demo | storybook

This is an automated comment from the deploy-preview CircleCI job.

@blueprint-previews

Copy link
Copy Markdown

wip

Build artifact links for this commit: documentation | landing | table | demo | storybook

This is an automated comment from the deploy-preview CircleCI job.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant