Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from "react";
import styled from "styled-components";
import type { TypeSpotIllustrationProps } from "./SpotIllustrationTypes";
import { ViewBoxes } from "@sproutsocial/seeds-illustrations";
type TypeStyledSVG = Pick<TypeSpotIllustrationProps, "customFill">;
const StyledSVG = styled.svg<TypeStyledSVG>`
fill: ${(p) =>
p.customFill
? p.theme.colors[p.customFill][400]
: p.theme.colors.illustration.fill};
color: ${(p) => p.theme.colors.illustration.stroke};
`;
const SpotIllustration = ({
name,
customFill,
height,
width,
...svgProps
}: TypeSpotIllustrationProps) => {
const viewBox = ViewBoxes[name];
const viewBoxCoordinates = viewBox?.split(" ") || [];
const defaultWidth = viewBoxCoordinates[2];
const defaultHeight = viewBoxCoordinates[3];
return (
<StyledSVG
role="img"
width={width ? width : defaultWidth}
height={height ? height : defaultHeight}
viewBox={viewBox}
focusable={false}
customFill={customFill}
{...svgProps}
>
<use
xmlnsXlink="http://www.w3.org/1999/xlink"
xlinkHref={`#seeds-svgs_${name}`}
/>
</StyledSVG>
);
};
export default SpotIllustration;
|