40 lines
911 B
TypeScript
40 lines
911 B
TypeScript
import { createEffect, createSignal, type Accessor } from "solid-js";
|
|
|
|
export default function FitText(props: { body: Accessor<string> }) {
|
|
let textRef: SVGTextElement | undefined;
|
|
const [viewBox, setViewbox] = createSignal<string | undefined>()
|
|
|
|
createEffect(async () => {
|
|
props.body();
|
|
await Promise.resolve()
|
|
const bounds = textRef?.getBBox();
|
|
if (bounds === undefined) {
|
|
return;
|
|
}
|
|
setViewbox(`0 0 ${bounds.width} ${bounds.height}`)
|
|
});
|
|
|
|
return (
|
|
<svg
|
|
style={{
|
|
width: "100%",
|
|
"max-height": "40%",
|
|
}}
|
|
viewBox={viewBox()}
|
|
fill="currentcolor"
|
|
>
|
|
<text
|
|
ref={textRef}
|
|
x="50%"
|
|
y="50%"
|
|
dominant-baseline="middle"
|
|
text-anchor="middle"
|
|
font-size="30px"
|
|
font-family="inherit"
|
|
font-weight="inherit"
|
|
>
|
|
{props.body()}
|
|
</text>
|
|
</svg>
|
|
);
|
|
}
|