manuel
(Manuel Kostka)
1
テーマにデフォルトでアイコンがない場合でも、カスタムアイコンを表示したいと考えています。一般的には問題なく動作するのですが、fill に currentColor を使用することができません。
そのため、以下は動作します：
&::before {content: svg-uri('<svg fill="red" ...
しかし、以下は動作しません。単に黒色にデフォルト設定されてしまいます：
&::before {content: svg-uri('<svg fill="currentColor" ...
これまでに同じことを実現された方はいますか？何が不足しているのかよくわかりません。
私の知る限り、currentColor は CSS でインライン化された SVG では機能しません。残念ながら、SVG 内の色はハードコーディングする必要があります。以前、色を変更するために使用した回避策として CSS フィルタ がありますが、これも欠点があります。
manuel
(Manuel Kostka)
3
ああ、わかりました。@awesomerobot さん、ありがとうございます！異なるカラーテーマにも対応できる唯一のアプローチは、アイコンをマークアップに含めることですね？
はい、残念ながらです！CSS でより良い方法があればいいのですが、特定の場所に装飾的なアイコンを追加する際には、CSS の方が簡単な場合があります。