<template>
  <svg
    v-bind="{ ...getAttrs($attrs), ...options }"
    :style="{
      minWidth: options.minWidth,
      minHeight: options.minHeight
    }"
    class="svg-folder-container"
    v-html="options.html"
  />
</template>

<script>
import { getAttrs } from '@inside-library/helpers/Attrs'

export default {
  name: 'SvgFolder',
  props: {
    width: {
      type: String,
      default: '20'
    },
    height: {
      type: String,
      default: '20'
    },
    path: {
      type: String,
      required: true
    }
  },
  computed: {
    options() {
      return {
        width: this.width,
        height: this.height,
        minWidth: `${this.width}px`,
        minHeight: `${this.height}px`,
        viewBox: `0 0 ${this.width} ${this.height}`,
        html: `<path class="st0" d="${this.path}"></path>`,
        stroke: 'none'
      }
    }
  },
  methods: {
    getAttrs
  }
}
</script>

<style lang="scss">
.svg-folder-container {
  margin: auto 0;
}
</style>
