Icons Change
The icon syntax underwent a breaking change in version 1.0.0-rc.144.
The :[collect:name size/color]: syntax has been deprecated. Please use ::collect:name =size /color:: instead.
The theme plans to support icons from libraries such as iconfont, fontawesome, and lucide in future versions. The original syntax was insufficient to accommodate these new extensions, making this breaking change necessary.
The old syntax will remain supported in recent versions but is no longer recommended and will be removed in the future.
The theme will detect if the old syntax is used. If so, a warning message and modification suggestions will be displayed in the console. Please adjust accordingly based on these suggestions.
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.
pnpm add @iconify/jsonyarn add @iconify/jsonnpm install @iconify/jsonSyntax
::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:
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: Change color: Change size: Change size and color:
Colored icon:
