🌈
【React】MUIアイコンにグラデーションを追加する
やりたいこと
-
単色であれば以下のような感じに色指定できるが、今回はグラデーションを追加したい。
<HomeIcon sx={{ color: "#FFBF00" }} /> -
ちなみに、一般的にグラデーションを指定するときに使うbackground要素で指定するとこうなる。
<Home sx={{ background: 'linear-gradient(106.73deg, #0080FE 0.46%, #00DDDD 100.87%)' }} />,
解決策
muiアイコンのようなSVGにグラデーションを追加するには、<linearGradient>を使用すると良いみたい。
import { Home } from '@mui/icons-material'
export const HomeIcon = () => (
<>
<svg width={0} height={0}>
<linearGradient id="linearColors" gradientTransform="rotate(90)">
<stop offset={0} stopColor="#0080FE" />
<stop offset={1} stopColor="#00DDDD" />
</linearGradient>
</svg>
<Home sx={{ fill: 'url(#linearColors)' }} />
</>
)
参考サイト
Discussion