feat(settings): render per-option icons in SelectField

[mrabbani]

Summary

The settings select field variant (SelectField) now renders a per-option icon in both the dropdown items and the selected-value trigger.

Icons are resolved via the existing convention used elsewhere in fields.tsx (LucideIcons[name]), so an option just needs icon: '<LucideName>':

options: [
  { title: 'Check Circle (Solid)', value: 'check_circle_solid', icon: 'CircleCheckBig' },
  // ...
]

Options without icon render exactly as before — the change is additive and backward-compatible. No primitive (SelectItem/SelectValue) changes were needed; the trigger CSS already sizes child svgs.

Why

Enables icon-style selects like the vendor "Verified Icon" picker (icon shown per row + for the current selection) without a bespoke custom field renderer in each consumer.

Notes / scope

• Only the lucide-name form is supported (string). Image-URL / raw-inline-SVG were intentionally left out for now (theming via currentColor, design-system consistency, and avoiding dangerouslySetInnerHTML); can be added later behind a real use case (image-URL is the safe extension).
• settings-formatter.ts already preserves icon on options ({ ...opt, icon }), so no formatter change required.

Testing

Verified live in Dokan admin settings (verified_icon field): icons render in the dropdown list and the selected trigger value; options without an icon are unaffected.

Summary by CodeRabbit

• New Features
  • Settings select fields now display icons alongside each dropdown option and adjacent to the currently selected value. Icons are automatically resolved from existing naming conventions used throughout the application, ensuring consistent and unified visual representation. This enhancement removes the need for manual icon configuration when adding new settings options.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 563fb0a5-4111-4c75-80c9-a64f4281f4c4

📥 Commits

Reviewing files that changed from the base of the PR and between d4fb3f0 and 1b2d91f.

📒 Files selected for processing (1)

• src/components/settings/fields.tsx

---

📝 Walkthrough

Walkthrough

SelectField component now optionally displays Lucide icons for selected options and dropdown items. A new helper resolves icon names to components, while updated rendering logic inserts the icons alongside option labels in both the selection display and dropdown menu.

Changes

SelectField Icon Support

Layer / File(s)	Summary
Icon resolution helper and selectedIcon extraction src/components/settings/fields.tsx	Added renderOptionIcon helper to map icon name strings to Lucide components, and extracted selectedIcon from the currently selected option's icon property.
Icon rendering in SelectField UI src/components/settings/fields.tsx	Modified SelectValue and SelectItem rendering to conditionally display resolved icons before option labels in both the selected display and dropdown menu.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A rabbit's delight, icons now shine,
In dropdowns and fields, aligned so fine,
From Lucide they come, a visual treat,
Making selections look complete! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding per-option icon rendering support to the SelectField component in settings.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/select-option-icon-support

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}