<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
    :viewBox="`0 0 ${width} ${height}`"
    :class="`mng-icon-${name}`"
    role="presentation"
  >
    <g
      ref="icon"
      :fill="!stroke ? color : 'none'"
      :stroke="stroke ? color : 'none'"
    >
      <component :is="name" />
    </g>
  </svg>
</template>
<script>
export default {
  data() {
    return {
      stroke: false,
    };
  },
  props: {
    name: {
      type: String,
      default: "integrations",
    },
    width: {
      type: [Number, String],
      default: 24,
    },
    height: {
      type: [Number, String],
      default: 24,
    },
    color: {
      type: String,
      default: "#37474F",
    },
  },
  mounted() {
    const children = Array.prototype.slice.call(this.$refs.icon.children);
    children.map((child) => {
      if (child.attributes.getNamedItem("stroke")) {
        this.stroke = true;
      }
    });
  },
};
</script>

<style scoped>
svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 300ms ease;
}
</style>