Files
WebDrop/web/src/ui/Icon.tsx
T

72 lines
3.4 KiB
TypeScript

const PATHS = {
folder: 'M3 7V5h6l2 2h10v13H3z',
lock: 'M8 11V8a4 4 0 018 0v3 M6 11h12v9H6z',
share: 'M12 4v11 M8 8l4-4 4 4 M5 14v6h14v-6',
copy: 'M9 9h10v11H9z M5 15V4h10',
download: 'M12 4v11 M8 11l4 4 4-4 M5 20h14',
eye: 'M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z M12 9a3 3 0 100 6 3 3 0 000-6z',
file: 'M7 3h7l5 5v13H7z M14 3v5h5',
image: 'M4 5h16v14H4z M4 16l5-5 4 4 3-3 4 4 M9 9.5h.01',
video: 'M4 6h12v12H4z M16 10l5-3v10l-5-3',
archive: 'M5 4h14v4H5z M6 8v12h12V8 M10 12h4',
text: 'M5 6h14 M5 10h14 M5 14h14 M5 18h9',
send: 'M4 12l16-8-6 16-3-7z',
clip: 'M20 11l-8 8a5 5 0 01-7-7l8-8a3.5 3.5 0 015 5l-8 8a2 2 0 01-3-3l7-7',
close: 'M6 6l12 12 M18 6L6 18',
plus: 'M12 5v14 M5 12h14',
check: 'M5 12l5 5 9-10',
edit: 'M4 20h4L19 9l-4-4L4 16z',
trash: 'M5 7h14 M9 7V4h6v3 M7 7l1 13h8l1-13',
desktop: 'M3 5h18v11H3z M9 20h6 M12 16v4',
phone: 'M8 3h8v18H8z M11 18h2',
tablet: 'M5 4h14v16H5z M11 17h2',
more: 'M5 12h.01 M12 12h.01 M19 12h.01',
menu: 'M4 7h16 M4 12h16 M4 17h16',
rotateLeft: 'M4 12a8 8 0 103-6.2 M4 4v5h5',
rotateRight: 'M20 12a8 8 0 11-3-6.2 M20 4v5h-5',
users: 'M9 11a3 3 0 100-6 3 3 0 000 6z M3 19a6 6 0 0112 0 M16 6a3 3 0 010 6 M18 19a5 5 0 00-3-4.6',
undo: 'M9 14L4 9l5-5 M4 9h10a6 6 0 010 12h-3',
warn: 'M12 4l9 16H3z M12 10v4 M12 17h.01',
sun: 'M12 8a4 4 0 100 8 4 4 0 000-8z M12 2v2 M12 20v2 M2 12h2 M20 12h2 M5 5l1.5 1.5 M17.5 17.5L19 19 M5 19l1.5-1.5 M17.5 6.5L19 5',
moon: 'M20 14A8 8 0 0110 4a8 8 0 1010 10z',
auto: 'M12 4a8 8 0 100 16 8 8 0 000-16z M12 4v16',
search: 'M11 4a7 7 0 100 14 7 7 0 000-14z M16 16l5 5',
scan: 'M4 8V5a1 1 0 011-1h3 M16 4h3a1 1 0 011 1v3 M20 16v3a1 1 0 01-1 1h-3 M8 20H5a1 1 0 01-1-1v-3 M8 12h8',
camera: 'M4 8h3l2-3h6l2 3h3v11H4z M12 11a3.5 3.5 0 100 7 3.5 3.5 0 000-7z',
paste: 'M9 4h6v3H9z M7 5H5v16h14V5h-2',
history: 'M4 12a8 8 0 108-8 M4 4v5h5 M12 8v4l3 2',
chevronRight: 'M9 6l6 6-6 6',
chevronDown: 'M6 9l6 6 6-6',
chevronLeft: 'M15 6l-6 6 6 6',
panelRight: 'M4 5h16v14H4z M15 5v14',
bell: 'M6 16V11a6 6 0 0112 0v5l2 2H4z M10 20h4',
settings: 'M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z',
} as const;
/** Material Icons 的实心图标,按填充渲染;其余是 1.5 描边线条图标 */
export type IconName = keyof typeof PATHS;
const FILLED: ReadonlySet<IconName> = new Set<IconName>(['settings']);
interface Props {
name: IconName;
size?: number;
}
export function Icon({ name, size = 20 }: Props) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill={FILLED.has(name) ? 'currentColor' : 'none'}
stroke={FILLED.has(name) ? 'none' : 'currentColor'}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<path d={PATHS[name]} />
</svg>
);
}