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

公開:2020/09/16
更新:2020/09/16
1 min読了の目安(約400字TECH技術記事

こんなデザインを実装したくて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が効くようになります。

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