<template>
    <component :class="bem()" v-if="svgComponent" :is="svgComponent" v-bind="bindAttrs" />
    <inline-svg
        v-else
        :class="bem()"
        v-bind="bindAttrs"
        @loaded="$emit('loaded')"
        @unloaded="$emit('unloaded')"
        @error="$emit('error')"
    />
</template>

<script>
import InlineSvg from 'vue-inline-svg';
import PxBaseSvg from '../bases/PxBaseSvg.vue';

/**
 * A component that uses vue-inline-svg to load svg files inline. In addition to the functionality
 * provided by vue-inline-svg, this component will ensure a consistent approach to sizing and
 * perform basic string replacements.
 *
 * ```html
 * // show the icon at it's natural size
 * <px-svg src="require('~assets/icons/arrow.svg')" />
 *
 * // show the icon with a height of 0.5em (notice no units on the size -- we default to ems)
 * <px-svg src="require('~assets/icons/arrow.svg')" size="0.5" />
 *
 * // show the icon with a width 48px
 * <px-svg src="require('~assets/icons/arrow.svg')" size="48px" size-bias="width" />
 *
 * // replace fonts
 * <px-svg src="require('~assets/icons/next.svg')" :replacements="{'Circular Bold': 'web-circular'}" />
 * ```
 */

export default {
    name: 'PxSvg',
    mixins: [PxBaseSvg],
    components: { InlineSvg },
};
</script>

<style lang="scss">
.px-svg {
    color: inherit;
    display: inline-block;
    line-height: 1;
}
</style>
