Vue mengisi fail SVG berwarna secara dinamik

Question

Saya sedang membuat aplikasi klon Twitter menggunakan VueJS 3.

Saya menyimpan logo Twitter sebagai fail .svg dan apabila menggunakannya dengan atribut <img /> 标记一起使用。当我为 <svg> 标记提供 fill="#fff" saya juga boleh menukar warnanya. Walau bagaimanapun, saya ingin menggunakan fail .svg ini di berbilang lokasi dan dalam warna yang berbeza.

Jadi saya cuba menukar warna svg secara dinamik dengan memberikannya <img /> 标签提供类 fill-white、bg-white 和 text-white tetapi ia tidak berfungsi.

Fail .svg semasa saya - Putih

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" aria-hidden="true">
    <g>
        <path fill="#fff" d="M23.643 4.937c-... 1.7-1.477 2.323-2.41z"></path>
    </g>
</svg>

Tag Gambar

<img
 src="/twitter-bird.svg"
 draggable="false"
 class="w-52 lg:w-96 fill-white"
 alt="Twitter Bird"
/>

Saya mencuba ini pada fail .svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" aria-hidden="true">
    <g>
        <path fill="params(fill) #fff" d="M23.643 4.937c-... 1.7-1.477 2.323-2.41z"></path>
    </g>
</svg>

Saya tahu saya perlu menjadikan warna svg ini boleh diedit. Tetapi saya tidak dapat mencari cara untuk melakukan ini.

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

Anda boleh membuat komponen daripada fail svg dan mengikat padding pada prop:

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>