【CSS mask-image】SVGなどのアイコン画像の色を変更する方法！

以前、CSSのfilterプロパティを使う方法で画像の色を変更する方法を紹介しました。
【CSS filter】svgをJSなし・インライン読み込みなしで自由に色を変更する方法！
のOGP画像
今回は、mask-imageを使います。
filterと違ってグラデーションが使えます。

画像を用意

まずは画像を用意します。前回と違って、何色でも大丈夫。

pngでもsvgでも、何色でもOK

例1 HTML

<p id="cat"></p>

実際は疑似要素を使って文字の前に表示することが多いと思いますが、例としてこんな感じです。

例1-1：べた塗り

#cat{
	width:100px;
	height:100px;

	-webkit-mask-image: url(img/cat.svg);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;

	mask-image: url(img/cat.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;

	/*変更したい色をここに書く*/
	background-color: pink;
}

Chromeではプレフィックスが必要です。-webkit-を付けましょう。その次に、プレフィックスなしのプロパティを設定します。また、繰り返しや表示位置を設定することができます。
最後の行のようにbackground-colorを設定することで、好きな色に変更できます。

background-color:pink;

background-color:lightblue;

background-color:yellow;

例1-2：レインボーカラー

最初の例は1色でべた塗りですが、backgroundプロパティでいろいろできます。

#cat{
	/*省略*/

	/*レインボー*/
	background: linear-gradient(to right, red, orange, yellow, green, blue, darkblue, purple);
}

参考：linear-gradient() - CSS: カスケーディングスタイルシート | MDN

例2：丸くくりぬく

丸い円の中にアイコンを置くこともできます。

ニャ～ニャ～～

<p id="cat2">ニャ～ニャ～～</p>

#cat2{
	/*アイコンを50pxで表示*/
	--iconsize: 50px;
	--padding: 10px;

	color: #FFF;

	display: inline-flex;
	align-items: center;
	position: relative;

	min-height: calc(var(--iconsize) + var(--padding));
	padding: var(--padding);
	/*右側にアイコンのスペースを確保*/
	padding-right: calc(var(--iconsize) + var(--padding));

	background-image: radial-gradient(circle closest-corner at calc(100% - var(--iconsize) / 2 - var(--padding) / 2) 50%, #FFF calc(var(--iconsize) / 2 - 1px), transparent calc(var(--iconsize) / 2));
	background-repeat: no-repeat;
	background-color: pink;

}#cat2::after{
	content:'';
	width:var(--iconsize);
	height:var(--iconsize);

	display: inline-block;
	position: absolute;
	right:0;

	padding-right: inherit;

	background-color:inherit;
	-webkit-mask-image: url(img/cat.svg);
	-webkit-mask-size: calc(var(--iconsize) - var(--padding));
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-image: url(img/cat.svg);
	mask-size: calc(var(--iconsize) - var(--padding));
	mask-repeat: no-repeat;
	mask-position: center;
}

解説

--iconsize: 50px;
--padding: 10px;

疑似要素に継承させたいので、カスタムプロパティを設定しています。
アイコンの大きさとパディングです。

min-height: calc(var(--iconsize) + var(--padding));
padding: var(--padding);
padding-right: calc(var(--iconsize) + var(--padding));

min-heightでアイコンと円を表示できる高さを確保。
padding-rightでアイコンの表示スペースを確保しています。

background-image: radial-gradient(
	circle closest-corner at calc(100% - var(--iconsize) / 2 - var(--padding) / 2) 50%,

	#FFF calc(var(--iconsize) / 2 - 1px),

	transparent calc(var(--iconsize) / 2)
);

radial-gradientで、丸い形を作っています。
詳しくはradial-gradient() - CSS: カスケーディングスタイルシート | MDN
をごらんください。
1段目は円の位置。
半径を設定したいので、calcで / 2したりpadding分を調整したりしています。
2段目で – 1px しているのは、本当は必要ないんですが、3段目より小さい数字を設定することでガビガビを回避しています。

アイコンは疑似要素で表示しています。
　
リンクボタンなどに便利です。