comark-icon
Iconify icons in Markdown, written as :icon{name="lucide:apple"}. Icons are resolved while parsing and drawn as CSS images, so the page asks no server for them and they show without a script. An icon in one color takes the color of the text around it; a logo keeps its own. A Comark plugin for HTML, Vue, React, and Svelte.
pnpm add comark comark-icon
import { createHtmlRenderer } from "@comark/html";
import icon, { components } from "comark-icon/html";
const render = createHtmlRenderer({ plugins: [icon()], components });
Press :icon{name="lucide:command"} K to search.
Built with :icon{name="logos:vue" label="Vue"}.
name is set:name, from any set on icones.js.org, or an image URL. Nuxt UI's i-lucide-apple works too. Without a label the icon is decoration and screen readers skip it.
With no options, icons come from the Iconify API. To build offline, install the sets you use and pass them: icon({ collections: { lucide }, fetch: false }), with import { icons as lucide } from "@iconify-json/lucide". A set can also be SVG markup by name, for icons of your own. fetch takes the URL of an Iconify API of your own, too.
The plugin adds every problem to meta.issues and leaves the icon out.
Renderers
| Renderer | Import |
|---|---|
@comark/html | comark-icon/html: the styles are inlined |
@comark/vue | comark-icon/vue |
@comark/react | comark-icon/react |
@comark/svelte | comark-icon/svelte |
Each entry exports the parse plugin as default and the renderer's components. Import comark-icon/style.css with your styles when you render on a server.
An icon is a .ci, 1em tall; set --comark-icon-size to change it. The rules sit in a comark CSS layer, so any plain rule of your own wins; see the icon's Theming page.
For other plugins
createIcons(options) returns a resolver with resolve(names), which never throws and maps each name to its icon or its problem; describeIconProblem() words a problem the way this plugin does. Pass one resolver to every plugin that draws icons, so a page sets its options once, and draw with iconHtml() and iconStyles(state) from comark-icon/html or the Icon component. See Guides.