[Vuejs]-SVG with multiple path

UPDATE on how to make this code functional

<template>
  <svg
    v-if="name === 'shop'"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
  >
    <path
      d="M15.6 1.6H8.4c-.4 0-.7.3-.7.7v2.5h8.5V2.3c.1-.4-.2-.7-.6-.7z"
      :fill="colorDefault"
    />

  </svg>
</template>

<script>
export default {
  props: ["name", "colorDefault", "colorBlack"],
};
</script>

<IconShopVue
  color-default="#c0ffee"
  color-dark="#c0ffee"
  class="w-8 h-8"
  name="shop"
></IconShopVue>

You should put your svg into a .vue file, copy your SVG code into the template section. Then, pass some props to your .vue component and interpolate the actual default/dark colors as you would do with any other kind of props.

<my-cool-svg header-color="#c13127" outline-color="#ef5b49" fill-color="#c0ffee"></my-cool-svg>

This will provide a lot of flexibility overall VS working with a classic .svg file.

This is how the .vue should look like

<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="..." :fill="headerColor"/>
    <path d="..." :fill="outlineColor"/>
    <path d="..." :fill="fillColor"/>
    <g>
      <path d="..." :fill="fillColor"/>
    </g>
  </svg>

</template>

<script>
export default {
  props: ['headerColor', 'outlineColor', 'fillColor']
}
</script>