users/ryan/modules/simple-bar/simple-bar-source/lib/components/icons/icon.jsx
397af8b5b8bf6d08f26292207ce2aaffc095772b
· 1.2 KB · 40 lines
raw
| 1 | import * as Uebersicht from "uebersicht"; |
| 2 | |
| 3 | const { React } = Uebersicht; |
| 4 | |
| 5 | /** |
| 6 | * Icon component renders an SVG element. |
| 7 | * |
| 8 | * @param {Object} props - The properties object. |
| 9 | * @param {number} [props.width=24] - The width of the SVG. |
| 10 | * @param {number} [props.height=24] - The height of the SVG. |
| 11 | * @param {React.ReactNode} props.children - The children elements to be rendered inside the SVG. |
| 12 | * @returns {JSX.Element} The SVG element. |
| 13 | */ |
| 14 | export default function Icon({ width = 24, height = 24, children, ...props }) { |
| 15 | return ( |
| 16 | <svg |
| 17 | viewBox={`0 0 ${width} ${height}`} |
| 18 | width={width} |
| 19 | height={height} |
| 20 | {...props} |
| 21 | > |
| 22 | {children} |
| 23 | </svg> |
| 24 | ); |
| 25 | } |
| 26 | |
| 27 | /** |
| 28 | * SuspenseIcon component renders its children within a React.Suspense component. |
| 29 | * |
| 30 | * @param {Object} props - The properties object. |
| 31 | * @param {React.ReactNode} props.children - The children elements to be rendered inside the Suspense component. |
| 32 | * @returns {JSX.Element} The Suspense component with a fallback SVG loader. |
| 33 | */ |
| 34 | export function SuspenseIcon({ children }) { |
| 35 | return ( |
| 36 | <React.Suspense fallback={<svg className="simple-bar-icon-loader" />}> |
| 37 | {children} |
| 38 | </React.Suspense> |
| 39 | ); |
| 40 | } |