40 lines
916 B
TypeScript
40 lines
916 B
TypeScript
import * as React from "react";
|
|
import styled from "styled-components";
|
|
import Flex from "./Flex";
|
|
|
|
type Props = {
|
|
size?: number;
|
|
color?: string;
|
|
children?: React.ReactNode;
|
|
};
|
|
|
|
const Squircle: React.FC<Props> = ({ color, size = 28, children }: Props) => (
|
|
<Wrapper
|
|
style={{ width: size, height: size }}
|
|
align="center"
|
|
justify="center"
|
|
>
|
|
<svg width={size} height={size} viewBox="0 0 28 28">
|
|
<path
|
|
fill={color}
|
|
d="M0 11.1776C0 1.97285 1.97285 0 11.1776 0H16.8224C26.0272 0 28 1.97285 28 11.1776V16.8224C28 26.0272 26.0272 28 16.8224 28H11.1776C1.97285 28 0 26.0272 0 16.8224V11.1776Z"
|
|
/>
|
|
</svg>
|
|
<Content>{children}</Content>
|
|
</Wrapper>
|
|
);
|
|
|
|
const Wrapper = styled(Flex)`
|
|
position: relative;
|
|
`;
|
|
|
|
const Content = styled.div`
|
|
display: flex;
|
|
transform: translate(-50%, -50%);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
`;
|
|
|
|
export default Squircle;
|