Source from repo

User Interface Wiki

Living wiki of UI design patterns and best practices built with Fumadocs, Next.js, and Base UI components.

raphaelsalajaGitHub raphaelsalajaSource repo Original GitHub link Publisher page

Files

157

Skill

n/a

Size

184.3 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/morphing-consistent-viewbox.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown24 linesFree

rules/morphing-consistent-viewbox.md

1---
2title: Consistent ViewBox Size
3impact: HIGH
4tags: morphing, viewbox, svg
5---
6 
7## Consistent ViewBox Size
8 
9All icons must use the same viewBox (14x14 recommended).
10 
11**Incorrect (mixed scales):**
12 
13```ts
14const icon1 = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] }; // 14x14
15const icon2 = { lines: [{ x1: 4, y1: 14, x2: 24, y2: 14 }, ...] }; // 28x28
16```
17 
18**Correct (consistent scale):**
19 
20```ts
21const VIEWBOX_SIZE = 14;
22const CENTER = 7;
23```
24

Preparing the source view

User Interface Wiki

rules/morphing-consistent-viewbox.md