obsidian-plugin/devonthesofa_obsidian-note-status
1
0
Fork 0
mirror of https://github.com/devonthesofa/obsidian-note-status.git synced 2026-07-22 05:45:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: show all lucide icons

Browse source
This commit is contained in:
Aleix Soler 2025-11-21 08:39:40 +01:00
parent 71706a440f
commit 9535296919
2 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/SettingsUI/LucideIconPicker.tsx
View file

@ -19,7 +19,7 @@ export interface LucideIconPickerProps {
maxResults?: number;
}
const DEFAULT_MAX_RESULTS = 80;
const DEFAULT_MAX_RESULTS = Infinity;
export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
value = "",
@ -53,7 +53,10 @@ export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
const matches = normalized.length
? iconIds.filter((name) => name.toLowerCase().includes(normalized))
: iconIds;
return matches.slice(0, maxResults);
if (Number.isFinite(maxResults)) {
return matches.slice(0, maxResults);
}
return matches;
}, [iconIds, maxResults, query]);
const closePicker = useCallback(() => {
@ -164,6 +167,10 @@ export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
placeholder="Search Lucide icons…"
className="lucide-icon-picker__search"
/>
<div className="lucide-icon-picker__count">
Showing {filteredIcons.length} of{" "}
{iconIds.length} icons
</div>
<div className="lucide-icon-picker__options">
{filteredIcons.map((iconName) => (
<button

13
styles/components/settings.css
View file

@ -306,12 +306,18 @@
width: 100%;
}
.lucide-icon-picker__count {
font-size: var(--font-ui-smaller);
color: var(--text-muted);
}
.lucide-icon-picker__options {
display: flex;
flex-direction: column;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--size-2-1);
max-height: 220px;
max-height: 280px;
overflow-y: auto;
padding-right: var(--size-2-1);
}
.lucide-icon-picker__option {
@ -323,6 +329,7 @@
border: 1px solid transparent;
cursor: pointer;
font-size: var(--font-ui-smaller);
background: var(--background-secondary);
}
.lucide-icon-picker__option:hover {