demo/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>vue-inline-svg</title>

    <script src="https://unpkg.com/vue@3"></script>
    <script src="../dist/vue-inline-svg.js"></script>
    <script src="./index.js" defer></script>
</head>
<body>
<div id="app">
    <div>
        <div>
            <inline-svg
                    id="svg1" width="150" height="150"
                    :src="`./img/${currentIcon}.svg`"
                    :fill="false"
                    :title="currentTitle"
                    @click="logClick"
                    @loaded="logLoaded($event, 'svg1')"
                    @unloaded="logUnloaded('svg1')"
            ></inline-svg>
            <inline-svg
                    id="svg2"
                    :src="`./img/${currentIcon}.svg`"
                    :width="currentSize"
                    :height="currentSize"
                    :transform-source="transform"
                    :fill="''"
                    :title="currentTitle"
                    :keep-during-loading="false"
                    @loaded="logLoaded($event, 'svg2')"
                    @unloaded="logUnloaded('svg2')"
            ></inline-svg>
            <inline-svg id="svg3" src="./index.html" v-on:error="logError($event, 'svg3')"></inline-svg>

            <inline-svg
                width="150" height="150"
                src="./img/test-style.svg"
            ></inline-svg>
        </div>
        <div>
            src:
            <label>
                <input type="radio" name="icon" value="firefox" v-model="currentIcon">
                Firefox
            </label>
            <label>
                <input type="radio" name="icon" value="safari" v-model="currentIcon">
                Safari
            </label>
        </div>
        <div>
            attributes:
            <label>
                <input type="radio" name="size" value="150" v-model="currentSize">
                150
            </label>
            <label>
                <input type="radio" name="size" value="100" v-model="currentSize">
                100
            </label>
        </div>
        <div>
            transform-source:
            <label>
                <input type="radio" name="transform" value="none" v-model="currentTransform">
                none
            </label>
            <label>
                <input type="radio" name="transform" value="black" v-model="currentTransform">
                black
            </label>
            <label>
                <input type="radio" name="transform" value="green" v-model="currentTransform">
                green
            </label>
        </div>
    </div>
</div>
</body>
</html>