SVG 变形图标技术：基于三线结构的无缝图标动画实现指南

morphing-icons by raphaelsalaja/userinterface-wiki

120 周安装量

633 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill morphing-icons

UI组件库前端优化动画

🇨🇳中文介绍

变形图标

构建通过实际形状变换而非交叉淡入淡出实现变形的图标。任何图标都可以变形为任何其他图标，因为它们共享相同的底层三线结构。

核心概念

每个图标完全由三条 SVG 线段构成。需要较少线条的图标会将多余的线条折叠到不可见的中心点。这一约束使得任意两个图标之间能够实现无缝变形。

架构

1. 线段定义

每条线段都有坐标和可选的不透明度：

interface IconLine {
  x1: number;
  y1: number;
  x2: number;
  y2: number;
  opacity?: number;
}

2. 折叠线段

需要少于 3 条线的图标使用折叠线段——位于中心点的零长度线段：

const CENTER = 7; // 14x14 视口的中心点

const collapsed: IconLine = {
  x1: CENTER,
  y1: CENTER,
  x2: CENTER,
  y2: CENTER,
  opacity: 0,
};

3. 图标定义

每个图标恰好有 3 条线段，可选旋转角度，以及可选分组：

interface IconDefinition {
  lines: [IconLine, IconLine, IconLine];
  rotation?: number;
  group?: string;
}

4. 旋转分组

共享同一个 group 的图标在它们之间切换时会带动画旋转。没有匹配分组的图标会立即跳转到新的旋转角度：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

`morphing-three-lines`

每个图标必须恰好使用 3 条线段。不能多，也不能少。

const checkIcon = {
  lines: [
    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },
    { x1: 5.5, y1: 11, x2: 12, y2: 3 },
  ], // 只有 2 条线段
};

const checkIcon = {
  lines: [
    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },
    { x1: 5.5, y1: 11, x2: 12, y2: 3 },
    collapsed, // 第三条线段折叠
  ],
};

`morphing-use-collapsed`

未使用的线段必须使用折叠常量，而不是省略或设为 null。

const minusIcon = {
  lines: [
    { x1: 2, y1: 7, x2: 12, y2: 7 },
    null,
    null,
  ],
};

const minusIcon = {
  lines: [
    { x1: 2, y1: 7, x2: 12, y2: 7 },
    collapsed,
    collapsed,
  ],
};

`morphing-consistent-viewbox`

所有图标必须使用相同的 viewBox（推荐 14x14）。

// 混合使用不同比例的视口
const icon1 = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] }; // 14x14
const icon2 = { lines: [{ x1: 4, y1: 14, x2: 24, y2: 14 }, ...] }; // 28x28

const VIEWBOX_SIZE = 14;
const CENTER = 7;
// 所有坐标都在 0-14 范围内

`morphing-group-variants`

属于旋转变体的图标必须共享相同的分组和基础线段定义。

// 箭头使用了不同的线段定义
const arrowRight = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] };
const arrowDown = { lines: [{ x1: 7, y1: 2, x2: 7, y2: 12 }, ...] }; // 不同！

const arrowLines: [IconLine, IconLine, IconLine] = [
  { x1: 2, y1: 7, x2: 12, y2: 7 },
  { x1: 7.5, y1: 2.5, x2: 12, y2: 7 },
  { x1: 7.5, y1: 11.5, x2: 12, y2: 7 },
];

const icons = {
  "arrow-right": { lines: arrowLines, rotation: 0, group: "arrow" },
  "arrow-down": { lines: arrowLines, rotation: 90, group: "arrow" },
  "arrow-left": { lines: arrowLines, rotation: 180, group: "arrow" },
  "arrow-up": { lines: arrowLines, rotation: -90, group: "arrow" },
};

`morphing-spring-rotation`

分组图标之间的旋转应使用弹簧物理效果以实现自然运动。

<motion.g animate={{ rotate: rotation }} transition={{ duration: 0.3 }} />

const rotation = useSpring(definition.rotation ?? 0, activeTransition);

<motion.g style={{ rotate: rotation, transformOrigin: "center" }} />

`morphing-reduced-motion`

通过禁用动画来尊重 prefers-reduced-motion 设置。

function MorphingIcon({ icon }: Props) {
  return <motion.line animate={...} transition={{ duration: 0.4 }} />;
}

function MorphingIcon({ icon }: Props) {
  const reducedMotion = useReducedMotion() ?? false;
  const activeTransition = reducedMotion ? { duration: 0 } : transition;
  
  return <motion.line animate={...} transition={activeTransition} />;
}

`morphing-jump-non-grouped`

当在不属于同一分组的图标之间切换时，旋转应立即跳转。

// 无论分组如何，总是动画旋转
useEffect(() => {
  rotation.set(definition.rotation ?? 0);
}, [definition]);

useEffect(() => {
  if (shouldRotate) {
    rotation.set(definition.rotation ?? 0); // 动画
  } else {
    rotation.jump(definition.rotation ?? 0); // 立即
  }
}, [definition, shouldRotate]);

`morphing-strokelinecap-round`

线段应使用 strokeLinecap="round" 以获得圆滑的端点。

<motion.line strokeLinecap="butt" />

<motion.line strokeLinecap="round" />

`morphing-aria-hidden`

图标 SVG 应为 aria-hidden，因为它们是装饰性的。

<svg width={size} height={size}>...</svg>

<svg width={size} height={size} aria-hidden="true">...</svg>

双线图标（勾选、减号、等号、V形符号）

使用一条或两条折叠线段：

const check = {
  lines: [
    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },
    { x1: 5.5, y1: 11, x2: 12, y2: 3 },
    collapsed,
  ],
};

三线图标（菜单、星号、播放）

使用全部三条线段：

const menu = {
  lines: [
    { x1: 2, y1: 3.5, x2: 12, y2: 3.5 },
    { x1: 2, y1: 7, x2: 12, y2: 7 },
    { x1: 2, y1: 10.5, x2: 12, y2: 10.5 },
  ],
};

点状图标（更多、抓取）

使用零长度线段作为点：

const more = {
  lines: [
    { x1: 3, y1: 7, x2: 3, y2: 7 },
    { x1: 7, y1: 7, x2: 7, y2: 7 },
    { x1: 11, y1: 7, x2: 11, y2: 7 },
  ],
};

规则	数量	严重程度
`morphing-three-lines`	2	高
`morphing-group-variants`	1	高
`morphing-reduced-motion`	1	中

🇺🇸English

Morphing Icons

Build icons that transform through actual shape transformation, not crossfades. Any icon can morph into any other because they share the same underlying 3-line structure.

Core Concept

Every icon is composed of exactly three SVG lines. Icons that need fewer lines collapse the extras to invisible center points. This constraint enables seamless morphing between any two icons.

Architecture

1. Line Definition

Each line has coordinates and optional opacity:

interface IconLine {
  x1: number;
  y1: number;
  x2: number;
  y2: number;
  opacity?: number;
}

2. Collapsed Lines

Icons needing fewer than 3 lines use collapsed lines—zero-length lines at the center:

const CENTER = 7; // Center of 14x14 viewbox

const collapsed: IconLine = {
  x1: CENTER,
  y1: CENTER,
  x2: CENTER,
  y2: CENTER,
  opacity: 0,
};

3. Icon Definition

Each icon has exactly 3 lines, optional rotation, and optional group:

interface IconDefinition {
  lines: [IconLine, IconLine, IconLine];
  rotation?: number;
  group?: string;
}

4. Rotation Groups

Icons sharing a group animate rotation when transitioning between them. Icons without matching groups jump to the new rotation instantly:

// These rotate smoothly between each other
{ lines: plusLines, rotation: 0, group: "plus-cross" }   // plus
{ lines: plusLines, rotation: 45, group: "plus-cross" }  // cross

// These rotate smoothly between each other
{ lines: arrowLines, rotation: 0, group: "arrow" }       // arrow-right
{ lines: arrowLines, rotation: 90, group: "arrow" }      // arrow-down
{ lines: arrowLines, rotation: 180, group: "arrow" }     // arrow-left
{ lines: arrowLines, rotation: -90, group: "arrow" }     // arrow-up

Implementation Rules

`morphing-three-lines`

Every icon MUST use exactly 3 lines. No more, no fewer.

Fail:

const checkIcon = {
  lines: [
    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },
    { x1: 5.5, y1: 11, x2: 12, y2: 3 },
  ], // Only 2 lines
};

Pass:

const checkIcon = {
  lines: [
    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },
    { x1: 5.5, y1: 11, x2: 12, y2: 3 },
    collapsed, // Third line collapsed
  ],
};

`morphing-use-collapsed`

Unused lines must use the collapsed constant, not omission or null.

Fail:

const minusIcon = {
  lines: [
    { x1: 2, y1: 7, x2: 12, y2: 7 },
    null,
    null,
  ],
};

Pass:

const minusIcon = {
  lines: [
    { x1: 2, y1: 7, x2: 12, y2: 7 },
    collapsed,
    collapsed,
  ],
};

`morphing-consistent-viewbox`

All icons must use the same viewBox (14x14 recommended).

Fail:

// Mixing viewbox scales
const icon1 = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] }; // 14x14
const icon2 = { lines: [{ x1: 4, y1: 14, x2: 24, y2: 14 }, ...] }; // 28x28

Pass:

const VIEWBOX_SIZE = 14;
const CENTER = 7;
// All coordinates within 0-14 range

`morphing-group-variants`

Icons that are rotational variants MUST share the same group and base lines.

Fail:

// Different line definitions for arrows
const arrowRight = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] };
const arrowDown = { lines: [{ x1: 7, y1: 2, x2: 7, y2: 12 }, ...] }; // Different!

Pass:

const arrowLines: [IconLine, IconLine, IconLine] = [
  { x1: 2, y1: 7, x2: 12, y2: 7 },
  { x1: 7.5, y1: 2.5, x2: 12, y2: 7 },
  { x1: 7.5, y1: 11.5, x2: 12, y2: 7 },
];

const icons = {
  "arrow-right": { lines: arrowLines, rotation: 0, group: "arrow" },
  "arrow-down": { lines: arrowLines, rotation: 90, group: "arrow" },
  "arrow-left": { lines: arrowLines, rotation: 180, group: "arrow" },
  "arrow-up": { lines: arrowLines, rotation: -90, group: "arrow" },
};

`morphing-spring-rotation`

Rotation between grouped icons should use spring physics for natural motion.

Fail:

<motion.g animate={{ rotate: rotation }} transition={{ duration: 0.3 }} />

Pass:

const rotation = useSpring(definition.rotation ?? 0, activeTransition);

<motion.g style={{ rotate: rotation, transformOrigin: "center" }} />

`morphing-reduced-motion`

Respect prefers-reduced-motion by disabling animations.

Fail:

function MorphingIcon({ icon }: Props) {
  return <motion.line animate={...} transition={{ duration: 0.4 }} />;
}

Pass:

function MorphingIcon({ icon }: Props) {
  const reducedMotion = useReducedMotion() ?? false;
  const activeTransition = reducedMotion ? { duration: 0 } : transition;
  
  return <motion.line animate={...} transition={activeTransition} />;
}

`morphing-jump-non-grouped`

When transitioning between icons NOT in the same group, rotation should jump instantly.

Fail:

// Always animating rotation regardless of group
useEffect(() => {
  rotation.set(definition.rotation ?? 0);
}, [definition]);

Pass:

useEffect(() => {
  if (shouldRotate) {
    rotation.set(definition.rotation ?? 0); // Animate
  } else {
    rotation.jump(definition.rotation ?? 0); // Instant
  }
}, [definition, shouldRotate]);

`morphing-strokelinecap-round`

Lines should use strokeLinecap="round" for polished endpoints.

Fail:

<motion.line strokeLinecap="butt" />

Pass:

<motion.line strokeLinecap="round" />

`morphing-aria-hidden`

Icon SVGs should be aria-hidden since they're decorative.

Fail:

<svg width={size} height={size}>...</svg>

Pass:

<svg width={size} height={size} aria-hidden="true">...</svg>

Common Icon Patterns

Two-Line Icons (check, minus, equals, chevron)

Use one or two collapsed lines:

const check = {
  lines: [
    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },
    { x1: 5.5, y1: 11, x2: 12, y2: 3 },
    collapsed,
  ],
};

Three-Line Icons (menu, asterisk, play)

Use all three lines:

const menu = {
  lines: [
    { x1: 2, y1: 3.5, x2: 12, y2: 3.5 },
    { x1: 2, y1: 7, x2: 12, y2: 7 },
    { x1: 2, y1: 10.5, x2: 12, y2: 10.5 },
  ],
};

Point Icons (more, grip)

Use zero-length lines as dots:

const more = {
  lines: [
    { x1: 3, y1: 7, x2: 3, y2: 7 },
    { x1: 7, y1: 7, x2: 7, y2: 7 },
    { x1: 11, y1: 7, x2: 11, y2: 7 },
  ],
};

Recommended Transition

Use exponential ease-out for smooth morphing:

const defaultTransition: Transition = {
  ease: [0.19, 1, 0.22, 1],
  duration: 0.4,
};

Output Format

When auditing morphing icon implementations, output findings as:

file:line - [rule-id] description of issue

Example:
components/icon/index.tsx:45 - [morphing-three-lines] Icon "check" has only 2 lines, needs collapsed third
components/icon/index.tsx:78 - [morphing-group-variants] arrow-down uses different line definitions than arrow-right

Summary Table

After findings, output a summary:

Rule	Count	Severity
`morphing-three-lines`	2	HIGH
`morphing-group-variants`	1	HIGH
`morphing-reduced-motion`	1	MEDIUM

References

Weekly Installs

120

Repository

raphaelsalaja/u…ace-wiki

GitHub Stars

633

First Seen

Feb 1, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode107

codex98

cursor98

gemini-cli94

claude-code91

github-copilot84

HeroUI v2 到 v3 迁移指南：破坏性变更、复合组件、Tailwind v4 升级

490 周安装

SVG 变形图标技术：基于三线结构的无缝图标动画实现指南

🇨🇳中文介绍

变形图标

核心概念

架构

1. 线段定义

2. 折叠线段

3. 图标定义

4. 旋转分组

相关 Skills

实现规则

morphing-three-lines

morphing-use-collapsed

morphing-consistent-viewbox

morphing-group-variants

morphing-spring-rotation

morphing-reduced-motion

morphing-jump-non-grouped

morphing-strokelinecap-round

morphing-aria-hidden

常见图标模式

双线图标（勾选、减号、等号、V形符号）

三线图标（菜单、星号、播放）

点状图标（更多、抓取）

推荐的过渡效果

输出格式

汇总表格

参考资料

🇺🇸English

Morphing Icons

Core Concept

Architecture

1. Line Definition

2. Collapsed Lines

3. Icon Definition

4. Rotation Groups

Implementation Rules

morphing-three-lines

morphing-use-collapsed

morphing-consistent-viewbox

morphing-group-variants

morphing-spring-rotation

morphing-reduced-motion

morphing-jump-non-grouped

morphing-strokelinecap-round

morphing-aria-hidden

Common Icon Patterns

Two-Line Icons (check, minus, equals, chevron)

Three-Line Icons (menu, asterisk, play)

Point Icons (more, grip)

Recommended Transition

Output Format

Summary Table

References

最新 Skills

`morphing-three-lines`

`morphing-use-collapsed`

`morphing-consistent-viewbox`

`morphing-group-variants`

`morphing-spring-rotation`

`morphing-reduced-motion`

`morphing-jump-non-grouped`

`morphing-strokelinecap-round`

`morphing-aria-hidden`

`morphing-three-lines`

`morphing-use-collapsed`

`morphing-consistent-viewbox`

`morphing-group-variants`

`morphing-spring-rotation`

`morphing-reduced-motion`

`morphing-jump-non-grouped`

`morphing-strokelinecap-round`

`morphing-aria-hidden`