图标
安装相应的包后,Slidev 允许你在 markdown 中直接访问几乎所有开源图标集。由 unplugin-icons 和 Iconify 提供支持。
命名遵循 Iconify 的 {collection-name}-{icon-name} 约定。例如:
<mdi-account-circle />- 来自 Material Design Icons -@iconify-json/mdi<carbon-badge />- 来自 Carbon -@iconify-json/carbon<uim-rocket />- 来自 Unicons Monochrome -@iconify-json/uim<twemoji-cat-with-tears-of-joy />- 来自 Twemoji -@iconify-json/twemoji<logos-vue />- 来自 SVG Logos -@iconify-json/logos- 还有更多...
bash
pnpm add @iconify-json/[the-collection-you-want]bash
npm install @iconify-json/[the-collection-you-want]bash
yarn add @iconify-json/[the-collection-you-want]bash
bun add @iconify-json/[the-collection-you-want]bash
deno add jsr:@iconify-json/[the-collection-you-want]我们使用 Iconify 作为图标的数据源。你需要按照 @iconify-json/* 的模式在 dependencies 中安装相应的图标集。例如,@iconify-json/mdi 用于 Material Design Icons,@iconify-json/tabler 用于 Tabler。你可以参考 Icônes 或 Iconify 查看所有可用的图标集。
图标样式
你可以像其他 HTML 元素一样为图标添加样式。例如:
html
<uim-rocket />
<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />