1236 switch Heroicons imports to individual ESM paths in general page, first-time configuration and dashboard

[vraja-pro]

Context

Switches Heroicons imports in `packages/js/src/general/`, `packages/js/src/first-time-configuration/`, `packages/dashboard-frontend/src/`, and `packages/js/src/dashboard/` from barrel paths (e.g. `@heroicons/react/outline`) to individual ESM paths (e.g. `@heroicons/react/outline/BellIcon`) to reduce the plugin bundle size by allowing the bundler to tree-shake unused icons.

Summary

This PR can be summarized in the following changelog entry:

• Switches Heroicons imports to individual ESM paths in the general page, first-time configuration wizard, and dashboard to reduce bundle size.

Relevant technical choices:

• Only the general page, first-time configuration, and dashboard files are changed in this PR. Changes for other parts of the plugin are tracked in separate PRs.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Open the browser console (F12) before starting — verify no JS errors related to icon imports appear at any point.

General page (Yoast SEO → General)

• Verify the sidebar navigation icons render: adjustments icon (Dashboard), bell icon (Alert center), pie chart icon (First-time configuration overview), clipboard-check icon (Task list).
• Expand a collapsible section and verify the chevron-down icon rotates to indicate open state; collapse and verify it rotates back.
• In the Alerts section, verify the exclamation-circle icon appears in the section title (Problems / Alerts title).
• Toggle alert visibility and verify the eye / eye-off icon switches correctly.
• In the Notifications section, verify the bell icon appears.
• Dismiss a notice and verify the X icon appears on the dismiss button.
• In the Task list upsell row, verify the closed lock (premium) and open padlock (unlock) icons appear.
• In the "Ping other admins" alert item, verify the right-arrow icon appears on the send button.
• In the task list opt-in notification, verify the right-arrow icon appears on the "Show me" button.

First-time configuration wizard (Yoast SEO → General → First-time configuration)

• Navigate through the wizard and verify the checkmark icon appears inside each completed step circle.
• In any alert within the wizard (success, warning, info, error), verify the correct icon renders: check-circle (success), exclamation (warning), information-circle (info), X-circle (error).
• In a combo-box or single-select field, verify the selector/chevron icon appears on the dropdown and a checkmark appears next to the selected option; verify an exclamation-circle icon appears when the field has an error.
• In a text input field, verify the check-circle (valid) and exclamation-circle (invalid) feedback icons appear correctly.
• In an image select field, verify the photograph placeholder icon appears when no image is selected.
• On the Finish step, verify the external-link icon appears on the relevant links and the right-arrow icon appears on navigation buttons.
• In the Social profiles step, verify the plus icon appears on "add profile" and the trash icon appears on "delete profile" buttons.

Dashboard (Yoast SEO Dashboard / site health widget)

• Verify the information-circle icon appears on info tooltips.
• In the task list, verify: right-arrow chevron (task row / single-task-button hover), checkmark-circle (completed task status and progress badge), clock (task duration), trash/plus/right-arrow (call-to-action buttons), and left/right arrows (child-task pagination) all render.
• In the task priority column, verify: red double-chevron-up (high priority), amber menu-alt4 (medium priority), and gray double-chevron-down (low priority) icons appear.
• Trigger a task-fetch error and verify the exclamation icon (in a red circle) and the refresh icon (reload button) appear.
• In the top-pages widget, verify the pencil/edit icon appears on the edit-page button.
• In the Site Kit setup widget, verify: right-arrow (learn more), trash (permanent dismiss), X (dismiss), and checkmark-circle (benefits) icons all render.

Relevant test scenarios

• Changes should be tested with the browser console open — verify no JS errors related to icon imports.
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

QA can test this PR by following these steps:

Not applicable — this is a non-user-facing refactor of internal import paths. No user-visible behaviour changes.

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

• The Yoast SEO General page, the first-time configuration wizard, and the dashboard widget.

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.
• This PR also affects Yoast SEO for Google Docs. I have added a changelog entry starting with [yoast-doc-extension], added test instructions for Yoast SEO for Google Docs and attached the Google Docs Add-on label to this PR.

Documentation

• I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.
• I have run grunt build:images and commited the results, if my PR introduces new images or SVGs.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes https://github.com/Yoast/reserved-tasks/issues/1236

[coveralls]

Coverage Report for CI Build 684

Coverage remained the same at 53.945%

Details

• Coverage remained the same as the base build.
• Patch coverage: No coverable lines changed in this PR.
• No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	68239
Covered Lines:	36616
Line Coverage:	53.66%
Relevant Branches:	17056
Covered Branches:	9396
Branch Coverage:	55.09%
Branches in Coverage %:	Yes
Coverage Strength:	44082.23 hits per line

---

💛 - Coveralls

[Copilot]

Pull request overview

This PR updates Heroicons usage in the General page, first-time configuration wizard, and dashboard packages by switching from barrel imports (e.g. @heroicons/react/outline) to per-icon import paths (e.g. @heroicons/react/outline/BellIcon) to better support bundle-size reduction.

Changes:

• Replaced Heroicons barrel imports with individual icon imports across General/FTC/Dashboard code.
• Updated the related General page test import to match the new icon import style.
• Added an ESLint restriction in dashboard-frontend to prevent reintroducing Heroicons barrel imports.

Reviewed changes

Copilot reviewed 33 out of 33 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/js/tests/general/components/alerts-title.test.js	Updates Bell icon import path used by the AlertsTitle test theme.
packages/js/src/general/components/task-list-upsell-row.js	Switches lock icons to per-icon import paths.
packages/js/src/general/components/task-list-opt-in-notification.js	Switches right-arrow icon to a per-icon import path.
packages/js/src/general/components/problems.js	Switches exclamation-circle icon to a per-icon import path.
packages/js/src/general/components/notifications.js	Switches bell icon to a per-icon import path.
packages/js/src/general/components/notice.js	Switches X icon to a per-icon import path.
packages/js/src/general/components/collapsible.js	Switches chevron-down icon to a per-icon import path.
packages/js/src/general/components/alerts-title.js	Switches exclamation-circle icon to a per-icon import path.
packages/js/src/general/components/alerts-list.js	Switches eye/eye-off icons to per-icon import paths.
packages/js/src/general/components/alert-items/ping-other-admins-alert-item.js	Switches right-arrow icon to a per-icon import path.
packages/js/src/general/app.js	Switches sidebar/navigation icons to per-icon import paths.
packages/js/src/first-time-configuration/tailwind-components/steps/social-profiles/social-field-array.js	Switches trash/plus icons to per-icon import paths.
packages/js/src/first-time-configuration/tailwind-components/steps/finish/finish-step.js	Switches external-link and right-arrow icons to per-icon import paths.
packages/js/src/first-time-configuration/tailwind-components/step-circle.js	Switches check icon to a per-icon import path.
packages/js/src/first-time-configuration/tailwind-components/base/text-input.js	Switches check-circle / exclamation-circle icons to per-icon import paths.
packages/js/src/first-time-configuration/tailwind-components/base/single-select.js	Switches check / exclamation-circle / selector icons to per-icon import paths.
packages/js/src/first-time-configuration/tailwind-components/base/image-select.js	Switches photograph icon to a per-icon import path.
packages/js/src/first-time-configuration/tailwind-components/base/combo-box.js	Switches check / selector icons to per-icon import paths.
packages/js/src/first-time-configuration/tailwind-components/base/alert.js	Switches alert variant icons to per-icon import paths.
packages/js/src/dashboard/widgets/site-kit-setup-widget.js	Switches widget icons to per-icon import paths.
packages/dashboard-frontend/src/widgets/top-pages-widget.js	Switches pencil icon to a per-icon import path.
packages/dashboard-frontend/src/task-list/components/tasks-progress-badge.js	Switches check-circle icon to a per-icon import path.
packages/dashboard-frontend/src/task-list/components/task-row.js	Switches chevron-right icon to a per-icon import path.
packages/dashboard-frontend/src/task-list/components/single-task-button.js	Switches chevron-right icon to a per-icon import path.
packages/dashboard-frontend/src/task-list/components/priority.js	Switches priority icons to per-icon import paths.
packages/dashboard-frontend/src/task-list/components/get-tasks-error-row.js	Switches exclamation/refresh icons to per-icon import paths.
packages/dashboard-frontend/src/task-list/components/duration.js	Switches clock icon to a per-icon import path.
packages/dashboard-frontend/src/task-list/components/child-tasks.js	Switches left/right arrow icons to per-icon import paths.
packages/dashboard-frontend/src/task-list/components/call-to-action-button.js	Switches CTA icons to per-icon import paths.
packages/dashboard-frontend/src/icons/task-status-icon.js	Switches check-circle icon to a per-icon import path.
packages/dashboard-frontend/src/components/widget-table.js	Switches X icon to a per-icon import path.
packages/dashboard-frontend/src/components/info-tooltip.js	Switches information-circle icon to a per-icon import path.
packages/dashboard-frontend/eslint.config.mjs	Adds no-restricted-imports rules to disallow Heroicons barrel imports.