# comark-icon 中文文档

规范地址：https://npmcn.com/package/comark-icon/

版本：0\.9\.0
npm 元数据更新时间：2026-11-03T06:22:01.062Z
中文译文更新时间：2026-11-03T09:13:07.836Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/comark-icon
原文对照：https://npmcn.com/package/comark-icon/?lang=original
项目主页：https://comark-ui.onmax.me/icon
源码仓库：https://github.com/onmax/comark-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：34.8 kB，21 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.12\.0
- 运行依赖：2 个
- peer 依赖：vue \>=3\.5，react \>=18，comark ^0\.8\.0，svelte \>=5，@comark/html ^0\.8\.0
- 首次发布：2026-10-21T07:58:20.433Z
- 最新版本发布：2026-11-03T06:22:00.723Z
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

在Markdown中将图标图标化，如：icon{name="lucide:apple"}，在每个渲染器中绘制为CSS，无需脚本。其他插件图标的共享解析器。一个Comark插件。

## 安装

```sh
npm install comark-icon
```

也可以使用：`pnpm add comark-icon`、`yarn add comark-icon`、`bun add comark-icon`

## README

# comark-icon

[![npm version](https://comark-ui.onmax.me/badge.svg?source=npm-version&package=comark-icon&icon=npm)](https://www.npmjs.com/package/comark-icon) [![npm downloads](https://comark-ui.onmax.me/badge.svg?source=npm-downloads&package=comark-icon&period=month&icon=npm)](https://www.npmjs.com/package/comark-icon) [![license](https://comark-ui.onmax.me/badge.svg?label=license&value=MIT)](https://github.com/onmax/comark-ui/blob/main/LICENSE) [![docs](https://comark-ui.onmax.me/badge.svg?label=docs&value=comark-ui.onmax.me)](https://comark-ui.onmax.me/icon/)

在Markdown中将图标图标化，写为 `:icon{name="lucide:apple"}`． 图标在解析时被解析并绘制为CSS图像，因此页面不需要为它们请求服务器，它们无需脚本即可显示。一种颜色的图标采用其周围文字的颜色；一个标志保持自己的风格。一个 [Comark](https://comark.dev/) HTML, Vue， React和Svelte插件。

```sh
pnpm add comark comark-icon
```

```ts
import { createHtmlRenderer } from "@comark/html";
import icon, { components } from "comark-icon/html";

const render = createHtmlRenderer({ plugins: [icon()], components });
```

```md
Press :icon{name="lucide:command"} K to search.

Built with :icon{name="logos:vue" label="Vue"}.
```

`name` 是 `set:name`，从任何时候开始 [icones.js.org](https://icones.js.org/)，或图像URL。Nuxt UI的 `i-lucide-apple` 作品。没有一个 `label` 图标是装饰和屏幕阅读器跳过它。

没有选项，图标来自Iconify API。要离线构建，安装您使用的集合并传递它们： `icon({ collections: { lucide }, fetch: false })`, `import { icons as lucide } from "@iconify-json/lucide"`． 一组也可以是SVG标记的名称，用于您自己的图标。 `fetch` 也接受您自己的Iconify API的URL。

插件增加了每一个问题 `meta.issues` 把图标去掉。

## 渲染器

| 渲染器 | 进口 |
| --- | --- |
| `@comark/html` | `comark-icon/html`：样式是内联的 |
| `@comark/vue` | `comark-icon/vue` |
| `@comark/react` | `comark-icon/react` |
| `@comark/svelte` | `comark-icon/svelte` |

每个条目将解析插件导出为 `default` 还有渲染器 `components`。进口 `comark-icon/style.css` 在服务器上渲染时使用样式。

一个图标是 `.ci`， `1em` 高;集 `--comark-icon-size` 去改变它。规则放在 `comark` CSS层，所以任何简单的规则你自己的胜利；参见图标 [主题页面](https://comark-ui.onmax.me/icon/#theme)。

## 对于其他插件

`createIcons(options)` 返回一个解析器 `resolve(names)`，它从不抛出并将每个名字映射到它的图标或问题； `describeIconProblem()` 文字是一个问题的方式，这个插件。将一个解析器传递给每个绘制图标的插件，这样页面就可以设置一次选项，然后绘制 `iconHtml()` 和 `iconStyles(state)` 从 `comark-icon/html` 或者是 `Icon` 组件。看到 [指南](https://comark-ui.onmax.me/icon/#examples)。

## 常见问题

### comark-icon 是什么？

在Markdown中将图标图标化，如：icon\{name="lucide:apple"\}，在每个渲染器中绘制为CSS，无需脚本。其他插件图标的共享解析器。一个Comark插件。

### 如何安装 comark-icon？

在项目目录运行 npm install comark-icon，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：comark（^0\.8\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### comark-icon 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### comark-icon 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### comark-icon 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.12\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### comark-icon 可以商用吗？

comark-icon 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### comark-icon 还在维护吗？

最新版本 0\.9\.0 发布于 2026/11/03（今天）；至今共发布 11 个版本，其中过去 12 个月发布了 11 个；首次发布于 2026/10/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。