SVG Component

SvgComponent.tsx

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"

type Props = {
    width: number | string
    height: number | string
    color: string
}

export const SvgComponent = (props: Props) => {
    return (
        <React.Fragment>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <path
                    fill={props.color}
                    d="M12 10a2 2 0 1 1 .001-4.001A2 2 0 0 1 12 10m0-5a3 3 0 1 0 0 6 3 3 0 0 0 0-6M5 7.602C5 4.085 8.271 1 12 1s7 3.085 7 6.602c0 3.455-2.563 7.543-7 14.527-4.489-7.073-7-11.072-7-14.527M12 0C7.802 0 4 3.403 4 7.602 4 11.8 7.469 16.812 12 24c4.531-7.188 8-12.2 8-16.398C20 3.403 16.199 0 12 0"
                />
            </svg>
        </React.Fragment>
    )
}

SvgComponent.defaultProps = {
    width: 24,
    height: 24,
    color: "red",
}

addPropertyControls(SvgComponent, {
    color: {
        type: ControlType.Color,
        title: "Color",
    },
})