home / skills / forge-town / skills / check-svg

check-svg skill

safe

This skill enforces SVG usage as isolated components imported from a central icons folder to improve maintainability and consistency.

npx playbooks add skill forge-town/skills --skill check-svg

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.7 KB

---
name: check-svg
description: 检查项目中 SVG 的使用是否符合最佳实践：SVG 需作为独立组件（非内联），并通过 import 使用。
---

# SVG 组件检查 Skill

## 目标

- 确保项目中没有内联的 `<svg>` 出现在业务组件文件中。
- 确保所有 SVG 被封装为独立的 React/TS 组件并从组件中导入使用。

## 检查项（必须全部满足）

1. 禁止在业务组件（例如 `.tsx`, `.jsx` 文件）内直接写 `<svg>` 标签。
2. 所有 SVG 必须封装为组件（按项目约定放置，例如 `src/components/icons/` 或 `components/icons/`）。
3. 使用图标时应通过 `import IconName from '.../icons/IconName'` 引入并以 `<IconName />` 使用。

## 检查方法（审查者/工具参考）

- 手动审查：在变更的文件中查找 `<svg` 标签，确认是否为内联；若是内联则要求迁移。
- 推荐查找正则（示例，供人工或工具使用）：
  - 内联 SVG 检测：`<svg[^>]*>[\s\S]*?<\/svg>`

- 替换建议：将内联 `<svg>` 内容提取为 `IconName.tsx`（PascalCase），放入 `components/icons/`，并在原处用 `import` + `<IconName />` 替换，同时把原有的 `width/height/fill/className` 等迁移为 props。

## 示例

不合格（示例）

```tsx
// Button.tsx
export const Button = () => (
  <button>
    <svg viewBox="0 0 24 24">
      <path d="..." />
    </svg>
  </button>
);
```

## 复核准则

- 检查是否存在内联 `<svg>`；若存在，请要求将其抽离为组件并更新使用处。
- 检查导入路径与图标目录是否符合团队约定。

## 参考

- 项目已有最佳实践：[skills/svg-icon-best-practice/SKILL.md](../svg-icon-best-practice/SKILL.md)

Overview

This skill checks that SVG usage in the codebase follows component-based best practices: SVG must not be inlined inside business components and must be used as imported React/TypeScript components. It enforces extraction of inline <svg> markup into dedicated icon components and ensures imports follow the project convention. The goal is consistent, reusable, and testable icon handling across the app.

How this skill works

The skill inspects changed or existing UI files (.tsx/.jsx) for inline <svg> tags and flags any occurrences. It also verifies that icons are implemented as separate components located in the agreed icon directory and that usage is done via import and <IconName /> JSX. For reviewers and automation, it provides a regex suggestion to find inline SVG and a recommended migration pattern to extract icons into PascalCase components with props for size and styling.

When to use it

During code review to detect inline <svg> in business components (.tsx/.jsx).
As a pre-commit or CI check to prevent new inline SVGs from entering the repo.
When standardizing icon implementation or migrating a codebase to component-based icons.

Best practices

Never place raw <svg> markup directly inside business components; extract it to an icon component.
Store icon components in the agreed directory (for example components/icons/ or src/components/icons/) and use PascalCase filenames.
Import icons with explicit imports (import IconName from '.../icons/IconName') and use them as <IconName />.
Expose width, height, fill, className and other customizations as props on the icon component instead of hardcoding attributes.
Apply a simple regex check (e.g. <svg[^>]*>[\s\S]*?<\/svg>) in reviews or tooling to find inline SVGs quickly.

Example use cases

Reviewing a feature branch to ensure no inline SVGs were added inside .tsx components.
Adding a CI lint step that fails the build if inline <svg> patterns are detected.
Refactoring a button component that currently contains inline SVG into a Button and IconName component pair.
Onboarding contributors: provide the icon directory and import pattern so people add icons consistently.

FAQ

What if an SVG is used only once and feels simpler inline?

Even single-use SVGs should be extracted. Components improve consistency, allow props for styling, and make future reuse or updates safer.

How should I handle SVG attributes like width, height, or fill when extracting?

Move them to the icon component props with sensible defaults so callers can override size and color via props or className.