<template>
  <div class="icons-root">
    <Icon
      v-for="icon of icons"
      :key="icon"
      :icon="icon"
      :size="size"
      :style="style"
    />
  </div>
</template>

<script>
import Icon from './Icon'

export default {
  components: {
    Icon,
  },

  props: {
    icons: Array,
    stroke: String,
    fill: String,
    size: String,
  },

  computed: {
    style() {
      return {
        stroke: this.stroke,
        fill: this.fill,
      }
    },
  },
}
</script>

<style
  lang="postcss"
  scoped
>
  .icons-root {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;

    & > * {
      margin: 0 20px 20px 0;
    }
  }
</style>
