Font Files Framer Package: Component Usage Example
import * as React from "react" | |
import { Frame, addPropertyControls, ControlType } from "framer" | |
import { url } from "framer/resource" | |
// @ts-ignore | |
import { Loader } from "@framer/jordanframer.font-files/code/Loader" | |
// @ts-ignore | |
import { File } from "@framer/jordanframer.font-files/code/File" | |
const fontFileName = "FontFiles/emulogic.ttf" | |
export function ComponentExample(props) { | |
const { fontFamily, ...rest } = props | |
const fontPath = url(`./design/assets/${fontFileName}`) | |
const style = { color: "#fff", fontSize: "36px", fontFamily: fontFamily } | |
return ( | |
<Frame {...rest} background={"#000"} style={style}> | |
<Frame size={"100%"} background={""}> | |
Code Font Files Test | |
</Frame> | |
<Frame name={"FontFiles"} size={0} overflow={"hidden"} opacity={0}> | |
<Loader> | |
<File cssName={fontFamily} filePath={url(fontPath)} /> | |
</Loader> | |
</Frame> | |
</Frame> | |
) | |
} | |
const defaultProps = { height: 300, width: 300, fontFamily: "emulogic" } | |
ComponentExample.defaultProps = defaultProps | |
ComponentExample.displayName = "Font Files: Component Example" | |
addPropertyControls(ComponentExample, { | |
fontFamily: { | |
type: ControlType.String, | |
title: "Font Family", | |
defaultValue: defaultProps.fontFamily, | |
}, | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment