@mpxjs/webpack-plugin 2.8.25-alpha.21 → 2.8.25-alpha.22

package/lib/runtime/components/react/dist/mpx-canvas/index.jsx

@@ -0,0 +1,236 @@
+/**
+ * ✘ type
+ * ✘ canvas-id
+ * ✘ disable-scroll
+ * ✔ bindtouchstart
+ * ✔ bindtouchmove
+ * ✔ bindtouchend
+ * ✔ bindtouchcancel
+ * ✔ bindlongtap
+ * ✔ binderror
+ */
+import { createElement, useRef, useState, useCallback, useEffect, forwardRef } from 'react';
+import { View, Platform, StyleSheet } from 'react-native';
+import { WebView } from 'react-native-webview';
+import useNodesRef from '../useNodesRef';
+import { useLayout, useTransformStyle, extendObject } from '../utils';
+import useInnerProps, { getCustomEvent } from '../getInnerListeners';
+import Bus from './Bus';
+import { useWebviewBinding, constructors, WEBVIEW_TARGET, ID, registerWebviewConstructor } from './utils';
+import CanvasRenderingContext2D from './CanvasRenderingContext2D';
+import html from './html';
+import './CanvasGradient';
+import { createImage as canvasCreateImage } from './Image';
+import { createImageData as canvasCreateImageData } from './ImageData';
+import { useConstructorsRegistry } from './constructorsRegistry';
+const stylesheet = StyleSheet.create({
+    container: { overflow: 'hidden', flex: 0 },
+    webview: {
+        overflow: 'hidden',
+        backgroundColor: 'transparent',
+        flex: 0
+    },
+    webviewAndroid9: {
+        overflow: 'hidden',
+        backgroundColor: 'transparent',
+        flex: 0,
+        opacity: 0.99
+    }
+});
+const _Canvas = forwardRef((props = {}, ref) => {
+    const { style = {}, originWhitelist = ['*'], 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const [isLoaded, setIsLoaded] = useState(false);
+    const nodeRef = useRef(null);
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(extendObject({}, style, stylesheet.container), {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    const { width, height } = normalStyle;
+    const canvasRef = useWebviewBinding({
+        targetName: 'canvas',
+        properties: { width, height },
+        methods: ['toDataURL']
+    });
+    const { register } = useConstructorsRegistry();
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 }),
+        ...layoutProps
+    }, [], {
+        layoutRef
+    });
+    const context2D = new CanvasRenderingContext2D(canvasRef.current);
+    register(registerWebviewConstructor);
+    // 初始化bus和context2D
+    useEffect(() => {
+        const webviewPostMessage = (message) => {
+            if (canvasRef.current.webview) {
+                const jsCode = `
+        window.mpxWebviewMessageCallback(${JSON.stringify(message)});
+        true;
+      `;
+                canvasRef.current.webview.injectJavaScript(jsCode);
+            }
+        };
+        // 设置bus
+        canvasRef.current.bus = new Bus(webviewPostMessage);
+        canvasRef.current.bus.pause();
+        // 设置 context 2D
+        canvasRef.current.context2D = context2D;
+        // 设置 getContext 方法
+        canvasRef.current.getContext = getContext;
+        // 设置 createImage 方法
+        canvasRef.current.createImage = createImage;
+        // 设置 postMessage 方法
+        canvasRef.current.postMessage = postMessage;
+        // 设置 listeners
+        canvasRef.current.listeners = [];
+        canvasRef.current.addMessageListener = addMessageListener;
+        canvasRef.current.removeMessageListener = removeMessageListener;
+        canvasRef.current.createImageData = createImageData;
+        return () => {
+            canvasRef.current.bus?.clearBatchingTimeout();
+        };
+    }, []);
+    const createImageData = (dataArray, width, height) => {
+        return canvasCreateImageData(canvasRef.current, dataArray, width, height);
+    };
+    const createImage = (width, height) => {
+        return canvasCreateImage(canvasRef.current, width, height);
+    };
+    const getContext = useCallback((contextType) => {
+        if (contextType === '2d') {
+            return context2D;
+        }
+        return null;
+    }, []);
+    const postMessage = useCallback(async (message) => {
+        if (!canvasRef.current?.bus)
+            return;
+        const { type, payload } = await canvasRef.current.bus.post({
+            id: ID(),
+            ...message
+        });
+        switch (type) {
+            case 'error': {
+                const { binderror } = props;
+                binderror &&
+                    binderror(getCustomEvent('error', {}, {
+                        detail: {
+                            errMsg: payload.message
+                        },
+                        layoutRef
+                    }, props));
+                break;
+            }
+            case 'json': {
+                return payload;
+            }
+            case 'blob': {
+                return atob(payload);
+            }
+        }
+    }, []);
+    const addMessageListener = (listener) => {
+        canvasRef.current.listeners.push(listener);
+        return () => canvasRef.current.removeMessageListener(listener);
+    };
+    const removeMessageListener = (listener) => {
+        canvasRef.current.listeners.splice(canvasRef.current.listeners.indexOf(listener), 1);
+    };
+    const onMessage = useCallback((e) => {
+        let data = JSON.parse(e.nativeEvent.data);
+        switch (data.type) {
+            case 'error': {
+                const { binderror } = props;
+                binderror &&
+                    binderror(getCustomEvent('error', e, {
+                        detail: {
+                            errMsg: data.payload.message
+                        },
+                        layoutRef
+                    }, props));
+                break;
+            }
+            default: {
+                if (data.payload) {
+                    // createLinearGradient 方法调用需要在 constructors 中需要注册 CanvasGradient
+                    const constructor = constructors[data.meta.constructor];
+                    if (constructor) {
+                        const { args, payload } = data;
+                        // RN 端同步生成一个 CanvasGradient 的实例
+                        const object = constructor.constructLocally(canvasRef.current, ...args);
+                        Object.assign(object, payload, {
+                            [WEBVIEW_TARGET]: data.meta.target
+                        });
+                        data = {
+                            ...data,
+                            payload: object
+                        };
+                    }
+                    for (const listener of canvasRef.current.listeners) {
+                        listener(data.payload);
+                    }
+                }
+                if (canvasRef.current.bus) {
+                    canvasRef.current.bus.handle(data);
+                }
+            }
+        }
+    }, []);
+    const onLoad = useCallback(() => {
+        setIsLoaded(true);
+        if (canvasRef.current?.bus) {
+            canvasRef.current.bus.resume();
+        }
+    }, []);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle,
+        node: canvasRef.current,
+        context: context2D
+    });
+    if (Platform.OS === 'android') {
+        const isAndroid9 = Platform.Version >= 28;
+        return createElement(View, innerProps, createElement(WebView, {
+            ref: (element) => {
+                if (canvasRef.current) {
+                    canvasRef.current.webview = element;
+                }
+            },
+            style: [
+                isAndroid9 ? stylesheet.webviewAndroid9 : stylesheet.webview,
+                { height, width }
+            ],
+            source: { html },
+            originWhitelist: originWhitelist,
+            onMessage: onMessage,
+            onLoad: onLoad,
+            overScrollMode: 'never',
+            mixedContentMode: 'always',
+            scalesPageToFit: false,
+            javaScriptEnabled: true,
+            domStorageEnabled: true,
+            thirdPartyCookiesEnabled: true,
+            allowUniversalAccessFromFileURLs: true
+        }));
+    }
+    return createElement(View, innerProps, createElement(WebView, {
+        ref: (element) => {
+            if (canvasRef.current) {
+                canvasRef.current.webview = element;
+            }
+        },
+        style: [stylesheet.webview, { height, width }],
+        source: { html },
+        originWhitelist: originWhitelist,
+        onMessage: onMessage,
+        onLoad: onLoad,
+        scrollEnabled: false
+    }));
+});
+_Canvas.displayName = 'mpxCanvas';
+export default _Canvas;

package/lib/runtime/components/react/dist/mpx-canvas/utils.jsx

@@ -0,0 +1,89 @@
+import { useEffect, useRef } from 'react';
+export const WEBVIEW_TARGET = '@@WEBVIEW_TARGET';
+export const constructors = {};
+export const ID = () => Math.random().toString(32).slice(2);
+const SPECIAL_CONSTRUCTOR = {
+    ImageData: {
+        className: 'Uint8ClampedArray',
+        paramNum: 0
+    }
+};
+export const registerWebviewTarget = (instance, targetName) => {
+    instance[WEBVIEW_TARGET] = targetName;
+};
+export const registerWebviewProperties = (instance, properties) => {
+    Object.entries(properties).forEach(([key, initialValue]) => {
+        const privateKey = `__${key}__`;
+        instance[privateKey] = initialValue;
+        Object.defineProperty(instance, key, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return instance[privateKey];
+            },
+            set(value) {
+                instance.postMessage({
+                    type: 'set',
+                    payload: {
+                        target: instance[WEBVIEW_TARGET],
+                        key,
+                        value
+                    }
+                });
+                if (instance.forceUpdate) {
+                    instance.forceUpdate();
+                }
+                return (instance[privateKey] = value);
+            }
+        });
+    });
+};
+export const registerWebviewMethods = (instance, methods) => {
+    methods.forEach(method => {
+        instance[method] = (...args) => {
+            return instance.postMessage({
+                type: 'exec',
+                payload: {
+                    target: instance[WEBVIEW_TARGET],
+                    method,
+                    args
+                }
+            });
+        };
+    });
+};
+export const registerWebviewConstructor = (constructor, constructorName) => {
+    constructors[constructorName] = constructor;
+    constructor.constructLocally = function (...args) {
+        return new constructor(...args, true);
+    };
+    constructor.prototype.onConstruction = function (...args) {
+        if (SPECIAL_CONSTRUCTOR[constructorName] !== undefined) {
+            const { className, paramNum } = SPECIAL_CONSTRUCTOR[constructorName];
+            args[paramNum] = { className, classArgs: [args[paramNum]] };
+        }
+        this[WEBVIEW_TARGET] = ID();
+        this.postMessage({
+            type: 'construct',
+            payload: {
+                constructor: constructorName,
+                id: this[WEBVIEW_TARGET],
+                args
+            }
+        });
+    };
+    constructor.prototype.toJSON = function () {
+        return { __ref__: this[WEBVIEW_TARGET] };
+    };
+};
+export const useWebviewBinding = ({ targetName, properties = {}, methods = [] }) => {
+    const instanceRef = useRef({});
+    useEffect(() => {
+        if (instanceRef.current) {
+            registerWebviewTarget(instanceRef.current, targetName);
+            registerWebviewProperties(instanceRef.current, properties);
+            registerWebviewMethods(instanceRef.current, methods);
+        }
+    }, []);
+    return instanceRef;
+};

package/lib/runtime/components/react/dist/mpx-checkbox-group.jsx

@@ -0,0 +1,90 @@
+/**
+ * ✔ bindchange
+ */
+import { useRef, forwardRef, useContext, useMemo, useEffect, createElement } from 'react';
+import { View } from 'react-native';
+import { warn } from '@mpxjs/utils';
+import { FormContext, CheckboxGroupContext } from './context';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
+const CheckboxGroup = forwardRef((props, ref) => {
+    const propsRef = useRef({});
+    propsRef.current = props;
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const formContext = useContext(FormContext);
+    let formValuesMap;
+    if (formContext) {
+        formValuesMap = formContext.formValuesMap;
+    }
+    const groupValue = useRef({}).current;
+    const defaultStyle = {
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+    };
+    const styleObj = extendObject({}, defaultStyle, style);
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { style: normalStyle });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const getValue = () => {
+        const arr = [];
+        for (const key in groupValue) {
+            if (groupValue[key].checked) {
+                arr.push(key);
+            }
+        }
+        return arr;
+    };
+    const resetValue = () => {
+        Object.keys(groupValue).forEach((key) => {
+            groupValue[key].checked = false;
+            groupValue[key].setValue(false);
+        });
+    };
+    if (formValuesMap) {
+        if (!props.name) {
+            warn('If a form component is used, the name attribute is required.');
+        }
+        else {
+            formValuesMap.set(props.name, { getValue, resetValue });
+        }
+    }
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
+    const innerProps = useInnerProps(props, extendObject({
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle)
+    }, layoutProps), [
+        'name'
+    ], {
+        layoutRef
+    });
+    const contextValue = useMemo(() => {
+        const notifyChange = (evt) => {
+            const { bindchange } = propsRef.current;
+            bindchange &&
+                bindchange(getCustomEvent('tap', evt, {
+                    layoutRef,
+                    detail: {
+                        value: getValue()
+                    }
+                }, propsRef.current));
+        };
+        return {
+            groupValue,
+            notifyChange
+        };
+    }, []);
+    return createElement(View, innerProps, createElement(CheckboxGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current
+    })));
+});
+CheckboxGroup.displayName = 'MpxCheckboxGroup';
+export default CheckboxGroup;

package/lib/runtime/components/react/dist/mpx-checkbox.jsx

@@ -0,0 +1,131 @@
+/**
+ * ✔ value
+ * ✔ disabled
+ * ✔ checked
+ * ✔ color
+ */
+import { useState, useRef, forwardRef, useEffect, useContext, createElement } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { warn } from '@mpxjs/utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import Icon from './mpx-icon';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
+import { CheckboxGroupContext, LabelContext } from './context';
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    wrapper: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 24,
+        height: 24,
+        borderColor: '#D1D1D1',
+        borderWidth: 1,
+        borderRadius: 3,
+        backgroundColor: '#ffffff',
+        marginRight: 5
+    },
+    wrapperDisabled: {
+        backgroundColor: '#E1E1E1'
+    },
+    icon: {
+        opacity: 0
+    },
+    iconChecked: {
+        opacity: 1
+    }
+});
+const Checkbox = forwardRef((checkboxProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(checkboxProps);
+    const { value = '', disabled = false, checked = false, color = '#09BB07', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap, _onChange } = props;
+    const [isChecked, setIsChecked] = useState(!!checked);
+    const groupContext = useContext(CheckboxGroupContext);
+    let groupValue;
+    let notifyChange;
+    const defaultStyle = extendObject({}, styles.wrapper, disabled ? styles.wrapperDisabled : null);
+    const styleObj = extendObject({}, styles.container, style);
+    const onChange = (evt) => {
+        if (disabled)
+            return;
+        const checked = !isChecked;
+        setIsChecked(checked);
+        if (groupValue) {
+            groupValue[value].checked = checked;
+        }
+        notifyChange && notifyChange(evt);
+        // Called when the switch type attribute is checkbox
+        _onChange && _onChange(evt, { checked });
+    };
+    const onTap = (evt) => {
+        bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
+        onChange(evt);
+    };
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style: extendObject({}, defaultStyle, normalStyle),
+        change: onChange
+    });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
+    if (backgroundStyle) {
+        warn('Checkbox does not support background image-related styles!');
+    }
+    const labelContext = useContext(LabelContext);
+    if (groupContext) {
+        groupValue = groupContext.groupValue;
+        notifyChange = groupContext.notifyChange;
+    }
+    if (labelContext) {
+        labelContext.current.triggerChange = onChange;
+    }
+    const innerProps = useInnerProps(props, extendObject({
+        ref: nodeRef,
+        style: extendObject({}, innerStyle, layoutStyle)
+    }, layoutProps, {
+        bindtap: !disabled && onTap
+    }), [
+        'value',
+        'disabled',
+        'checked'
+    ], {
+        layoutRef
+    });
+    useEffect(() => {
+        if (groupValue) {
+            groupValue[value] = {
+                checked: checked,
+                setValue: setIsChecked
+            };
+        }
+        return () => {
+            if (groupValue) {
+                delete groupValue[value];
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (checked !== isChecked) {
+            setIsChecked(checked);
+            if (groupValue) {
+                groupValue[value].checked = checked;
+            }
+        }
+    }, [checked]);
+    return createElement(View, innerProps, createElement(View, { style: defaultStyle }, createElement(Icon, {
+        type: 'success_no_circle',
+        size: 18,
+        color: disabled ? '#ADADAD' : color,
+        style: isChecked ? styles.iconChecked : styles.icon
+    })), wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }));
+});
+Checkbox.displayName = 'MpxCheckbox';
+export default Checkbox;

package/lib/runtime/components/react/dist/mpx-form.jsx

@@ -0,0 +1,68 @@
+/**
+ * ✘ report-submit
+ * ✘ report-submit-timeout
+ * ✔ bindsubmit
+ * ✔ bindreset
+ */
+import { View } from 'react-native';
+import { useRef, forwardRef, useMemo, createElement } from 'react';
+import useNodesRef from './useNodesRef';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import { FormContext } from './context';
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject } from './utils';
+const _Form = forwardRef((fromProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(fromProps);
+    const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const formRef = useRef(null);
+    useNodesRef(props, ref, formRef, {
+        style: normalStyle
+    });
+    const propsRef = useRef({});
+    propsRef.current = props;
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef });
+    const innerProps = useInnerProps(props, extendObject({
+        style: extendObject({}, innerStyle, layoutStyle),
+        ref: formRef
+    }, layoutProps), [
+        'bindsubmit',
+        'bindreset'
+    ], { layoutRef });
+    const contextValue = useMemo(() => {
+        const formValuesMap = new Map();
+        const submit = () => {
+            const { bindsubmit } = propsRef.current;
+            const formValue = {};
+            for (const name of formValuesMap.keys()) {
+                if (formValuesMap.get(name).getValue) {
+                    formValue[name] = formValuesMap.get(name).getValue();
+                }
+            }
+            bindsubmit && bindsubmit(getCustomEvent('submit', {}, {
+                detail: {
+                    value: formValue
+                },
+                layoutRef
+            }, propsRef.current));
+        };
+        const reset = () => {
+            const { bindreset } = propsRef.current;
+            bindreset && bindreset();
+            formValuesMap.forEach(item => item.resetValue());
+        };
+        return {
+            formValuesMap,
+            submit,
+            reset
+        };
+    }, []);
+    return createElement(View, innerProps, createElement(FormContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
+});
+_Form.displayName = 'MpxForm';
+export default _Form;

package/lib/runtime/components/react/dist/mpx-icon/index.jsx

@@ -0,0 +1,50 @@
+/**
+ * ✔ type
+ * ✔ size
+ * ✔ color
+ */
+import { forwardRef, useRef, createElement } from 'react';
+import { Image } from 'react-native';
+import useInnerProps from '../getInnerListeners';
+import useNodesRef from '../useNodesRef';
+import { useLayout, useTransformStyle, extendObject } from '../utils';
+import Success from './icons/success.png';
+import SuccessNoCircle from './icons/success_no_circle.png';
+import Info from './icons/info.png';
+import Warn from './icons/warn.png';
+import Waiting from './icons/waiting.png';
+import Cancel from './icons/cancel.png';
+import Download from './icons/download.png';
+import Search from './icons/search.png';
+import Clear from './icons/clear.png';
+const IconTypeMap = new Map([
+    ['success', Success],
+    ['success_no_circle', SuccessNoCircle],
+    ['info', Info],
+    ['warn', Warn],
+    ['waiting', Waiting],
+    ['cancel', Cancel],
+    ['download', Download],
+    ['search', Search],
+    ['clear', Clear]
+]);
+const Icon = forwardRef((props, ref) => {
+    const { type, size = 23, color, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const source = IconTypeMap.get(type);
+    const defaultStyle = { width: ~~size, height: ~~size };
+    const styleObj = extendObject({}, defaultStyle, style);
+    const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { style: normalStyle });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const innerProps = useInnerProps(props, extendObject({
+        ref: nodeRef,
+        source,
+        style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
+    }, layoutProps), [], {
+        layoutRef
+    });
+    return createElement(Image, innerProps);
+});
+Icon.displayName = 'MpxIcon';
+export default Icon;