Iconify — ZedExt

Iconify for Zed

Made with 💙 ZedBadge.dev 💙

Iconify icon name completion and hover previews, powered by iconify-lsp.

<Icon icon="lucide:eye-off" />

<script lang="ts">
  const overlay = $derived(linked ? "lucide:link-2" : "lucide:arrow-up-right")
</script>

<Icon icon={overlay} />

Hover preview of a variable

Values returned from functions are found too.

const overlay = $derived.by(() => {
  if (item.link) {
    return "lucide:link-2"
  }

  return isShortcut(item) ? "lucide:arrow-up-right" : null
})

Hover preview of a function value

The first start downloads @iconify/json (about 100 MB). Icon sets installed in the project as @iconify-json/* or @iconify/json take priority.

{
  "lsp": {
    "iconify-lsp": {
      "initialization_options": {
        "color": "#ffffff"
      }
    }
  }
}