SVG Icon Management Specification

Task Objectives

• This Skill is used to: unify the storage, encapsulation and usage of SVG icons in React TypeScript projects
• Capabilities include: converting SVG to React components, icon migration process, and usage specification instructions
• Trigger conditions: users need to "unify SVG icon management", "refactor icon code", "create icon specifications", "migrate inline SVG"

Preparations

• Dependency Notes: No external dependencies, uses built-in capabilities of React + TypeScript
• Directory Structure Preparation: Ensure the

  components/

  directory exists in the project, create the

  components/icons/

  subdirectory
  bash

  mkdir -p src/components/icons

• best-practice-examples/assets/

  - Business component examples

• best-practice-examples/components/icons/

  - Icon component examples

Quick Start (Execution Instructions for Agents)

Step 1: Scan and Identify Icons

1. Use glob_file or grep_file to search all .tsx/.jsx files in the project
2. Search for code containing <svg> tags in these files
3. Record the locations (file paths, line numbers) of all found inline SVGs
4. Read these files and extract the complete SVG code

Step 2: Create Icon Components

1. For each extracted SVG:
   - Determine the icon's function and generate an appropriate PascalCase component name
   - Create a corresponding .tsx file in the src/components/icons/ directory
   - Write component code following the template in icon-component-template.md
   - Ensure TypeScript type definitions are included

Step 3: Update Business Components

1. For each file containing inline SVG:
   - Add an import statement to import the newly created icon component
   - Delete the original <svg> tag
   - Replace it with the <IconName /> component call
   - Migrate original attributes (width, height, fill, etc.)

Step 4: Verify Completion

1. Confirm all inline SVGs have been replaced with components
2. Confirm all icon components are stored in the src/components/icons/ directory
3. Confirm all component filenames and naming comply with specifications
4. Confirm TypeScript compilation has no errors

Operation Steps

1. Create Icon Directory Structure

• Create the

  components/icons/

  directory (if it does not exist)
• This directory will store all icon components

2. Extract and Encapsulate SVG as React Components

2.1 Identify and Read Icons to Migrate

1. Use a file search tool to find all

   .tsx

   and

   .jsx

   files in the project
2. Search for inline

   <svg>

   tags in these files
3. Record the file paths and line numbers of all files containing inline SVG
4. Read these files and extract the complete SVG code
5. Identify the purpose of each SVG (button icon, navigation icon, etc.)

• Located all inline SVG positions
• Recorded the contextual purpose of each SVG
• Extracted complete SVG code (including viewBox, path, etc.)

2.2 Convert SVG to React Components

1. Read and Parse SVG Code: Obtain the complete

   <svg>

   tag and its content
2. Convert Filename: Convert the original filename or functional description to PascalCase format
3. Create Component File: Create a

   .tsx

   file in the

   src/components/icons/

   directory
4. Write Component Code: Refer to references/icon-component-template.md and write the component following the template
5. Save File: Save the created component to the

   src/components/icons/

   directory

Input: Arrow SVG extracted from Button.tsx
  ↓
Step 1: Read SVG code <svg viewBox="0 0 24 24"><path d="..." /></svg>
  ↓
Step 2: Convert filename to ArrowRight
  ↓
Step 3: Create src/components/icons/ArrowRight.tsx
  ↓
Step 4: Write component code referring to the template
  ↓
Step 5: Save the file

3. Update Business Components

3.1 Replace Inline SVG

1. Locate Inline SVG Code: Find the

   <svg>

   tag in the component
2. Record Original Attributes: Note the original values of attributes such as width, height, fill, className
3. Add Import Statement: Add

   import IconName from '@/components/icons/IconName'

   at the top of the file
4. Replace SVG Tag: Delete the

   <svg>

   tag and its content, replace it with

   <IconName />

5. Migrate Attributes: Pass the original attributes as props to the new component (e.g.,

   <IconName width={24} height={24} />

   )
6. Verify Functionality: Confirm the component's functionality and style remain consistent after replacement

3.2 Use Encapsulated Icon Components

• Import icon components from

  components/icons

• Pass props (size, color, etc.) as needed
• Support custom styles via className

4. Icon Migration Checklist

• Pre-migration environment checks
• Step-by-step migration operation guide
• Post-migration functionality verification
• Common problem solutions

5. Code Review and Specification Check

• ❌ Directly writing SVG code in business components is prohibited
• ❌ Storing independent SVG component files outside the icons directory is prohibited
• ❌ Creating icon components outside the non components/icons directory is prohibited

• ✅ All SVG icons must be encapsulated as React components
• ✅ Components must be stored in the

  components/icons/

  directory
• ✅ Must be imported and used from

  components/icons

• ✅ Components must include TypeScript type definitions
• ✅ Support configuration of common attributes via props

Resource Index

• Best Practice Examples: See best-practice-examples/ (actual project examples, including components and assets)
  • best-practice-examples/components/icons/ - Icon component examples
  • best-practice-examples/assets/ - Business component examples
• Component Template: See references/icon-component-template.md (standard React icon component template, attribute configuration, common variants)
• Migration Checklist: See references/migration-checklist.md (complete migration check items, problem solutions)
• Best Practice Documentation: See references/best-practice-examples.md (best practices and usage instructions based on actual projects)

Notes

• Only read reference documents when creating new icon components or migrating existing icons
• Agents already have the ability to understand and convert SVG code, no automation scripts required
• Retain the viewBox and path data of SVG during conversion to ensure the icon shape remains unchanged
• Default fill="currentColor" to support color control via CSS
• Use TypeScript to ensure type safety and avoid runtime errors
• The best-practice-examples/ directory contains actual project examples for reference

Usage Examples

Scenario 1: Migrate Existing Inline SVG

1. Read the SVG code in the Button component
2. Refer to references/icon-component-template.md to create ArrowRight.tsx
3. Refer to examples in best-practice-examples/components/icons/
4. Replace the inline SVG in the Button component
5. Test and verify the display effect

Scenario 2: Create New Icon Specifications

1. Create the components/icons/ directory
2. Refer to references/icon-component-template.md to create icon components
3. Refer to the barrel export method in best-practice-examples/components/icons/
4. Promote a unified icon usage method in the project

Scenario 3: Batch Migrate Icons

1. Scan and identify all inline SVG positions
2. Migrate one by one according to references/migration-checklist.md
3. Replace all inline SVGs in business components
4. Perform complete regression testing