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.
33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
import type { IconProps } from "@/icons/types";
|
|
|
|
export const SearchOptionsIcon = ({
|
|
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>Search Options</title>
|
|
<path
|
|
d="M7.5 7.5C9.433 7.5 11 9.067 11 11C11 12.933 9.433 14.5 7.5 14.5C5.567 14.5 4 12.933 4 11C4 9.067 5.567 7.5 7.5 7.5Z"
|
|
fill={color}
|
|
/>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M7.5 4.5C11.0899 4.5 14 7.41015 14 11C14 12.434 13.5336 13.7581 12.7471 14.833L15.707 17.793C16.0976 18.1835 16.0976 18.8165 15.707 19.207C15.3165 19.5976 14.6835 19.5976 14.293 19.207L11.333 16.2471C10.2581 17.0336 8.93401 17.5 7.5 17.5C3.91015 17.5 1 14.5899 1 11C1 7.41015 3.91015 4.5 7.5 4.5ZM7.5 6.5C5.01472 6.5 3 8.51472 3 11C3 13.4853 5.01472 15.5 7.5 15.5C9.98528 15.5 12 13.4853 12 11C12 8.51472 9.98528 6.5 7.5 6.5Z"
|
|
fill={color}
|
|
/>
|
|
<path
|
|
d="M21.293 9.29297C21.6835 8.90244 22.3165 8.90244 22.707 9.29297C23.0976 9.68349 23.0976 10.3165 22.707 10.707L20.207 13.207C19.8165 13.5976 19.1835 13.5976 18.793 13.207L16.293 10.707C15.9024 10.3165 15.9024 9.68349 16.293 9.29297C16.6835 8.90244 17.3165 8.90244 17.707 9.29297L19.5 11.0859L21.293 9.29297Z"
|
|
fill={color}
|
|
/>
|
|
</svg>
|
|
);
|