123 lines
3.0 KiB
TypeScript
123 lines
3.0 KiB
TypeScript
import type { SVGProps } from "react";
|
|
|
|
// 统一 1.7px 描边的线性图标(Phosphor 风格),尺寸由外部 className 控制
|
|
function Svg({ children, ...p }: SVGProps<SVGSVGElement>) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={1.7}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
{...p}
|
|
>
|
|
{children}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
type P = SVGProps<SVGSVGElement>;
|
|
|
|
export const IconBooks = (p: P) => (
|
|
<Svg {...p}>
|
|
<path d="M4 5.5A1.5 1.5 0 0 1 5.5 4H10a1.5 1.5 0 0 1 1.5 1.5V18a2 2 0 0 0-2-2H5.5A1.5 1.5 0 0 1 4 14.5v-9Z" />
|
|
<path d="M13 8h4.5A1.5 1.5 0 0 1 19 9.5v8A1.5 1.5 0 0 1 17.5 19H13" />
|
|
<path d="M7 4v12M16 12.5v4" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconSearch = (p: P) => (
|
|
<Svg {...p}>
|
|
<circle cx="11" cy="11" r="6.5" />
|
|
<path d="m16 16 4 4" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconRefresh = (p: P) => (
|
|
<Svg {...p}>
|
|
<path d="M20 12a8 8 0 1 1-2.34-5.66" />
|
|
<path d="M20 4v4.5h-4.5" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconScan = (p: P) => (
|
|
<Svg {...p}>
|
|
<path d="M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16" />
|
|
<path d="M7 12h10" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconX = (p: P) => (
|
|
<Svg {...p}>
|
|
<path d="m6 6 12 12M18 6 6 18" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconTrash = (p: P) => (
|
|
<Svg {...p}>
|
|
<path d="M4.5 6.5h15M9.5 6.5V4.75A.75.75 0 0 1 10.25 4h3.5a.75.75 0 0 1 .75.75v1.75M6.5 6.5l.8 12a1.5 1.5 0 0 0 1.5 1.4h6.4a1.5 1.5 0 0 0 1.5-1.4l.8-12" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconLogout = (p: P) => (
|
|
<Svg {...p}>
|
|
<path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14" />
|
|
<path d="M10 8 6 12l4 4M6 12h10" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconArrowLeft = (p: P) => (
|
|
<Svg {...p}>
|
|
<path d="M20 12H4m0 0 6-6m-6 6 6 6" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconBookOpen = (p: P) => (
|
|
<Svg {...p}>
|
|
<path d="M12 6.5C10.5 5 8.5 4.5 4 4.5v13c4.5 0 6.5.5 8 2 1.5-1.5 3.5-2 8-2v-13c-4.5 0-6.5.5-8 2Z" />
|
|
<path d="M12 6.5v13" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconUser = (p: P) => (
|
|
<Svg {...p}>
|
|
<circle cx="12" cy="8" r="3.5" />
|
|
<path d="M5 19.5c1.2-3 3.7-4.5 7-4.5s5.8 1.5 7 4.5" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconLock = (p: P) => (
|
|
<Svg {...p}>
|
|
<rect x="5.5" y="10.5" width="13" height="9" rx="1.5" />
|
|
<path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5M12 14v2.5" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconCheck = (p: P) => (
|
|
<Svg {...p}>
|
|
<path d="m5 12.5 4.5 4.5L19 7" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconAlert = (p: P) => (
|
|
<Svg {...p}>
|
|
<circle cx="12" cy="12" r="8.5" />
|
|
<path d="M12 7.5V13m0 3.5v.01" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconClock = (p: P) => (
|
|
<Svg {...p}>
|
|
<circle cx="12" cy="12" r="8.5" />
|
|
<path d="M12 7.5V12l3 2" />
|
|
</Svg>
|
|
);
|
|
|
|
export const IconFolder = (p: P) => (
|
|
<Svg {...p}>
|
|
<path d="M4 6.5A1.5 1.5 0 0 1 5.5 5h3.2a1.5 1.5 0 0 1 1.2.6l.9 1.2a1.5 1.5 0 0 0 1.2.6h6.5A1.5 1.5 0 0 1 20 9.5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5v-11Z" />
|
|
</Svg>
|
|
);
|