// 这个组件只用来渲染多色SVG Icon
import React from 'react';
import {Platform, Image, StyleSheet, View} from 'react-native';
import * as Icons from '../../assets/icons/svg/index';

export type SVGIconNames = Icons.IconNames;
interface SvgIconProps {
    name: Icons.IconNames;
    size?: number;
    color?: string;
    style?: any;
    highlight?: boolean;
}
const SVGIcon: React.FC<SvgIconProps> = ({name, highlight, color, style = StyleSheet.create({}), size, ...ext}) => {
    // @ts-ignore
    const SVG = highlight ? Icons[name + '_on'] : Icons[name];
    if (!SVG) {
        throw new Error('图标不存在， 请确认是否存在 ' + name + '_on.svg 文件！');
    }
    const Color = color || style.color;
    const IconSize = size || style.fontSize || 24;
    const styles = StyleSheet.create({
        iconStyle: {
            width: IconSize,
            height: IconSize,
        },
    });
    return (
        <View style={[styles.iconStyle, {position: 'relative'}]}>
            {Platform.OS === 'web' ? (
                <Image source={SVG} style={[styles.iconStyle, style]} height={IconSize} width={IconSize} {...ext} />
            ) : (
                <SVG style={[styles.iconStyle, style]} fill={Color} size={IconSize} {...ext} />
            )}
        </View>
    );
};

export default SVGIcon;