Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SVG Component
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",
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment