Custom SVG component

packages/framer-motion-3d/src/components/use-layout-camera.ts

@@ -1,11 +1,10 @@
 import type { Box } from "framer-motion"
+import { calcLength, clamp, useVisualElementContext } from "framer-motion"
 import { RefObject, useContext, useLayoutEffect, useRef } from "react"
 import { Size, useThree } from "@react-three/fiber"
 import { LayoutCameraProps } from "./types"
-import { useVisualElementContext } from "framer-motion"
 import { MotionCanvasContext } from "./MotionCanvasContext"
 import { invariant } from "hey-listen"
-import { calcLength, clamp } from "framer-motion"
 
 const calcBoxSize = ({ x, y }: Box) => ({
     width: calcLength(x),

packages/framer-motion-3d/src/render/create-visual-element.ts

@@ -75,5 +75,5 @@ export class ThreeVisualElement extends VisualElement<
     }
 }
 
-export const createVisualElement: CreateVisualElement<any> = (_, options) =>
-    new ThreeVisualElement(options, {})
+export const createVisualElement: CreateVisualElement<any> = (options) =>
+    new ThreeVisualElement({ ...options, type: "three" }, {})

packages/framer-motion/src/animation/hooks/use-animated-state.ts

@@ -73,7 +73,7 @@ export function useAnimatedState(initialState: any) {
 
     const element = useConstant(() => {
         return new StateVisualElement(
-            { props: {}, visualState },
+            { props: {}, visualState, type: "state" },
             { initialState }
         )
     })

packages/framer-motion/src/motion/__tests__/custom.test.tsx

@@ -66,4 +66,27 @@ describe("motion()", () => {
         expect(animate).toEqual({ x: 100 })
         expect(foo).toBe(true)
     })
+
+    test("creates SVG component if svg: true", async () => {
+        const BaseComponent = React.forwardRef(
+            (_props: Props, ref: RefObject<SVGCircleElement>) => {
+                return <circle ref={ref} />
+            }
+        )
+
+        const MotionComponent = motion<Props>(BaseComponent, { svg: true })
+
+        const Component = () => (
+            <MotionComponent
+                foo
+                initial={{ cx: 1 }}
+                animate={{ cx: 5 }}
+                transition={{ type: false }}
+            />
+        )
+
+        const { container } = render(<Component />)
+        const element = container.firstChild as Element
+        expect(element).toHaveAttribute("cx", "5")
+    })
 })

packages/framer-motion/src/motion/index.tsx

@@ -20,6 +20,7 @@ import { motionComponentSymbol } from "./utils/symbol"
 import { CreateVisualElement } from "../render/types"
 
 export interface MotionComponentConfig<Instance, RenderState> {
+    type: string
     preloadedFeatures?: FeatureBundle
     createVisualElement?: CreateVisualElement<Instance>
     projectionNodeConstructor?: any
@@ -44,6 +45,7 @@ export function createMotionComponent<Props extends {}, Instance, RenderState>({
     useRender,
     useVisualState,
     Component,
+    type,
 }: MotionComponentConfig<Instance, RenderState>) {
     preloadedFeatures && loadFeatures(preloadedFeatures)
 
@@ -88,9 +90,9 @@ export function createMotionComponent<Props extends {}, Instance, RenderState>({
              * for more performant animations and interactions
              */
             context.visualElement = useVisualElement<Instance, RenderState>(
-                Component,
                 visualState,
                 configAndProps,
+                type,
                 createVisualElement
             )
 

packages/framer-motion/src/motion/utils/use-visual-element.ts

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useContext, useRef } from "react"
 import { PresenceContext } from "../../context/PresenceContext"
 import { MotionProps } from "../../motion/types"
@@ -12,9 +11,9 @@ import { MotionConfigContext } from "../../context/MotionConfigContext"
 import type { VisualElement } from "../../render/VisualElement"
 
 export function useVisualElement<Instance, RenderState>(
-    Component: string | React.ComponentType<React.PropsWithChildren<unknown>>,
     visualState: VisualState<Instance, RenderState>,
     props: MotionProps & MotionConfigProps,
+    type: string,
     createVisualElement?: CreateVisualElement<Instance>
 ): VisualElement<Instance> | undefined {
     const parent = useVisualElementContext()
@@ -30,10 +29,11 @@ export function useVisualElement<Instance, RenderState>(
     createVisualElement = createVisualElement || lazyContext.renderer
 
     if (!visualElementRef.current && createVisualElement) {
-        visualElementRef.current = createVisualElement(Component, {
+        visualElementRef.current = createVisualElement({
             visualState,
             parent,
             props,
+            type,
             presenceId: presenceContext ? presenceContext.id : undefined,
             blockInitialAnimation: presenceContext
                 ? presenceContext.initial === false

packages/framer-motion/src/render/dom/create-visual-element.ts

@@ -1,16 +1,11 @@
-import { ComponentType } from "react"
 import { HTMLVisualElement } from "../html/HTMLVisualElement"
 import { SVGVisualElement } from "../svg/SVGVisualElement"
 import { CreateVisualElement, VisualElementOptions } from "../types"
-import { isSVGComponent } from "./utils/is-svg-component"
 
 export const createDomVisualElement: CreateVisualElement<
     HTMLElement | SVGElement
-> = (
-    Component: string | ComponentType<React.PropsWithChildren<unknown>>,
-    options: VisualElementOptions<HTMLElement | SVGElement>
-) => {
-    return isSVGComponent(Component)
+> = (options: VisualElementOptions<HTMLElement | SVGElement>) => {
+    return options.type === "svg"
         ? new SVGVisualElement(options, { enableHardwareAcceleration: false })
         : new HTMLVisualElement(options, { enableHardwareAcceleration: true })
 }

packages/framer-motion/src/render/dom/motion-proxy.ts

@@ -17,6 +17,7 @@ export type CustomDomComponent<Props> = React.ForwardRefExoticComponent<
 
 export interface CustomMotionComponentConfig {
     forwardMotionProps?: boolean
+    svg?: boolean
 }
 
 export type CreateConfig = <Instance, RenderState, Props>(

packages/framer-motion/src/render/dom/utils/create-config.ts

@@ -12,17 +12,17 @@ import { CustomMotionComponentConfig } from "../motion-proxy"
 
 export function createDomMotionConfig<Props>(
     Component: string | React.ComponentType<React.PropsWithChildren<Props>>,
-    { forwardMotionProps = false }: CustomMotionComponentConfig,
+    { forwardMotionProps = false, svg }: CustomMotionComponentConfig,
     preloadedFeatures?: FeatureComponents,
     createVisualElement?: CreateVisualElement<any>,
     projectionNodeConstructor?: any
 ) {
-    const baseConfig = isSVGComponent(Component)
-        ? svgMotionConfig
-        : htmlMotionConfig
+    const type = svg || isSVGComponent(Component) ? "svg" : "html"
+    const baseConfig = type === "svg" ? svgMotionConfig : htmlMotionConfig
 
     return {
         ...baseConfig,
+        type,
         preloadedFeatures,
         useRender: createUseRender(forwardMotionProps),
         createVisualElement,

packages/framer-motion/src/render/types.ts

@@ -28,6 +28,7 @@ export type ScrapeMotionValuesFromProps = (props: MotionProps) => {
 export type UseRenderState<RenderState = any> = () => RenderState
 
 export type VisualElementOptions<Instance, RenderState = any> = {
+    type: string
     visualState: VisualState<Instance, RenderState>
     parent?: VisualElement<unknown>
     variantParent?: VisualElement<unknown>
@@ -135,6 +136,5 @@ export interface AnimationLifecycles {
 export type EventProps = LayoutLifecycles & AnimationLifecycles
 
 export type CreateVisualElement<Instance> = (
-    Component: string | React.ComponentType<React.PropsWithChildren<unknown>>,
     options: VisualElementOptions<Instance>
 ) => VisualElement<Instance>

packages/framer-motion/src/render/utils/__tests__/animation-state.test.ts

@@ -17,6 +17,7 @@ function createTest(
                 latestValues: {},
                 renderState: createHtmlRenderState(),
             },
+            type: "state",
         },
         {
             initialState: {},