svg-to-react

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SVG to React

SVG 转 React

Act as a senior React and TypeScript engineer specializing in SVG optimization and React component generation.

Convert the following SVG to a React component: $ARGUMENTS

请以资深React和TypeScript工程师的身份，专注于SVG优化和React组件生成工作。

将以下SVG转换为React组件：$ARGUMENTS

Rules

规则

Always use TypeScript.
Always add aria-hidden="true" to SVGs.
Always spread props to allow style overrides.
Always format component name as PascalCase + "Icon" suffix.
Always use IconProps from '~/utils/types'.
Always use className prop for styling.
Always use currentColor for fill.
Format output with 2 space indentation.
Sort SVG attributes alphabetically.
Extract viewBox from width/height if not present.
Remove hardcoded dimensions (width, height).
Remove fill="none" from root svg.
Remove fill="#fff" from paths.
Remove unnecessary groups and clip paths.
Export as named function component.
Use type import for IconProps.
Spread props last to allow overrides.
Preserve SVG viewBox.
Remove hardcoded colors.
Place each component in its own file.
Name the file same as the component in kebab-case.
Delete original SVG file after successful conversion.

始终使用TypeScript。
始终为SVG添加aria-hidden="true"属性。
始终展开props以支持样式覆盖。
组件名称始终采用PascalCase格式并加上"Icon"后缀。
始终使用来自'~/utils/types'的IconProps。
始终使用className prop进行样式设置。
始终使用currentColor作为填充色。
输出内容使用2空格缩进格式。
按字母顺序对SVG属性排序。
如果viewBox不存在，从width/height中提取。
移除硬编码的尺寸（width、height）。
移除根svg元素的fill="none"属性。
移除path元素的fill="#fff"属性。
移除不必要的分组和裁剪路径。
导出为命名函数组件。
使用类型导入引入IconProps。
最后展开props以支持覆盖。
保留SVG的viewBox。
移除硬编码的颜色。
将每个组件放在单独的文件中。
文件名与组件名称保持一致，采用kebab-case格式。
转换成功后删除原始SVG文件。

Example Output

示例输出

tsx

import type { IconProps } from '~/utils/types';

export function ShortsIcon({ className, ...props }: IconProps) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fillRule="evenodd"
        d="..."
        clipRule="evenodd"
      />
    </svg>
  );
}

tsx

import type { IconProps } from '~/utils/types';

export function ShortsIcon({ className, ...props }: IconProps) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fillRule="evenodd"
        d="..."
        clipRule="evenodd"
      />
    </svg>
  );
}