<template>
    <span class="error">
        <alert-circle> {{ errorMessage }}
    </span>
</template>

<script>
import AlertCircle from '@square/maker-icons/AlertCircle';

export default {
    name: 'MyErrorComponent',
    components: {
        AlertCircle,
    },
    props: {
        errorMessage: {
            type: String,
            required: true,
        },
    },
};
</script>

<style scoped>
.error {
    color: red; /* only colors the text */
    fill: red; /* required to color the icon */
}
</style>