feat: adds Framer component

[clearlysid]

👋 Hello, thanks for the lovely icons!

I was using them in a project and needed an easy way to use them within Framer. Ended up writing a small HOC that can be pasted into Framer, allows changing the dimensions, picking a colour and selecting any icon from the list.

Made this quick PR to add it under the "Assets" section of the website, in case it might come in handy for others. Adding a small GIF to show how it works.

---

PR checklist:

(No changes that would affect the below)

• [x] Figma: icon shapes use “Scale” constraint
• [x] Figma: icon components are sorted Z-A in the file
• [x] Figma: icon components are built with a single union or compound shape when possible
• [x] Figma: library changes are published
• [x] SVG: icons render correctly in a browser
• [x] SVG: icons are exported with width="15" height="15" viewBox="0 0 15 15"
• [x] SVG: no icons are exported with stroke
• [x] SVG: no icons are exported with clip-path
• [x] SVG: no icons exceed 5 KB
• [x] Website is up to date
• [x] Sketch file is up to date
• [x] IconJar file is up to date
  • [x] Icon names in the IconJar library are correct
  • [x] Version in the IconJar library description is correct

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
radix-icons	❌ Failed (Inspect)			Aug 7, 2023 3:02pm

[clearlysid]

The HOC is extremely simple, here's the code one can use in Framer to get this component in their project directly:

import * as Radix from "@radix-ui/react-icons"
import { addPropertyControls, ControlType } from "framer"

let iconsList = Object.keys(Radix)

/*
 * @framerSupportedLayoutWidth any-prefer-fixed
 * @framerSupportedLayoutHeight any-prefer-fixed
 * @framerIntrinsicHeight 24
 * @framerIntrinsicWidth 24
 */
export default function RadixIcon(props) {
    const IconComponent = Radix[props.icon]
    return <IconComponent style={{ ...props.style, color: props.color }} />
}

addPropertyControls(RadixIcon, {
    icon: {
        type: ControlType.Enum,
        defaultValue: "FramerLogoIcon",
        displaySegmentedControl: false,
        options: iconsList,
    },
    color: {
        type: ControlType.Color,
        defaultValue: "#FF007C",
    },
})