<template>
    <svg :width="`${size}px`" :height="`${size}px`" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="cancel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <rect id="Rectangle-2" x="0" y="0" width="23" height="23"></rect>
            <circle id="Oval" :stroke="color" stroke-width="1.5" fill-rule="nonzero" cx="11.5" cy="11.5" r="9.25"></circle>
            <g id="ic_announce_close-#E78B1F" transform="translate(5.500000, 5.500000)">
                <polygon id="Fill-1" points="0 12 12 12 12 0 0 0"></polygon>
                <g id="Group-4" transform="translate(2.250000, 2.250000)">
                    <path d="M7.5,0 L0,7.5" id="Fill-2" fill="#FFFFFF"></path>
                    <path d="M7.5,0 L0,7.5" id="Stroke-3" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </g>
                <g id="Group-7" transform="translate(2.250000, 2.250000)">
                    <path d="M0,0 L7.5,7.5" id="Fill-5" fill="#FFFFFF"></path>
                    <path d="M0,0 L7.5,7.5" id="Stroke-6" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </g>
            </g>
        </g>
    </svg>
</template>

<script>
export default {
    props: {
        size: {
            type: Number,
            default: 23
        },
        color: {
            type: String,
            default: '#FB7299'
        }
    },
}
</script>

<style>
</style>
