9f99ae3ca7
* docs: add markdown-basic en * docs: add markdown-extensions en * docs: add markdown-icons en * docs: add markdown-mark en , change file structure * docs: update usage * docs: add to markdown-caniuse en * docs: add en docs markdown - import files * docs: add en docs markdown - collapse * chore: fix package lock file --------- Co-authored-by: pengzhanbo <volodymyr@foxmail.com>
1.6 KiB
title, createTime, icon, permalink
| title | createTime | icon | permalink |
|---|---|---|---|
| Icons | 2025/03/23 14:24:45 | grommet-icons:emoji | /en/guide/markdown/iconify/ |
Overview
Use iconify icons in Markdown files.
The theme provides an <Icon /> component for using icons in Markdown and a simplified Markdown syntax for easier icon usage.
To enhance this feature, the theme recommends installing the @iconify/json dependency. It automatically parses icon data from @iconify/json, packs used icons as local resources for better access.
::: npm-to
npm install @iconify/json
:::
Syntax
:[collect:name]:
To set icon size and color:
:[collect:name size]:
:[collect:name /color]:
:[collect:name size/color]:
Iconify has numerous icons grouped into different collect categories. Each collect has its own set of icons.
You can find collect and name at https://icon-sets.iconify.design/.
Examples
Input:
:[ion:logo-markdown]:
Output:
:[ion:logo-markdown]:
This is an inline syntax, allowing use with other Markdown elements in the same line.
Input:
github: :[tdesign:logo-github-filled]:
Change color: :[tdesign:logo-github-filled /#f00]:
Change size: :[tdesign:logo-github-filled 36px]:
Change size and color: :[tdesign:logo-github-filled 36px/#f00]:
Colored icon: :[skill-icons:vscode-dark 36px]:
Output:
github: :[tdesign:logo-github-filled]: Change color: :[tdesign:logo-github-filled /#f00]: Change size: :[tdesign:logo-github-filled 36px]: Change size and color: :[tdesign:logo-github-filled 36px/#f00]:
Colored icon: :[skill-icons:vscode-dark 36px]: