// @flow
import * as React from 'react';
import styled from 'styled-components';
type Props = {
glyph: string,
size?: number,
};
export const InlineSvg = styled.svg`
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
color: inherit;
fill: currentColor;
`;
export const SvgWrapper = styled.div`
display: inline-block;
flex: 0 0 ${props => (props.size ? `${props.size}px` : '32px')};
width: ${props => (props.size ? `${props.size}px` : '32px')};
height: ${props => (props.size ? `${props.size}px` : '32px')};
min-width: ${props => (props.size ? `${props.size}px` : '32px')};
min-height: ${props => (props.size ? `${props.size}px` : '32px')};
position: relative;
color: inherit;
`;
type GlyphProps = {
glyph: string,
};
export const Glyph = ({ glyph }: GlyphProps): any => {
switch (glyph) {
case 'facebook':
return (
);
case 'link':
return (
);
case 'share':
return (
);
case 'twitter':
return (
);
case 'view-forward':
return (
);
case 'github':
return (
);
case 'ios':
return (
);
case 'macos':
return (
);
case 'windows':
return (
);
case 'android':
return (
);
case 'linux':
return (
);
default:
return null;
}
};
export default function Icon(props: Props) {
const { size = 32, glyph } = props;
return (
{glyph}
);
}