图标
358字约1分钟
2024-09-30
概述
在 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: 修改颜色: 修改大小: 修改大小颜色:
彩色图标