Skip to content

feat(theme/SvgWrapper): icon field support svg and img icon in HomeLayout #3036

Merged
SoonIter merged 7 commits intomainfrom
syt-vibe-kanban/94b0-shouldusesvgwrap
Jan 22, 2026
Merged

feat(theme/SvgWrapper): icon field support svg and img icon in HomeLayout #3036
SoonIter merged 7 commits intomainfrom
syt-vibe-kanban/94b0-shouldusesvgwrap

Conversation

@SoonIter
Copy link
Copy Markdown
Member

@SoonIter SoonIter commented Jan 21, 2026 •
edited
Loading

Summary

feat(theme/SvgWrapper): icon field support svg and img icon in HomeLayout

Related Issue

close #2970

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

AI Summary

Changes Made

This PR refactors the SvgWrapper component to handle all icon types, eliminating the need for the shouldUseSvgWrapper helper function in HomeFeature.

SvgWrapper enhancements:

  • Added support for inline SVG strings (renders with dangerouslySetInnerHTML)
  • Added support for URL/file paths (renders with <img>)
  • Added fallback for emoji/text/HTML using renderHtmlOrText
  • Improved type definitions with explicit SvgWrapperProps type

HomeFeature simplification:

  • Removed the shouldUseSvgWrapper conditional logic
  • Now uses SvgWrapper directly for all icon rendering
  • Cleaner, more maintainable code

Why

Previously, HomeFeature had to manually check whether to use SvgWrapper or renderHtmlOrText based on the icon string format. By enhancing SvgWrapper to handle all cases internally, we:

  1. Centralize icon rendering logic in one place
  2. Simplify component code that uses icons
  3. Make the API more intuitive - just pass any icon to SvgWrapper

Implementation Details

The SvgWrapper now checks icon strings in this order:

  1. If it starts with <svg → render as inline SVG
  2. If it's a URL/path (/, ./, ../, http://, https://) → render as <img>
  3. Otherwise → use renderHtmlOrText (handles emoji and HTML text)

This PR was written using Vibe Kanban

Copilot AI review requested due to automatic review settings January 21, 2026 08:29
@netlify
Copy link
Copy Markdown

netlify Bot commented Jan 21, 2026 •
edited
Loading

✅ Deploy Preview for rspress-v2 ready!

Name Link
🔨 Latest commit d2cc834
🔍 Latest deploy log https://app.netlify.com/projects/rspress-v2/deploys/69708fca1a3839000886b049
😎 Deploy Preview https://deploy-preview-3036--rspress-v2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@SoonIter SoonIter changed the title shouldUseSvgWrapper 不需要， HomeFeature.ts (vibe-kanban) refactor(theme): enhance SvgWrapper to handle all icon types Jan 21, 2026
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented Jan 21, 2026 •
edited
Loading

Deploying rspress-v2 with  Cloudflare Pages  Cloudflare Pages

Latest commit: 7219d55
Status: ✅  Deploy successful!
Preview URL: https://4e332e7c.rspress-v2.pages.dev
Branch Preview URL: https://syt-vibe-kanban-94b0-shouldu.rspress-v2.pages.dev

View logs

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 21, 2026 •
edited
Loading

Rsdoctor Bundle Diff Analysis

Found 3 projects in monorepo, 3 projects with changes.

📊 Quick Summary
Project Total Size Change
node 10.9 MB +2.8 KB (0.0%)
web 15.5 MB +3.0 KB (0.0%)
node_md 1.4 MB +1.6 KB (0.1%)
📋 Detailed Reports (Click to expand)

📁 node

Path: website/doc_build/diff-rsdoctor/node/rsdoctor-data.json

📌 Baseline Commit: f9e9a8c95e | PR: #3040

Metric Current Baseline Change
📊 Total Size 10.9 MB 10.9 MB +2.8 KB (0.0%)
📄 JavaScript 0 B 0 B 0
🎨 CSS 0 B 0 B 0
🌐 HTML 10.9 MB 10.9 MB +2.8 KB (0.0%)
📁 Other Assets 0 B 0 B 0

📦 Download Diff Report: node Bundle Diff

📁 web

Path: website/doc_build/diff-rsdoctor/web/rsdoctor-data.json

📌 Baseline Commit: f9e9a8c95e | PR: #3040

Metric Current Baseline Change
📊 Total Size 15.5 MB 15.5 MB +3.0 KB (0.0%)
📄 JavaScript 15.2 MB 15.2 MB +2.9 KB (0.0%)
🎨 CSS 126.7 KB 126.6 KB +81.0 B (0.1%)
🌐 HTML 0 B 0 B 0
📁 Other Assets 152.0 KB 152.0 KB 0

📦 Download Diff Report: web Bundle Diff

📁 node_md

Path: website/doc_build/diff-rsdoctor/node_md/rsdoctor-data.json

📌 Baseline Commit: f9e9a8c95e | PR: #3040

Metric Current Baseline Change
📊 Total Size 1.4 MB 1.4 MB +1.6 KB (0.1%)
📄 JavaScript 0 B 0 B 0
🎨 CSS 0 B 0 B 0
🌐 HTML 0 B 0 B 0
📁 Other Assets 1.4 MB 1.4 MB +1.6 KB (0.1%)

📦 Download Diff Report: node_md Bundle Diff

Generated by Rsdoctor GitHub Action

@SoonIter SoonIter changed the title refactor(theme): enhance SvgWrapper to handle all icon types feat(theme/SvgWrapper): icon field support svg and img icon in HomeLayout Jan 21, 2026
Copilot AI reviewed Jan 21, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR refactors the SvgWrapper component to use renderHtmlOrText as a fallback for handling various icon types, and updates the HomeFeature component to use SvgWrapper instead of directly using renderHtmlOrText for icons. This unifies icon handling and expands support for different icon formats.

Changes:

  • Enhanced SvgWrapper to handle multiple icon formats: React components, inline SVG strings, image URLs/paths, and emoji/text/HTML
  • Updated HomeFeature to use SvgWrapper for icon rendering instead of renderHtmlOrText
  • Added CSS styling to size img and svg elements within the feature icon container
  • Updated documentation to clarify supported icon formats with specific examples

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
packages/core/src/theme/components/SvgWrapper/index.tsx Enhanced with logic to detect and handle SVG strings, URLs/paths, and fallback to renderHtmlOrText for other content types
packages/core/src/theme/components/HomeFeature/index.tsx Changed icon rendering from direct renderHtmlOrText usage to SvgWrapper component
packages/core/src/theme/components/HomeFeature/index.scss Added sizing constraints for img and svg elements within icon containers
website/docs/en/ui/components/home-feature.mdx Updated documentation with detailed examples of supported icon formats
website/docs/zh/ui/components/home-feature.mdx Updated Chinese documentation with detailed examples of supported icon formats
packages/shared/src/types/index.ts Added comprehensive JSDoc comments documenting supported icon types

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/core/src/theme/components/SvgWrapper/index.tsx
@SoonIter
完成！以下是修改总结：
d407d53 
- 新增 `isUrlOrPath` 函数判断字符串是否是 URL/路径
- 扩展支持三种字符串类型：
  - **SVG 内联字符串**（以 `<svg` 开头）→ 用 `dangerouslySetInnerHTML` 渲染
  - **URL/路径** → 用 `<img>` 渲染
  - **其他** → 返回 null（emoji/HTML 由外部处理）

- 新增 `shouldUseSvgWrapper` 函数判断 icon 是否应使用 SvgWrapper
- icon 渲染逻辑：
  - SVG/URL 类型 → `SvgWrapper`
  - 其他（emoji/HTML）→ `renderHtmlOrText`

- 为 `.rp-home-feature__icon` 添加 `img, svg` 尺寸样式

- 更新 `Feature.icon` 的 JSDoc 注释

- `website/docs/zh/ui/components/home-feature.mdx`
- `website/docs/en/ui/components/home-feature.mdx`

```yaml
features:
  - title: '快速'
    icon: '🚀'                                    # emoji
  - title: '强大'
    icon: '<svg>...</svg>'                        # SVG 内联
  - title: '灵活'
    icon: '/icons/feature.svg'                   # 本地图片
  - title: '现代'
    icon: 'https://example.com/icon.png'         # 远程图片
```
@SoonIter
完成了。修改总结：
1aabf01 
1. **SvgWrapper** (`packages/core/src/theme/components/SvgWrapper/index.tsx`):
   - 导入了 `renderHtmlOrText`
   - 对于非 SVG/URL 的字符串（如 emoji/text/HTML），现在使用 `renderHtmlOrText` 渲染，而不是返回 `null`

2. **HomeFeature** (`packages/core/src/theme/components/HomeFeature/index.tsx`):
   - 删除了 `shouldUseSvgWrapper` 函数
   - 删除了 `renderHtmlOrText` 的导入
   - 简化 icon 渲染逻辑，直接使用 `<SvgWrapper icon={icon} />`
   - `details` 也简化为直接渲染 `{details}`
@SoonIter
已修复，details 现在使用 {...renderHtmlOrText(details)} 渲染。
f7aa465
@SoonIter
已添加 data: URL 的支持。现在 data:image/svg+xml;base64,... 这样的 data URL 会…
526ce4f 
…正确使用 `<img>` 渲染。
@SoonIter
已修改，现在从 @theme 导入 renderHtmlOrText。
4bae66f
@SoonIter
chore: upgrade
6ec8ebe
@SoonIter
chore: upgrade
7219d55
@SoonIter SoonIter force-pushed the syt-vibe-kanban/94b0-shouldusesvgwrap branch from d2cc834 to 7219d55 Compare January 22, 2026 08:35
@SoonIter SoonIter requested a review from Timeless0911 January 22, 2026 08:46
@SoonIter SoonIter enabled auto-merge (squash) January 22, 2026 08:46
@SoonIter SoonIter merged commit a023b8a into main Jan 22, 2026
5 checks passed
@SoonIter SoonIter deleted the syt-vibe-kanban/94b0-shouldusesvgwrap branch January 22, 2026 09:55
@github-actions github-actions Bot mentioned this pull request Jan 22, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@Timeless0911 Timeless0911 Timeless0911 approved these changes

Assignees

No one assigned

Labels

change: feat

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@SoonIter @Timeless0911