diff --git a/docs/markdown.md b/docs/markdown.md
index 4f2f1db..77d41cb 100644
--- a/docs/markdown.md
+++ b/docs/markdown.md
@@ -80,6 +80,22 @@
 
 图标会渲染为 `<icon class="icon-attack"></icon>` 形式。
 
+### 支持多种图片格式
+
+默认情况下，`:[icon-name]` 会查找 `.png` 文件。你也可以显式指定其他支持的格式：
+
+```markdown
+:[attack]           <!-- 查找 attack.png -->
+:[attack.svg]       <!-- 查找 attack.svg -->
+:[shield.gif]       <!-- 查找 shield.gif -->
+:[photo.jpg]        <!-- 查找 photo.jpg -->
+:[icon.webp]        <!-- 查找 icon.webp -->
+```
+
+**支持的扩展名：** `.svg`、`.png`、`.gif`、`.jpg`、`.jpeg`、`.webp`
+
+**注意：** CSS class 名称始终使用不带扩展名的图标名称（如 `icon-attack`），方便统一样式控制。
+
 ### 配置图标前缀
 
 可通过 `iconPath` 属性指定图标目录：
diff --git a/src/markdown/index.ts b/src/markdown/index.ts
index fe02629..e861f5a 100644
--- a/src/markdown/index.ts
+++ b/src/markdown/index.ts
@@ -36,11 +36,31 @@ const marked = new Marked()
     {
         level: 'inline',
         marker: ':',
-        // :[blah] becomes <i class="icon icon-blah"></i>
+        // :[icon] 或 :[icon.ext] 语法
+        // 支持的扩展名: .svg, .png, .gif, .jpg, .jpeg, .webp
+        // 如果不指定扩展名，默认为 .png
         renderer(token) {
             if (!token.meta.name) {
-                const style = globalIconPrefix ? `style="--icon-src: url('${globalIconPrefix}/${token.text}.png')"` : '';
-                return `<icon ${style} class="icon-${token.text} ${token.attrs?.class || ""}"></icon>`;
+                const iconText = token.text || '';
+                
+                // 已知支持的图片扩展名
+                const supportedExtensions = ['svg', 'png', 'gif', 'jpg', 'jpeg', 'webp'];
+                
+                // 检查是否包含扩展名（查找最后一个点）
+                let iconName = iconText;
+                let extension = 'png'; // 默认扩展名
+                
+                const lastDotIndex = iconName.lastIndexOf('.');
+                if (lastDotIndex > 0) {
+                    const potentialExt = iconName.slice(lastDotIndex + 1).toLowerCase();
+                    if (supportedExtensions.includes(potentialExt)) {
+                        extension = potentialExt;
+                        iconName = iconName.slice(0, lastDotIndex);
+                    }
+                }
+                
+                const style = globalIconPrefix ? `style="--icon-src: url('${globalIconPrefix}/${iconName}.${extension}')"` : '';
+                return `<icon ${style} class="icon-${iconName} ${token.attrs?.class || ""}"></icon>`;
             }
             return false;
         }