Vue はカラー SVG ファイルを動的に塗りつぶします

Question

VueJS 3 を使用して Twitter クローン アプリを作成しています。

Twitter のロゴを .svg ファイルとして保存し、<img /> タグとともに使用できます。 <svg> タグに fill="#fff" 属性を指定すると、その色を変更することもできます。ただし、この .svg ファイルを複数の場所で異なる色で使用したいと考えています。

そこで、<img /> にクラス fill-white、bg-white、text-white を提供してみました。 タグを付けて SVG の色を動的に変更しますが、機能しません。

私の現在の .svg ファイル - ホワイト

リーリー

画像タグ

リーリー

これを .svg ファイルで試してみました

リーリー

この SVG の色を編集可能にする必要があることはわかっています。しかし、これを行う方法が見つかりません。

Answer 1

const app = Vue.createApp({
  data() {
    return {
      colors: ['#8A2BE2', 'rgb(255,255,0)', '#008000'],
    };
  },
})
app.component('myImg', {
  template: `
    <svg height="40" viewBox="0 0 107.1 107.1" style="enable-background:new 0 0 107.1 107.1;" xml:space="preserve">
    <path :fill="color" d="M2.287,47.815l23.096,19.578L18.2,96.831c-1.411,5.491,4.648,9.998,9.575,6.901L53.55,87.813l25.774,15.916   c4.79,2.955,10.844-1.408,9.576-6.902l-7.184-29.435l23.099-19.579c4.363-3.661,2.111-10.844-3.662-11.267l-30.282-2.255   L59.464,6.266c-2.112-5.211-9.577-5.211-11.832,0L36.225,34.292L5.944,36.547C0.174,37.113-2.081,44.154,2.287,47.815z"/>
  </svg>
  `,
  props: ['color']
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="col in colors">
    <my-img :color="col"></my-img>
  </div>
</div>

Answer 2

svg ファイルからコンポーネントを作成し、パディングを props にバインドできます。

リーリー リーリー