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