Framer x icon component

Icon.tsx

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

// Open Preview (CMD + P)
// API Reference: https://www.framer.com/api

interface Props {
    iconName: string
    tint: string
}

// create icons array
const icons = [
    {
        name: "search",
        svg: tint => (
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
            >
                <title>ic_search_24px</title>
                <g fill={tint}>
                    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
                </g>
            </svg>
        ),
    },

    {
        name: "add",
        svg: tint => (
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
            >
                <title>ic_add_circle_24px</title>
                <g fill={tint}>
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
                </g>
            </svg>
        ),
    },
]

// create an array of just icon names
const iconNames = icons.map(icon => icon.name)

export function Icon(props: Props) {
    // find which entry in the icons array we want
    const icon = icons.find(icon => icon.name === props.iconName)

    // call the template function with the current tint passed through props
    const svg = icon.svg(props.tint)

    return (
        <Frame
            size="100%"
            style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
            }}
        >
            {svg}
        </Frame>
    )
}

Icon.defaultProps = {
    iconName: "search",
    tint: "#000",
    width: 32,
    height: 32,
}

addPropertyControls(Icon, {
    iconName: {
        type: ControlType.Enum,
        defaultValue: iconNames[0],
        options: iconNames,
        optionTitles: iconNames,
        title: "Icon",
    },
    tint: {
        type: ControlType.Color,
        title: "Tint",
    },
})

Thank you for this! In line 1 I think you removed an "i" from import

Also, in the latest framer builds the default width and height is not getting set to 32 but "auto", causing the frame to be = 0 (because nothing is inside)