mirror of
https://github.com/raphaelsalaja/userinterface-wiki.git
synced 2026-09-14 20:06:29 +08:00
Raphael S.
ae3b426950
- Introduced a new documentation page covering various pseudo-elements, including `::backdrop`, `::view-transition`, and `::scroll-marker`. - Added examples and practical patterns for using these pseudo-elements effectively. - Created a new CSS module for styling demo components related to pseudo-elements. Also added TypeScript interface for icon properties to improve type safety in icon components.
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import type { IconProps } from "@/icons/types";
|
|
|
|
export const ScanCodeIcon = ({
|
|
size = 24,
|
|
color = "currentColor",
|
|
...props
|
|
}: IconProps) => (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
width={size}
|
|
height={size}
|
|
{...props}
|
|
>
|
|
<title>Scan Code</title>
|
|
<path
|
|
d="M4 15C4.55228 15 5 15.4477 5 16V18C5 18.5523 5.44772 19 6 19H8C8.55228 19 9 19.4477 9 20C9 20.5523 8.55228 21 8 21H6C4.34315 21 3 19.6569 3 18V16C3 15.4477 3.44772 15 4 15Z"
|
|
fill={color}
|
|
/>
|
|
<path
|
|
d="M20 15C20.5523 15 21 15.4477 21 16V18C21 19.6569 19.6569 21 18 21H16C15.4477 21 15 20.5523 15 20C15 19.4477 15.4477 19 16 19H18C18.5523 19 19 18.5523 19 18V16C19 15.4477 19.4477 15 20 15Z"
|
|
fill={color}
|
|
/>
|
|
<path d="M8 15H7V9H8V15Z" fill={color} />
|
|
<path d="M11 15H9V9H11V15Z" fill={color} />
|
|
<path d="M13 15H12V9H13V15Z" fill={color} />
|
|
<path d="M15 15H14V9H15V15Z" fill={color} />
|
|
<path d="M17 15H16V9H17V15Z" fill={color} />
|
|
<path
|
|
d="M8 3C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6C5.44772 5 5 5.44772 5 6V8C5 8.55228 4.55228 9 4 9C3.44772 9 3 8.55228 3 8V6C3 4.34315 4.34315 3 6 3H8Z"
|
|
fill={color}
|
|
/>
|
|
<path
|
|
d="M18 3C19.6569 3 21 4.34315 21 6V8C21 8.55228 20.5523 9 20 9C19.4477 9 19 8.55228 19 8V6C19 5.44772 18.5523 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18Z"
|
|
fill={color}
|
|
/>
|
|
</svg>
|
|
);
|