概述

在 Markdown 文件中使用 iconify 的图标。

主题一方面提供了<Icon /> 组件来支持在 markdown 中使用图标； 另一方面，主题还提供了图标的 markdown 语法，以更简单的方式，在 Markdown 中使用图标。

为了更好的使用该功能，主题推荐你安装 @iconify/json 依赖。主题会自动解析 @iconify/json 中的图标数据， 将有使用的图标打包为本地资源，以获得更好的访问体验。

pnpm

pnpm add @iconify/json

yarn

yarn add @iconify/json

npm

npm install @iconify/json

语法

:[collect:name]:

设置图标大小和颜色

:[collect:name size]:
:[collect:name /color]:
:[collect:name size/color]:

iconify 拥有非常多的图标，这些图标被分组为不同的 collect，每个 collect 都有自己的 图标。

你可以从 https://icon-sets.iconify.design/ 中获取 collect 和 name。

示例

输入：

:[ion:logo-markdown]:

输出：

该语法为行内语法，因此，你可以在同一行中跟其他 markdown 语法 一起使用。

输入：

github: :[tdesign:logo-github-filled]:
修改颜色：:[tdesign:logo-github-filled /#f00]:
修改大小：:[tdesign:logo-github-filled 36px]:
修改大小颜色：:[tdesign:logo-github-filled 36px/#f00]:

彩色图标 :[skill-icons:vscode-dark 36px]:

输出：

github: 修改颜色： 修改大小： 修改大小颜色：

彩色图标

贡献者

pengzhanbo

更新日志

2025/3/15 18:29

查看所有更新日志

• 0fd6c-refactor(theme): improve types and flat config (#524)于 2025/3/15
• b721b-feat(plugin-md-power): add support npm-to container (#256)于 2024/10/8
• c177f-docs: improve docs (#240)于 2024/9/30