SVGアイコンアプレット、及び動的に変化するアイコンの色コードによって使用mpvueマイクロチャネル

まず、次のSVG形式（公式解説与えられた）で起動します。

1. これは、スケーラブルベクターグラフィックスSVG（スケーラブルベクターグラフィックス）を指し
2. SVGはベクトルグラフィックスベースのネットワークを定義するために使用されます
3. SVGはXML形式定義グラフィックを使用しています
4. SVG倍率下の画像またはその画像品質のサイズを変更するには、失われることはありません
5. SVGは、標準のワールド・ワイド・ウェブ・コンソーシアムであります
6. など、全体としてW3C DOMとXSLなどのSVG規格

mpvueでは、直接SVGアイコンを使用できるように：

<img style="width:45rpx;height:45rpx;" src="/static/icon/index/zaixianzhanting.svg"/>

SVGパスアイコン：

我々は知っているが、XMLコードで定義されたSVGアイコンxml形式で塗りつぶし、我々は他の色のアイコンが必要なとき、SVGのデフォルトのUIは、黒である財産のアイコンの色を変更します我々は直接のソースコード修正することができ塗りつぶしの色の変更に目的を達成するために属性値を。

（注：SVGが複数いる可能塗りつぶしを、交換が必要なときに交換することができます）

しかし、我々は動的には？各色のアイコンであるユーザーが実行するアイコンの色を変更し、新しいSVGの参照を作成する必要がある場合は？答えはノー間違いではありません。

直接アイデアへ：
SVG XMLは、画像によって定義されているので、なぜ私たちは、その後どこ、最初のソースコードSVGアイコンを取得することはできません塗りつぶしの属性値は、我々はそれを必要とする色を置き換えますか？
次いで、Base64形式にソースコード、次に交換後、そのアイコンの動的な色の変化を達成することができませんか？

アプレットは、APIが我々の方法のために提供されるファイルの読み取り：wx.getFileSystemManagerを（）readFileの（）。
私たちは、この方法により、ソースSVGファイルを取得することができます。

mpvueフレーム我々は直接個々のページの使用を容易にするために、VUEアセンブリをパッケージ化することができます

コンポーネントのコード：

アイコンコンポーネント：

<template>
    <div>
      <img :style="{width: size + 'rpx',height: size + 'rpx'}" :src="imgurl"/>
    </div>
</template>

<script>
  import { Base64 } from 'js-base64'

export default {
    props: {
      size: {
        type: [Number, String],
        default: 45
      },
      src: [String],
      color: [String]
    },
    data () {
      return {
        imgurl: ''
      }
    },
    created () {
      if (this.color) {
        // 先获取svg源码字符串，替换 file="#ffffff" 颜色这个属性，再将这个字符串转化为base64，达到修改颜色的目的
        wx.getFileSystemManager().readFile({ //调用微信小程序接口读取文件 
          filePath: this.src,
          encoding: 'binary', // 解析成源码格式
          success: res => {
            const str = res.data.replace(/fill="#[a-zA-Z0-9]{0,6}"/, 'fill="' + this.color + '"')
            const base64 = Base64.encode(str)
            this.imgurl = 'data:image/svg+xml;base64,' + base64
          }
        })
      } else {
        this.imgurl = this.src
      }
    }
  }
</script>

コンポーネント：それは〜最初に登録して、ページを使用することができ言うまでもなく使用VUEのコンポーネント。

<icons  src="/static/icon/index/zaixianzhanting.svg" color="#cccccc" size="40"/>

Base64文字列をソースに導入する必要がJS-BASE64このJS

NPMは、直接インストール：
$ JS-Base64で--saveインストールNPM

さて、あなたは完了です。

元は容易ではない、ソースを明記してください！！