Vue.js (2.x) example

play.vue

<template>
    <button @click="toggle">
        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
            <symbol id="play" viewBox="0 0 24 24">
                <path d="M0 0h24v24H0z" fill="none"/>
                <path d="M8 5v14l11-7z"/>
            </symbol>
            <symbol id="pause" viewBox="0 0 24 24">
                <path d="M0 0h24v24H0z" fill="none"/>
                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
            </symbol>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" height="34px" width="100%">
            <use :xlink:href="[playing ? `#pause` : `#play`] " />
        </svg>
    </button>
</template>

<style scoped>
    button {
        all: unset;
        fill: white;
        width: 46px;
        overflow: hidden;
    }
</style>

<script>
export default {
    props: {
        playing: {
            type: Boolean,
            required: true
        }
    },

    computed: {
        label: function () {
            return this.playing ? 'Pause' : 'Play';
        }
    },

    methods: {
        toggle() {
            this.$emit('toggle-play-state');
        }
    }
}
</script>