图标与图片

视觉元素让演示更直观。Slidev 内置 Iconify 图标系统与图片组件，图标按需加载、图片可本地可远程，全部用简单语法即可控制。

Iconify 图标集

Slidev 内置 Iconify（100+ 开源图标集、20 万+ 图标）。使用 icon 内置组件引入：

::icon{name="mdi:github"}
::icon{name="carbon:edit"}
::icon{name="logos:vue"}

• 图标名格式：图标集:图标名
• 常用图标集：mdi（Material Design）、carbon、logos（品牌 Logo）、twemoji、emojione
• 图标按需加载，只打包用到的图标

图标属性

::icon{name="mdi:rocket" class="w-6 h-6 text-green-500"}
::icon{name="carbon:edit" class="text-4xl"}

属性	作用
name	图标名（必填）
class	UnoCSS 类控制大小与颜色
width / height	直接指定尺寸

浏览器中查找图标

访问 Iconify 官网 搜索图标，复制 集名:图标名 即可直接使用。

本地图片引用

本地图片放入 public/ 目录，按根路径引用：

my-deck/
└── public/
    ├── logo.png
    └── demo/
        └── screenshot.png

![Logo](/logo.png)

![截图](/demo/screenshot.png)

• public/ 下的资源以 / 开头引用
• 支持 png、jpg、svg、gif、webp 等常见格式
• 构建后自动复制到 dist/

远程图片

直接写 URL 即可加载远程图片：

![架构图](https://example.com/architecture.png)

远程图片适合引用在线资源，但演示现场依赖网络，重要图片建议下载到 public/ 本地化。

内置组件 v-img

v-img 是 Slidev 内置的图片组件，提供尺寸、圆角、滤镜等增强能力：

::v-img{src="/demo/screenshot.png" width="600"}

::v-img{src="/logo.png" class="rounded-xl shadow"}

::v-img{src="https://example.com/photo.jpg" alt="示例照片"}

常用属性

属性	作用
src	图片地址（本地或远程）
width / height	显示尺寸
alt	替代文本
class	附加样式类（圆角、阴影等）

也可以按普通 Markdown 图片 + 类名方式使用：

![描述](/logo.png){class="rounded-full w-24 h-24"}

组合示例

图标 + 文字标题

# ::icon{name="mdi:rocket" class="inline"} Slidev 起步

图片布局

::div{class="grid grid-cols-2 gap-4"}

::v-img{src="/demo/1.png" class="rounded-lg shadow"}

::v-img{src="/demo/2.png" class="rounded-lg shadow"}

::

图标与图片速查

场景	写法
引入图标	::icon{name="mdi:github"}
本地图片	
远程图片	
带样式图片	::v-img{src="/logo.png" class="rounded-xl"}
图片加尺寸	::v-img{src="/x.png" width="600"}
行内小图标	::icon{name="carbon:edit" class="inline"}

使用建议

实践	说明
图片本地化	重要图片下载到 public/，避免现场断网
图标统一来源	同一演示尽量用同一图标集保持风格
控制体积	大图先用工具压缩，避免幻灯片加载卡顿
配合动画	图片与图标可加 v-click 分步出现

图标与图片配合 MDC 与布局类，能快速搭建信息丰富的视觉页面，让演示告别"纯文字"。