1---
2title: Shared Group for Rotational Variants
3impact: HIGH
4tags: morphing, group, rotation
5---
6 
7## Shared Group for Rotational Variants
8 
9Icons that are rotational variants MUST share the same group and base lines.
10 
11**Incorrect (different line definitions):**
12 
13```ts
14const arrowRight = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] };
15const arrowDown = { lines: [{ x1: 7, y1: 2, x2: 7, y2: 12 }, ...] };
16```
17 
18**Correct (shared base lines):**
19 
20```ts
21const arrowLines: [IconLine, IconLine, IconLine] = [
22  { x1: 2, y1: 7, x2: 12, y2: 7 },
23  { x1: 7.5, y1: 2.5, x2: 12, y2: 7 },
24  { x1: 7.5, y1: 11.5, x2: 12, y2: 7 },
25];
26 
27const icons = {
28  "arrow-right": { lines: arrowLines, rotation: 0, group: "arrow" },
29  "arrow-down": { lines: arrowLines, rotation: 90, group: "arrow" },
30  "arrow-left": { lines: arrowLines, rotation: 180, group: "arrow" },
31  "arrow-up": { lines: arrowLines, rotation: -90, group: "arrow" },
32};
33```
34