外部ファイルのSVGにCSSのcolorプロパティを適用する

currentColorの指定を含むSVGファイルを用意する

グラフィック中の、色を変更したい要素に fill="currentColor" を適用する。
外部参照で利用するため、グラフィック全体を <symbol> として定義する。
ここでは各グラフィックを別ファイルに記述したが、1つのSVGファイルに複数のsymbolを定義してもよい。ただし、 id は重複しないようにする。

🐦 twitter.svg のソース

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="symbol" viewBox="0 0 512 512">
      <path fill="currentColor" d="M512 113.2c-18.8 8.4-39.1 14-60.3 16.5 21.7-13 38.3-33.6 46.2-58.1-20.3 12-42.8 20.8-66.7 25.5-19.2-20.4-46.5-33.1-76.7-33.1-58 0-105 47-105 105 0 8.2 0.9 16.2 2.7 23.9-87.3-4.4-164.7-46.2-216.5-109.8-9 15.5-14.2 33.6-14.2 52.8 0 36.4 18.5 68.6 46.7 87.4-17.2-0.5-33.4-5.3-47.6-13.1 0 0.4 0 0.9 0 1.3 0 50.9 36.2 93.4 84.3 103-8.8 2.4-18.1 3.7-27.7 3.7-6.8 0-13.3-0.7-19.8-1.9 13.4 41.7 52.2 72.1 98.1 73-36 28.2-81.2 45-130.5 45-8.5 0-16.8-0.5-25.1-1.5 46.6 29.9 101.8 47.2 161.1 47.2 193.2 0 298.9-160.1 298.9-298.9 0-4.6-0.1-9.1-0.3-13.6 20.5-14.7 38.3-33.2 52.4-54.3z"></path>
    </symbol>
  </defs>
</svg>

😀 happy.svg のソース

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="symbol" viewBox="0 0 512 512">
      <circle fill="currentColor" class="face" cx="256" cy="256" r="256"/>
      <path fill="#FD4B92" class="mouse" d="M256,299.4c58,0,113.1-15.4,160-42.5C408.7,346.1,339.4,416,256,416c-83.4,0-152.7-69.9-160-159.2C142.9,283.9,198,299.4,256,299.4L256,299.4z"/>
      <ellipse fill="#000000" class="eye" cx="160" cy="176" rx="32" ry="48"/>
      <ellipse fill="#000000" class="eye" cx="352" cy="176" rx="32" ry="48"/>
    </symbol>
  </defs>
</svg>

外部ファイルのSVGに含まれる <symbol> を参照して描画

読み込む外部SVGファイルは同一ドメイン内に設置されたものに制限される。
別ドメインのファイルを参照しても、ブラウザは読み込み処理をスキップしてしまう。

<p>
  <svg>
    <use xlink:href="twitter.svg#symbol" />
  </svg>
  <svg>
    <use xlink:href="happy.svg#symbol" />
  </svg>
</p>

CSSで color を適用

color を指定するとSVG内の currentColor に適用される。
CSSの影響を受けるのは、currentColorが適用された要素のみ。

p {
  color: #1c9bf0;
}

p:hover {
  color: #4fc3f7;
}

p {
  color: #fdd835;
}

p:hover {
  color: #fff176;
}

p {
  color: #8bc34a;
}

p:hover {
  color: #c5e1a5;
}

結論

アイコンなど、単色のグラフィックであればIcoMoonを使ってSVGではなくフォントファイルにしてwebfontとして扱う方が楽。
自分もふだんはサイトで利用するアイコンなどのグラフィックをすべてIcoMoonでフォント化するが、上のhappy.svgのように、グラフィックの一部の要素のみ色をコントロールしたい。というような場合にはこの方法が優秀。

FYI: SVGのアイコンをWebフォントにする（IcoMoonの使い方） | 125naroom /デザインするところ（会社）です。