MySvgComponent_with_props_vue

MySvgComponent.vue

<template>
    <svg
        :width="width"
        :height="height"
        :viewBox="viewBox"
        xmlns="http://www.w3.org/2000/svg"
    >
        <circle
            :cx="circle.cx"
            :cy="circle.cy"
            :r="circle.r"
            :fill="circle.fill"
        />
        <!-- Add more SVG elements as needed -->
    </svg>
</template>

<script setup>
//import { defineProps } from 'vue';
/*
In Vue 3's <script setup> syntax, you don't need to import defineProps;
it is automatically available in the setup context.
However, if you were using the standard Composition API without
the <script setup> shorthand, you would need to import it.
*/
/*
Usage:
<SvgComponent width="200" height="200" viewBox="0 0 200 200" :circle="{ cx: '100', cy: '100', r: '50', fill: 'blue' }" />
*/
// Define the props for the SVG component
const props = defineProps({
    width: {
        type: String,
        default: '100',
    },
    height: {
        type: String,
        default: '100',
    },
    viewBox: {
        type: String,
        default: '0 0 100 100',
    },
    circle: {
        type: Object,
        default: () => ({
            cx: '50',
            cy: '50',
            r: '10',
            fill: 'red',
        }),
    },
});
</script>

<style scoped>
/* Add styles if needed */
</style>