親コンポーネントで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>