import React from "react";
import styled from "styled-components";

import { icons } from "../shared/icons";

const Svg = styled.svg<IconProps>`
	display: ${(props) => (props.block ? "block" : "inline-block")};
	vertical-align: middle;

	shape-rendering: inherit;
	transform: translate3d(0, 0, 0);
`;

const Path = styled.path`
	fill: ${(props) => props.color};
`;

export interface IconProps {
    /** 图标名*/
    icon: keyof typeof icons;
    /** 是否块级元素 */
    block?: boolean;
    /** 颜色 */
    color?: string;
}

export function Icon(props: IconProps) {
    const { block, icon, color } = props;
    return (
        <Svg
            viewBox="0 0 1024 1024"
            width="20px"
            height="20px"
            block={block}
            {...props}
        >
            <Path d={icons[icon]} color={color} />
        </Svg>
    );
}
Icon.defaultProps = {
    block: false,
    color: "black",
};