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.
25 lines
1.4 KiB
TypeScript
25 lines
1.4 KiB
TypeScript
import type { IconProps } from "@/icons/types";
|
|
|
|
export const HandBellIcon = ({
|
|
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>Hand Bell</title>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M19.611 4.38899C19.0454 3.82336 18.1117 3.88253 17.622 4.51506L14.2117 8.92008C14.371 9.04591 14.5244 9.1822 14.6711 9.32891C14.8178 9.47562 14.9541 9.62908 15.08 9.78832L19.485 6.37798C20.1175 5.88829 20.1767 4.95463 19.611 4.38899ZM16.0054 11.6012L20.7093 7.95943C22.2945 6.73219 22.4428 4.39233 21.0253 2.97478C19.6077 1.55723 17.2678 1.70553 16.0406 3.29071L12.3988 7.99466C10.6372 7.49742 8.66455 7.9409 7.27654 9.32891L5.86888 10.7366C5.68134 10.9241 5.42698 11.0295 5.16177 11.0295H4.4096C3.88003 11.0295 3.37216 11.2398 2.9977 11.6143C2.21793 12.3941 2.21793 13.6583 2.9977 14.4381L3.81943 15.2598C2.65946 16.6318 2.72614 18.6872 4.01947 19.9806C5.3128 21.2739 7.36828 21.3406 8.7402 20.1806L9.56193 21.0023C10.3417 21.7821 11.606 21.7821 12.3857 21.0023C12.7602 20.6279 12.9706 20.12 12.9706 19.5904V18.8383C12.9706 18.573 13.0759 18.3187 13.2634 18.1312L14.6711 16.7235C16.0591 15.3355 16.5026 13.3628 16.0054 11.6012ZM7.31404 18.7544L5.24559 16.686C4.85986 17.2655 4.92256 18.0552 5.43368 18.5663C5.94481 19.0775 6.73456 19.1402 7.31404 18.7544Z"
|
|
fill={color}
|
|
/>
|
|
</svg>
|
|
);
|