feat(web): add PWA icons via Next.js ImageResponse (frontend-design)
This commit is contained in:
parent
afc94e613e
commit
b497e133bd
49
web/app/apple-icon.tsx
Normal file
49
web/app/apple-icon.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { ImageResponse } from "next/og";
|
||||
|
||||
export const size = { width: 180, height: 180 };
|
||||
export const contentType = "image/png";
|
||||
|
||||
export default function AppleIcon() {
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: "#facc15",
|
||||
border: "8px solid #000000",
|
||||
boxSizing: "border-box",
|
||||
fontFamily:
|
||||
'"Courier New", "Liberation Mono", "DejaVu Sans Mono", monospace',
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: "#000000",
|
||||
fontSize: 110,
|
||||
fontWeight: 900,
|
||||
letterSpacing: "-5px",
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
CM
|
||||
</span>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
width: 24,
|
||||
height: 24,
|
||||
background: "#000000",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
size,
|
||||
);
|
||||
}
|
||||
49
web/app/icon.tsx
Normal file
49
web/app/icon.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { ImageResponse } from "next/og";
|
||||
|
||||
export const size = { width: 512, height: 512 };
|
||||
export const contentType = "image/png";
|
||||
|
||||
export default function Icon() {
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: "#facc15",
|
||||
border: "24px solid #000000",
|
||||
boxSizing: "border-box",
|
||||
fontFamily:
|
||||
'"Courier New", "Liberation Mono", "DejaVu Sans Mono", monospace',
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: "#000000",
|
||||
fontSize: 320,
|
||||
fontWeight: 900,
|
||||
letterSpacing: "-16px",
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
CM
|
||||
</span>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
width: 72,
|
||||
height: 72,
|
||||
background: "#000000",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
size,
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user