Vue:子コンポーネントのsvgの色の切り替え

166
NO IMAGE

親コンポーネントでsvgを指定し、それを表示するコンポーネントがありました。
このコンポーネントでのsvgの色の切り替えで詰まったので、対応方法を書いていきます。また、コードは、記事に関係のある個所だけを抜粋しています。

以下のような、コンポーネントがあります。
svg属性でsvgの種類、スタイルで色を指定してます。

<template>
  <svgElement svg="arrow" class="svg-class"></svgElement>
</template>

<style scoped>
.svg-class {
  color: black;
}
</style>

はじめは、↑でしているようにsvgElementコンポーネントにスタイルをつけて、色指定すればいいと思いましたが、うまくいきませんでした。

svgの色指定は次のようにsvg-classの下のpathタグにする必要があります。

<style scoped>
.svg-class path {
  fill: black;
}
</style>

しかし、親のコンポーネントで<style scoped>となっているため、スタイルの指定が子コンポーネントに伝わりません。

なので、次のように親コンポーネントから色の指定を受け取り、子コンポーネントでスタイルを設定するようにしました。

親コンポーネント

<template>
  <svgElement svg="arrow" fill="black"></svgElement>
</template>

子コンポーネント

<template>
  <component class="svg-class" :style="variant"/>
</template>

<script lang="ts">

@Prop({ default: '#969595' })
fill?: string

get variant () {
  return {
    '--variant': this.fill
  }
}
</script>

<style scoped>
.svg-class path {
  fill: var(--variant);
}
</style>