Slidev 图标完全指南在 Markdown 中直接调用任意开源图标库【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev本文以 docs/features/icons.md 为主线讲解 Slidev 如何基于unplugin-icons与 Iconify 数据源让你安装对应iconify-json/*包后即可在 Markdown 幻灯片里直接以collection-icon /组件形式使用几乎全部开源图标集并结合 packages/slidev/node/vite/icons.ts、packages/slidev/node/setups/unocss.ts 等源码说明其默认类名slidev-icon、集合解析路径与i-工具类机制的底层实现帮助你在演示文稿中快速、可离线地嵌入并精细控制图标样式。1. 工作原理unplugin-icons Iconify 数据源Slidev 官方文档的原文定位是安装对应包之后你就能在 Markdown 中直接访问几乎所有开源图标集能力由unplugin-icons与 Iconify 提供。从源码结构看这条链路的组成如下packages/slidev/node/vite/icons.ts 中createIconsPlugin返回的就是unplugin-icons/vite的Icons插件并固定了两个默认配置defaultClass: slidev-icon每个被解析出的图标组件都会自动带上这个 classcollectionsNodeResolvePath: options.utils.iconsResolvePath指定图标集合包iconify-json/*的 Node 解析路径。iconsResolvePath在 packages/slidev/node/options.ts 中初始化为[resolved.clientRoot, ...resolved.roots].reverse()即优先在入口项目你的 slides 目录中查找已安装的图标集合包找不到时再回退到主题等上层 roots——这就是“你在自己的dependencies里装了哪个集合就能用哪个集合”的原因。该插件由 packages/slidev/node/vite/index.ts 在 Vite 插件链中统一挂载属于 Slidev 内置插件之一见 docs/custom/config-vite.md 中列出的内置插件清单。换句话说Markdown 中写一个mdi-account-circle /构建时unplugin-icons会把它转换成一个渲染 SVG 的 Vue 组件SVG 内容来自本地已安装的iconify-json/mdi包而非运行时请求任何 CDN——因此导出 PDF、离线放映场景下图标依然可用。2. 命名规范与常用示例图标命名遵循 Iconify 的{collection-name}-{icon-name}约定即组件名 集合名 连字符 图标名。文档给出的代表性示例mdi-account-circle /—— Material Design Icons对应iconify-json/mdicarbon-badge /—— Carbon Design 图标对应iconify-json/carbonuim-rocket /—— Unicons Monochrome对应iconify-json/uimtwemoji-cat-with-tears-of-joy /—— Twemoji对应iconify-json/twemojilogos-vue /—— SVG Logos对应iconify-json/logos。此外文档提示iconify-json/tabler对应 Tabler 等集合所有可用集合可通过 Icônes 与 Iconify 的在线目录检索本仓库 skills/slidev/references/style-icons.md 中也给出了mdi、carbon、logos、twemoji等常见集合的速查清单。值得一提的是Slidev 自身就在用这套机制仓库 pnpm-workspace.yaml 的iconscatalog 固定了iconify-json/carbon、iconify-json/mdi、iconify-json/ph、iconify-json/ri、iconify-json/svg-spinners五个集合的版本并被 packages/slidev/package.json 与 packages/client/package.json 引用——这既保证了 Slidev 客户端内置 UI 图标可正常构建也侧面说明了“装包即可用”这一前提在真实工程中的落地方式。3. 安装把图标集合放进 dependencies文档提供了全平台包管理器的一键安装命令把[the-collection-you-want]换成你要的集合名pnpm add iconify-json/[the-collection-you-want]npm install iconify-json/[the-collection-you-want]yarn add iconify-json/[the-collection-you-want]bun add iconify-json/[the-collection-you-want]deno add jsr:iconify-json/[the-collection-you-want]关键前提是包必须安装在你幻灯片入口所在项目的dependencies中与第 1 节iconsResolvePath的解析顺序一致。安装完成后无需任何额外注册直接在.md幻灯片或.vue布局/组件里书写collection-icon /即可。4. 样式控制像普通 HTML 元素一样写 class文档“Styling Icons”一节的原文示例是uim-rocket / uim-rocket classtext-3xl text-red-400 mx-2 / uim-rocket classtext-3xl text-orange-400 animate-ping /图标本质是一个内联 SVG 元素因此可以像其他 HTML 元素一样使用 UnoCSS 工具类控制大小、颜色、间距乃至动画。其基线行为由默认类名决定unplugin-icons注入的defaultClass: slidev-icon见 packages/slidev/node/vite/icons.ts对应 packages/client/styles/index.css 中的样式.slidev-icon { display: inline-block; vertical-align: sub; line-height: 1em; }这保证图标在文字行中呈内联块级显示并轻微下沉对齐与正文混排时不会出现明显错位。你的class属性会追加在这个默认类之上所以text-3xl、text-red-400、animate-ping等工具类都能直接生效——这正是官方示例中火箭图标能显示为 3xl 字号、红色、并做 ping 脉冲动画的机制。5. 进阶类名式图标i- 前缀与虚拟导入除了组件语法Slidev 的 UnoCSS 配置同样启用了图标能力。packages/slidev/node/setups/unocss.ts 在内置 UnoCSS 配置中注入了presetIcons并复用同一个utils.iconsResolvePath解析集合路径同时还内置了一个slidev集合将 packages/client/assets/logo.svg 暴露为slidev:logo图标。由此带来两种等价写法工具类写法在任意class中写i-{collection}-{icon}例如classi-carbon-logo-github。Slidev 官方脚手架模板 packages/slidev/template.md 与演示 demo/starter/slides.md 中都同时出现了carbon:edit /组件式与i-carbon:edit类名式两种用法i-carbon:edit中的冒号分隔是 UnoCSS 的等价写法虚拟模块导入在 TypeScript/Vue 文件中通过~icons/{collection}/{icon}导入组件。例如 docs/custom/config-context-menu.md 展示了在 setup 文件中import Icon3DCursor from ~icons/carbon/3d-cursor再把它注册进右键菜单项——这说明图标不仅是 Markdown 语法糖也可以作为普通 Vue 组件参与二次开发布局、全局组件、setup 文件等。6. 高级定制通过 slidev.icons 覆盖插件配置可选unplugin-icons的完整选项通过SlidevPluginOptions.icons透传。packages/types/src/vite.ts 中其类型为ArgumentsTypetypeof Icons[0]即unplugin-icons插件本身的全部配置项在 packages/slidev/node/vite/icons.ts 中...pluginOptions.icons展开在默认配置之后意味着你的自定义项可以覆盖默认值。写法是在项目vite.config.ts中import { defineConfig } from vite export default defineConfig({ slidev: { icons: { /* unplugin-icons 的选项如 defaultLang、compiler 等 */ }, }, })这与 docs/custom/config-vite.md 中“Configure Internal Plugins”一节属于同一机制。需要注意文档对该机制的明确警告这是高级功能覆盖内置插件的默认配置包括第 4 节提到的defaultClass可能导致应用行为变化仅在明确需要时再调整。7. 小结能力语法前提组件式图标Markdown/Vuemdi-account-circle /项目dependencies安装iconify-json/mdi工具类式图标classi-carbon-logo-github同上UnoCSSpresetIcons已内置启用TS/Vue 中导入组件import I from ~icons/carbon/3d-cursor同上样式控制classtext-3xl text-red-400 animate-ping依赖slidev-icon默认内联对齐 UnoCSS 工具类覆盖插件行为vite.config.ts中slidev.icons高级功能会覆盖默认配置整条链路——Markdown 组件语法 →unplugin-icons解析为 SVG 组件默认带slidev-icon类→ UnoCSSpresetIcons提供类名式等价物——全部围绕同一份本地iconify-json/*数据源构建。理解这一点后你在幻灯片、主题、布局乃至 setup 文件中都能以最低成本复用任意开源图标集并且因为 SVG 在构建期内联产物天然支持离线放映与 PDF 导出。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Slidev 图标完全指南：在 Markdown 中直接调用任意开源图标库
Slidev 图标完全指南在 Markdown 中直接调用任意开源图标库【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev本文以 docs/features/icons.md 为主线讲解 Slidev 如何基于unplugin-icons与 Iconify 数据源让你安装对应iconify-json/*包后即可在 Markdown 幻灯片里直接以collection-icon /组件形式使用几乎全部开源图标集并结合 packages/slidev/node/vite/icons.ts、packages/slidev/node/setups/unocss.ts 等源码说明其默认类名slidev-icon、集合解析路径与i-工具类机制的底层实现帮助你在演示文稿中快速、可离线地嵌入并精细控制图标样式。1. 工作原理unplugin-icons Iconify 数据源Slidev 官方文档的原文定位是安装对应包之后你就能在 Markdown 中直接访问几乎所有开源图标集能力由unplugin-icons与 Iconify 提供。从源码结构看这条链路的组成如下packages/slidev/node/vite/icons.ts 中createIconsPlugin返回的就是unplugin-icons/vite的Icons插件并固定了两个默认配置defaultClass: slidev-icon每个被解析出的图标组件都会自动带上这个 classcollectionsNodeResolvePath: options.utils.iconsResolvePath指定图标集合包iconify-json/*的 Node 解析路径。iconsResolvePath在 packages/slidev/node/options.ts 中初始化为[resolved.clientRoot, ...resolved.roots].reverse()即优先在入口项目你的 slides 目录中查找已安装的图标集合包找不到时再回退到主题等上层 roots——这就是“你在自己的dependencies里装了哪个集合就能用哪个集合”的原因。该插件由 packages/slidev/node/vite/index.ts 在 Vite 插件链中统一挂载属于 Slidev 内置插件之一见 docs/custom/config-vite.md 中列出的内置插件清单。换句话说Markdown 中写一个mdi-account-circle /构建时unplugin-icons会把它转换成一个渲染 SVG 的 Vue 组件SVG 内容来自本地已安装的iconify-json/mdi包而非运行时请求任何 CDN——因此导出 PDF、离线放映场景下图标依然可用。2. 命名规范与常用示例图标命名遵循 Iconify 的{collection-name}-{icon-name}约定即组件名 集合名 连字符 图标名。文档给出的代表性示例mdi-account-circle /—— Material Design Icons对应iconify-json/mdicarbon-badge /—— Carbon Design 图标对应iconify-json/carbonuim-rocket /—— Unicons Monochrome对应iconify-json/uimtwemoji-cat-with-tears-of-joy /—— Twemoji对应iconify-json/twemojilogos-vue /—— SVG Logos对应iconify-json/logos。此外文档提示iconify-json/tabler对应 Tabler 等集合所有可用集合可通过 Icônes 与 Iconify 的在线目录检索本仓库 skills/slidev/references/style-icons.md 中也给出了mdi、carbon、logos、twemoji等常见集合的速查清单。值得一提的是Slidev 自身就在用这套机制仓库 pnpm-workspace.yaml 的iconscatalog 固定了iconify-json/carbon、iconify-json/mdi、iconify-json/ph、iconify-json/ri、iconify-json/svg-spinners五个集合的版本并被 packages/slidev/package.json 与 packages/client/package.json 引用——这既保证了 Slidev 客户端内置 UI 图标可正常构建也侧面说明了“装包即可用”这一前提在真实工程中的落地方式。3. 安装把图标集合放进 dependencies文档提供了全平台包管理器的一键安装命令把[the-collection-you-want]换成你要的集合名pnpm add iconify-json/[the-collection-you-want]npm install iconify-json/[the-collection-you-want]yarn add iconify-json/[the-collection-you-want]bun add iconify-json/[the-collection-you-want]deno add jsr:iconify-json/[the-collection-you-want]关键前提是包必须安装在你幻灯片入口所在项目的dependencies中与第 1 节iconsResolvePath的解析顺序一致。安装完成后无需任何额外注册直接在.md幻灯片或.vue布局/组件里书写collection-icon /即可。4. 样式控制像普通 HTML 元素一样写 class文档“Styling Icons”一节的原文示例是uim-rocket / uim-rocket classtext-3xl text-red-400 mx-2 / uim-rocket classtext-3xl text-orange-400 animate-ping /图标本质是一个内联 SVG 元素因此可以像其他 HTML 元素一样使用 UnoCSS 工具类控制大小、颜色、间距乃至动画。其基线行为由默认类名决定unplugin-icons注入的defaultClass: slidev-icon见 packages/slidev/node/vite/icons.ts对应 packages/client/styles/index.css 中的样式.slidev-icon { display: inline-block; vertical-align: sub; line-height: 1em; }这保证图标在文字行中呈内联块级显示并轻微下沉对齐与正文混排时不会出现明显错位。你的class属性会追加在这个默认类之上所以text-3xl、text-red-400、animate-ping等工具类都能直接生效——这正是官方示例中火箭图标能显示为 3xl 字号、红色、并做 ping 脉冲动画的机制。5. 进阶类名式图标i- 前缀与虚拟导入除了组件语法Slidev 的 UnoCSS 配置同样启用了图标能力。packages/slidev/node/setups/unocss.ts 在内置 UnoCSS 配置中注入了presetIcons并复用同一个utils.iconsResolvePath解析集合路径同时还内置了一个slidev集合将 packages/client/assets/logo.svg 暴露为slidev:logo图标。由此带来两种等价写法工具类写法在任意class中写i-{collection}-{icon}例如classi-carbon-logo-github。Slidev 官方脚手架模板 packages/slidev/template.md 与演示 demo/starter/slides.md 中都同时出现了carbon:edit /组件式与i-carbon:edit类名式两种用法i-carbon:edit中的冒号分隔是 UnoCSS 的等价写法虚拟模块导入在 TypeScript/Vue 文件中通过~icons/{collection}/{icon}导入组件。例如 docs/custom/config-context-menu.md 展示了在 setup 文件中import Icon3DCursor from ~icons/carbon/3d-cursor再把它注册进右键菜单项——这说明图标不仅是 Markdown 语法糖也可以作为普通 Vue 组件参与二次开发布局、全局组件、setup 文件等。6. 高级定制通过 slidev.icons 覆盖插件配置可选unplugin-icons的完整选项通过SlidevPluginOptions.icons透传。packages/types/src/vite.ts 中其类型为ArgumentsTypetypeof Icons[0]即unplugin-icons插件本身的全部配置项在 packages/slidev/node/vite/icons.ts 中...pluginOptions.icons展开在默认配置之后意味着你的自定义项可以覆盖默认值。写法是在项目vite.config.ts中import { defineConfig } from vite export default defineConfig({ slidev: { icons: { /* unplugin-icons 的选项如 defaultLang、compiler 等 */ }, }, })这与 docs/custom/config-vite.md 中“Configure Internal Plugins”一节属于同一机制。需要注意文档对该机制的明确警告这是高级功能覆盖内置插件的默认配置包括第 4 节提到的defaultClass可能导致应用行为变化仅在明确需要时再调整。7. 小结能力语法前提组件式图标Markdown/Vuemdi-account-circle /项目dependencies安装iconify-json/mdi工具类式图标classi-carbon-logo-github同上UnoCSSpresetIcons已内置启用TS/Vue 中导入组件import I from ~icons/carbon/3d-cursor同上样式控制classtext-3xl text-red-400 animate-ping依赖slidev-icon默认内联对齐 UnoCSS 工具类覆盖插件行为vite.config.ts中slidev.icons高级功能会覆盖默认配置整条链路——Markdown 组件语法 →unplugin-icons解析为 SVG 组件默认带slidev-icon类→ UnoCSSpresetIcons提供类名式等价物——全部围绕同一份本地iconify-json/*数据源构建。理解这一点后你在幻灯片、主题、布局乃至 setup 文件中都能以最低成本复用任意开源图标集并且因为 SVG 在构建期内联产物天然支持离线放映与 PDF 导出。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考