// codeblock language should be dataviewjs
/**
* List all icons available to `obsidian.setIcon()`
*
* @author Unxok <[email protected]>
*
* Based on the original work from:
* @author Ljavuras <[email protected]>
* @link https://gist.github.com/ljavuras/28095f04113fda73f7dc4efcc776b94f
*/
dv.container.createEl("style", { attr: { scope: "" }, text: `
.icon-table {
display: flex;
flex-wrap: wrap;
margin: 0 var(--size-4-6);
}
.icon-item {
padding: var(--size-4-2);
line-height: 0;
cursor: pointer;
}
.icon-item:hover {
background-color: var(--background-modifier-active-hover);
border-radius: var(--radius-s);
}
`});
let lucide_ids = [];
let other_ids = [];
dv.container.createEl("br");
const searchContainer = dv.container.createDiv({cls: "search-input-container"});
const inp = searchContainer.createEl('input', {type: 'search'})
const clearBtn = searchContainer.createDiv({cls: "search-input-clear-button"})
dv.container.createEl("br");
const container = dv.container.createEl('div')
const updateResults = (val) => {
container.empty();
if (!val) {
renderIconTable(lucide_ids, 'lucide');
renderIconTable(other_ids, 'other');
return;
}
const lucide = lucide_ids.filter(id => id.includes(val));
const other = other_ids.filter(id => id.includes(val));
renderIconTable(lucide, 'lucide');
renderIconTable(other, 'other');
}
inp.addEventListener('input', (e) => {
const val = e.target.value;
updateResults(val)
})
clearBtn.addEventListener('click', () => {
// updateResults("");
inp.value = "";
})
function renderIconTable(ids, label) {
container.createDiv({text: `${ids.length} ${label} icons`})
const tableEl = container.createDiv("icon-table");
ids.forEach((id) => {
let iconEl = tableEl.createDiv("icon-item");
obsidian.setIcon(iconEl, id);
obsidian.setTooltip(iconEl, id, { delay: 0 });
iconEl.onclick = () => {
navigator.clipboard.writeText(id);
new Notice("Copied to clipboard.");
}
});
}
lucide_ids = obsidian.getIconIds()
.filter(id => id.startsWith("lucide-"))
.map(id => id.slice(7));
renderIconTable(lucide_ids, 'lucide');
other_ids = obsidian.getIconIds().filter(id => !id.startsWith("lucide-"));
renderIconTable(other_ids, 'other');
-
-
Save unxok/954da7bf24e45f4cec9e6f8b7a3e094e to your computer and use it in GitHub Desktop.
List of icons in Obsidian
Nice addition with the search bar! Made finding what I was looking for much easier.
Great and very handy!
Only one suggestion: Would be nice to have an x in the search bar to delete the text.
Thanks!
@ghdoca Done! It is now a more "proper" search component :)
Nice thx!
Is there a way to increase the display size of the icons?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
added a search input