70 lines
2.9 KiB
TypeScript
70 lines
2.9 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
|
||
|
|
// Inline stroke icons in the current text colour. All are decorative; buttons carry their own labels.
|
||
|
|
|
||
|
|
type IconProps = { size?: number, className?: string };
|
||
|
|
|
||
|
|
const stroke = (size: number, width: number, className?: string) => ({
|
||
|
|
width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: width,
|
||
|
|
strokeLinecap: "round" as const, strokeLinejoin: "round" as const, className, "aria-hidden": true,
|
||
|
|
});
|
||
|
|
|
||
|
|
export const LogoIcon = ({ size = 34 }: IconProps) => (
|
||
|
|
<svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true">
|
||
|
|
<rect x="1" y="1" width="30" height="30" rx="9" style={{ fill: "var(--accent)" }} />
|
||
|
|
<rect x="6" y="7" width="6" height="18" rx="3" style={{ fill: "var(--onAccent)" }} />
|
||
|
|
<circle cx="18" cy="11" r="3.2" style={{ fill: "var(--onAccent)" }} />
|
||
|
|
<circle cx="18" cy="21" r="3.2" style={{ fill: "var(--onAccent)" }} />
|
||
|
|
<circle cx="25" cy="11" r="3.2" style={{ fill: "var(--onAccent)", opacity: .55 }} />
|
||
|
|
<circle cx="25" cy="21" r="3.2" style={{ fill: "var(--onAccent)" }} />
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const PlusIcon = ({ size = 20 }: IconProps) => (
|
||
|
|
<svg {...stroke(size, 2.4)}><path d="M12 5v14M5 12h14" /></svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const ProfileIcon = ({ size = 20 }: IconProps) => (
|
||
|
|
<svg {...stroke(size, 2)}><circle cx="12" cy="8" r="4" /><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" /></svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const LeaveIcon = ({ size = 20 }: IconProps) => (
|
||
|
|
<svg {...stroke(size, 2)}><path d="M14 4h5v16h-5" /><path d="M10 8l-4 4 4 4" /><path d="M6 12h10" /></svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const ChevronIcon = ({ size = 20, className }: IconProps) => (
|
||
|
|
<svg {...stroke(size, 2.2, className)}><path d="M6 9l6 6 6-6" /></svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const CloseIcon = ({ size = 20 }: IconProps) => (
|
||
|
|
<svg {...stroke(size, 2.2)}><path d="M6 6l12 12M18 6L6 18" /></svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const ReplayIcon = ({ size = 18 }: IconProps) => (
|
||
|
|
<svg {...stroke(size, 2.2)}><path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v5h5" /></svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const FirstIcon = ({ size = 20 }: IconProps) => (
|
||
|
|
<svg {...stroke(size, 2.2)}><path d="M6 5v14" /><path d="M18 6l-8 6 8 6z" /></svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const PreviousIcon = ({ size = 20 }: IconProps) => (
|
||
|
|
<svg {...stroke(size, 2.4)}><path d="M15 6l-6 6 6 6" /></svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const NextIcon = ({ size = 20 }: IconProps) => (
|
||
|
|
<svg {...stroke(size, 2.4)}><path d="M9 6l6 6-6 6" /></svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const LastIcon = ({ size = 20 }: IconProps) => (
|
||
|
|
<svg {...stroke(size, 2.2)}><path d="M18 5v14" /><path d="M6 6l8 6-8 6z" /></svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const PlayIcon = ({ size = 22 }: IconProps) => (
|
||
|
|
<svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5l11 7-11 7z" fill="currentColor" /></svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const PauseIcon = ({ size = 22 }: IconProps) => (
|
||
|
|
<svg {...stroke(size, 3)}><path d="M8 5v14M16 5v14" /></svg>
|
||
|
|
);
|