react-doctor/rendering-animate-svg-wrapper

Wrap the SVG: `<motion.div animate={...}><svg>...</svg></motion.div>`

• Category: Performance
• Severity: warn
• Source: oxlint-plugin-react-doctor
• Framework: global
• Enabled when: always

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Confirm the JSX element is literally <svg> (lowercase tag) and has a framer-motion animation prop: animate, initial, exit, whileHover, whileTap, whileFocus, whileDrag, or whileInView. Animating the <svg> element directly forces full re-rasterization each frame instead of compositing a promoted layer.

Fix prompt

Use this once validation confirms the diagnostic is real.

Move the animation props onto a wrapper element: <motion.div animate={...}><svg>...</svg></motion.div>. The div is promoted to its own GPU layer and translated/scaled on the compositor without re-rasterizing the SVG paths. See https://motion.dev/docs/react-motion-component

Related rules

More Performance rules from the rules reference:

• react-doctor/rendering-hoist-jsx: Move the static JSX to module scope: `const ICON = <svg>...</svg>` outside the component so it isn't recreated each render
• react-doctor/rendering-hydration-no-flicker: Use `useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)` or add `suppressHydrationWarning` to the element
• react-doctor/rendering-script-defer-async: Add `defer` for DOM-dependent scripts or `async` for independent ones (analytics). In Next.js, use `<Script strategy="afterInteractive" />` instead
• react-doctor/rendering-svg-precision: Truncate path/points/transform decimals to 1–2 digits — sub-pixel precision adds bytes with no visible difference
• react-doctor/rendering-usetransition-loading: Replace with `const [isPending, startTransition] = useTransition()` — avoids a re-render for the loading state