chore: migrate icon to core and second-gen by TarunAdobe · Pull Request #6012 · adobe/spectrum-web-components

TarunAdobe · 2026-02-06T09:19:22Z

Description

This PR introduces a minimal icon component for 2nd-gen in @adobe/swc, following the RFC direction.

It provides a consistent way for 2nd-gen components to render icons via:

Slotted inline SVG templates

It also adds a small shared icon template catalog under @adobe/swc/icon/elements to avoid per-component SVG duplication.

Motivation and context

This change unblocks migration of icon-dependent components to 2nd-gen without relying on 1st-gen icon packages and global iconset infrastructure.

The goal is to keep icon usage local, explicit, and consistent across 2nd-gen components.

Related issue(s)

RFC: minimal icon component for 2nd-gen

Screenshots (if appropriate)

N/A

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed accessibility expectations for this feature.
I have added automated coverage for the icon behavior.
I have included a changeset if this change needs publishing.
I have updated relevant Storybook documentation/examples.

Reviewer's checklist

Scope aligns with RFC for minimal 2nd-gen icon support.
swc-icon behavior is correct for slot/SVG and src fallback.
Shared icon catalog exports are usable (@adobe/swc/icon/icons).
Automated tests cover expected behavior and pass in CI.
VRT/browser validation is completed as required.

Manual review test cases

Review swc-icon Storybook docs/examples
1. Open icon docs in the PR Storybook build.
2. Verify slotted SVG rendering works (default slot path).
3. Verify shared template usage examples (Chevron100Icon, AlertIcon) render correctly.
4. Inspect DOM to confirm:
  - Slotted SVG receives accessibility attributes as expected

Device review

Desktop
Emulated mobile
Emulated tablet

changeset-bot · 2026-02-06T09:19:28Z

⚠️ No Changeset found

Latest commit: fdcf5a7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2026-02-06T09:26:51Z

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-6012

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

rubencarvalho · 2026-02-24T09:42:21Z

1st-gen/tools/base/src/version.js

Can you verify why this file is showing?

BLOCKING - can you verify, please?

2nd-gen/packages/swc/components/icon/stories/icon.stories.ts

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

2nd-gen/packages/swc/components/icon/Icon.ts

2nd-gen/packages/swc/components/icon/test/icon.test.ts

2nd-gen/packages/swc/.storybook/main.ts

rubencarvalho · 2026-02-24T12:21:36Z

2nd-gen/packages/core/components/icon/Icon.base.ts

+  // ──────────────────
+
+  /**
+   * Accessible label for the icon.


nit: we may want to work on these descriptions - we're pending some docs around this - but I imagine we'll want to be more descriptive in the future.

2nd-gen/packages/core/components/icon/Icon.base.ts

2nd-gen/packages/swc/package.json

2nd-gen/packages/swc/cem.config.js

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

Rajdeepc

Kindly add the ./components/icon export and typesVersions entry to core/package.json. This will fail for external consumers after build.

Rajdeepc · 2026-03-02T11:27:35Z

2nd-gen/packages/core/components/icon/Icon.base.ts

+   * Icon t-shirt size.
+   */
+  @property({ reflect: true })
+  public size: IconSize = 'm';


Other 2nd-gen components uses SizedMixin

shoot. this was a big deal oops. got it right now

Rajdeepc · 2026-03-02T11:29:27Z

2nd-gen/packages/core/components/icon/Icon.base.ts

+  protected override updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    if (changedProperties.has('label')) {
+      this.updateSlottedIcon();


What about the initial render when a user provides

<swc-icon><svg>...</svg></swc-icon>

Can you override firstUpdated() to call updateSlottedIcon() and updateHostAccessibility() to ensure the initial state is correct regardless of property change timing. Also please think of using @queryAssignedElements instead of manually querying the slot.

Rajdeepc · 2026-03-02T11:33:51Z

2nd-gen/packages/swc/components/icon/elements/AlertIcon.ts

@@ -0,0 +1,25 @@
+/**


These are pure SVG template functions with no rendering layer dependency. Do you feel that we should move icon element templates to 2nd-gen/packages/core/components/icon/elements/ or a separate core/icons/ directory?

I agree the icon templates are conceptually “core-ish”, but right now they return Lit TemplateResult (html\``), so they still carry a rendering-layer dependency.

For this PR, I’d prefer to keep them under @adobe/spectrum-wc/icon/elements to avoid mixing concerns and expanding scope (move would also require export/typesVersions + import-path updates).

I’m happy to do a follow-up where we decide the long-term home (core/components/icon/elements vs core/icons) and, if needed, first make the templates rendering-agnostic so the move is clean.

I'm OK with keeping it simpler for now! But interestingly enough, I'd actually argue these may be part of the "rendering layer" - they are theme-specific, e.g. if we were to have a aether/components/icon/elements, these SVGs would be different.

Rajdeepc · 2026-03-02T11:46:04Z

2nd-gen/packages/swc/components/icon/elements/Chevron100Icon.ts

+};
+
+export const Chevron100Icon = ({
+  direction = 'right',


This is the only icon which is using an inline style transform. There is an inconsistency. We can either make direction a concern of the swc-icon host via a CSS approach or we can document why Chevron is special.

the rationale here is that we don't want another component to control the icon css or how icon should render.. this should be isolated in the icon template literal itself and so optionally some icons can have these attributes like direction in this case. it was an intentional choice

Rajdeepc

Thanks for addressing the feedback. Added few suggestion but they are mostly trivial. Kindly check @adobe/spectrum-wc/icon/elements subpath issue then we can land this.

Rajdeepc · 2026-03-03T12:40:23Z

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

+import { Chevron100Icon } from '@adobe/spectrum-wc/icon/elements';
+import * as iconElements from '@adobe/spectrum-wc/icon/elements';


Here * only matches a single path segment so @adobe/spectrum-wc/icon/elements would not resolve through ./*. This works in Storybook dev via the Vite resolve.alias but will fail for published customers.

Rajdeepc · 2026-03-03T12:41:08Z

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

+import {
+  ICON_VALID_SIZES,
+  type IconSize,
+} from '../../../../core/components/icon/Icon.types.js';


You can use absolute import here since export was added to core/package.json

Rajdeepc · 2026-03-03T12:43:14Z

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

+ * All sizes are shown below for comparison.
+ */
+export const Sizes: Story = {
+  render: (_args) => html`


Please pass ..args here. You are ignoring it through prefixed with underscore. Storybook controls will not work.

rubencarvalho · 2026-03-03T14:00:17Z

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

+  render: (args) => html`
+    ${ICON_VALID_SIZES.map(
+      (size) => html`
+        <swc-icon


Can we use the template? 😄

rubencarvalho · 2026-03-03T14:00:28Z

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

+ */
+export const Sources: Story = {
+  render: (args) => html`
+    <swc-icon


rubencarvalho · 2026-03-03T14:00:45Z

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

+ */
+export const SharedTemplates: Story = {
+  render: (args) => html`
+    <swc-icon


Same! Template wherever possible, please!

rubencarvalho · 2026-03-03T14:01:52Z

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

+                            padding: 8px;
+                        "
+          >
+            <swc-icon


rubencarvalho · 2026-03-03T14:02:12Z

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

+ */
+export const Accessibility: Story = {
+  render: (args) => html`
+    <swc-icon label=${ifDefined(args.label)} size=${ifDefined(args.size)}>


Last comment on the template! 😛

rubencarvalho · 2026-03-03T14:03:23Z

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

+      ${catalog.map(
+        (entry) => html`
+          <div
+            style="


This is breaking the formatting, could we use Lit's styleMap for this, please?

2nd-gen/packages/swc/components/icon/Icon.ts

rubencarvalho · 2026-03-04T12:56:18Z

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

+  padding: '8px',
+} as const;
+
+const renderIcon = (


I think we may be talking past each other 😅 Maybe I'm missing what this does, but why do we need the renderIcon wrapper? Why can't we use template directly?
See the suggestions below

rubencarvalho · 2026-03-04T12:57:03Z

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

+
+export const Overview: Story = {
+  tags: ['overview'],
+  render: (args) => renderIcon(args),


Without the renderIcon this could be:

Suggested change

render: (args) => renderIcon(args),

render: (args) => template(args, iconSvg),

rubencarvalho · 2026-03-04T12:57:28Z

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

+
+export const Playground: Story = {
+  tags: ['autodocs', 'dev'],
+  render: (args) => renderIcon(args),


Without the renderIcon this could be:

Suggested change

render: (args) => renderIcon(args),

render: (args) => template(args, iconSvg),

rubencarvalho · 2026-03-04T12:57:55Z

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

+ * - Default slot: Provide SVG markup to render.
+ */
+export const Anatomy: Story = {
+  render: (args) => renderIcon(args, { label: 'Chevron icon' }),


Without the renderIcon this could be:

Suggested change

render: (args) => renderIcon(args, { label: 'Chevron icon' }),

render: (args) => template({ ...args, label: 'Chevron icon' }, iconSvg),

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts

…ates

TarunAdobe force-pushed the ttomar/second-gen-icons branch 4 times, most recently from 83fddc6 to 6ee05f1 Compare February 10, 2026 08:30

TarunAdobe marked this pull request as ready for review February 10, 2026 08:45

TarunAdobe requested a review from a team as a code owner February 10, 2026 08:45

TarunAdobe marked this pull request as draft February 10, 2026 13:49

TarunAdobe force-pushed the ttomar/second-gen-icons branch 2 times, most recently from 7cc0216 to 9e3aebd Compare February 20, 2026 06:32

TarunAdobe marked this pull request as ready for review February 20, 2026 06:34

TarunAdobe force-pushed the ttomar/second-gen-icons branch 2 times, most recently from cbc96d1 to f2ab00c Compare February 24, 2026 09:31

rubencarvalho reviewed Feb 24, 2026

View reviewed changes

rubencarvalho requested changes Feb 24, 2026

View reviewed changes

TarunAdobe force-pushed the ttomar/second-gen-icons branch from 1c0d556 to 03e29a9 Compare February 25, 2026 11:19

rubencarvalho reviewed Feb 25, 2026

View reviewed changes

2nd-gen/packages/swc/package.json Outdated Show resolved Hide resolved

TarunAdobe force-pushed the ttomar/second-gen-icons branch 2 times, most recently from 7b89045 to 4973ade Compare March 2, 2026 10:12

rubencarvalho reviewed Mar 2, 2026

View reviewed changes

2nd-gen/packages/swc/cem.config.js Outdated Show resolved Hide resolved

rubencarvalho reviewed Mar 2, 2026

View reviewed changes

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts Show resolved Hide resolved

Rajdeepc requested changes Mar 2, 2026

View reviewed changes

TarunAdobe requested review from Rajdeepc and rubencarvalho March 3, 2026 07:12

Rajdeepc reviewed Mar 3, 2026

View reviewed changes

rubencarvalho reviewed Mar 3, 2026

View reviewed changes

2nd-gen/packages/swc/components/icon/stories/icon.internal.stories.ts Outdated

padding: 8px;

"

>

<swc-icon

Copy link

Contributor

rubencarvalho Mar 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(template)

rubencarvalho reviewed Mar 3, 2026

View reviewed changes

2nd-gen/packages/swc/components/icon/Icon.ts Show resolved Hide resolved

rubencarvalho reviewed Mar 4, 2026

View reviewed changes

TarunAdobe force-pushed the ttomar/second-gen-icons branch from 611677c to 43451e7 Compare March 5, 2026 08:53

rubencarvalho approved these changes Mar 6, 2026

View reviewed changes

TarunAdobe force-pushed the ttomar/second-gen-icons branch from be01809 to 9e7bb1a Compare March 9, 2026 06:25

TarunAdobe added 14 commits March 10, 2026 12:24

chore: migrate icon to core and second-gen

b60b24d

chore: update icons in second gen

b427668

chore: add icons in second-gen

89f4dd9

chore: update icon package second-gen

f60861b

chore: update second-gen icons

edb29c1

chore: add no-prod tag to hide icon-stories

4392814

chore: add ui icons from a4u

704504e

chore: hide internal icon stories in production and optimize icon upd…

25ae275

…ates

chore: update icon size, fix cem issues and second-gen stories

885b940

chore: update second-gen icon

e0448f1

chore: update code based on reviews

5c567b6

chore: use template in icon stories

25f7301

chore: remove bloated icons story and use template

6982a26

chore: fix lint issues

fdcf5a7

TarunAdobe force-pushed the ttomar/second-gen-icons branch from 9e7bb1a to fdcf5a7 Compare March 10, 2026 06:54

rubencarvalho approved these changes Mar 10, 2026

View reviewed changes

		import { Chevron100Icon } from '@adobe/spectrum-wc/icon/elements';
		import * as iconElements from '@adobe/spectrum-wc/icon/elements';

	render: (args) => renderIcon(args),
	render: (args) => template(args, iconSvg),

	render: (args) => renderIcon(args, { label: 'Chevron icon' }),
	render: (args) => template({ ...args, label: 'Chevron icon' }, iconSvg),

Conversation

TarunAdobe commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation and context

Related issue(s)

Screenshots (if appropriate)

Author's checklist

Reviewer's checklist

Manual review test cases

Device review

Uh oh!

changeset-bot bot commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Rajdeepc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Rajdeepc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TarunAdobe commented Feb 6, 2026 •

edited

Loading

changeset-bot bot commented Feb 6, 2026 •

edited

Loading

github-actions bot commented Feb 6, 2026 •

edited

Loading