React-Fontawesomeでアイコンの周りに影をつける方法

こんなデザインを実装したくてtext-shadow使ってませんか？

NG例

.fontawesome-class{
  text-shadow:0 0 rgba(0,0,0,0.5)
}

上手くいった例

.fontawesome-class{
  filter:drop-shadow(0 0 1px #000)
}

filterを使う事によって、React-fontawesomeを使って生成されるSVGに対してもshadowが効くようになります。

ちょっとぼやけますが、まずまず。