diff --git a/.changeset/tender-gorillas-invent.md b/.changeset/tender-gorillas-invent.md new file mode 100644 index 000000000..5b5818fe1 --- /dev/null +++ b/.changeset/tender-gorillas-invent.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +[SelectField] Support option icons diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte index 66799aae4..d47356d1a 100644 --- a/packages/svelte-ux/src/lib/components/SelectField.svelte +++ b/packages/svelte-ux/src/lib/components/SelectField.svelte @@ -539,6 +539,7 @@ &]:bg-surface-content/5', option === selected && (classes.selected || 'font-semibold'), @@ -599,6 +600,7 @@ &]:bg-surface-content/5', option === selected && (classes.selected || 'font-semibold'), diff --git a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte index 8fa85da68..ecba98bb8 100644 --- a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte @@ -18,6 +18,13 @@ import Preview from '$lib/components/Preview.svelte'; let options: MenuOption[] = [ + { label: 'One', value: 1 }, + { label: 'Two', value: 2 }, + { label: 'Three', value: 3 }, + { label: 'Four', value: 4 }, + ]; + + let optionsWithIcon: MenuOption[] = [ { label: 'One', value: 1, icon: mdiMagnify }, { label: 'Two', value: 2, icon: mdiPlus }, { label: 'Three', value: 3, icon: mdiPencil }, @@ -117,6 +124,12 @@ /> +

Options with icons

+ + + + +

Many options