🌈

【React】MUIアイコンにグラデーションを追加する

2022/10/21に公開約1,000字

やりたいこと

  • 単色であれば以下のような感じに色指定できるが、今回はグラデーションを追加したい。

    <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)' }} />
  </>
)

参考サイト

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient
https://codeutility.org/javascript-adding-a-linear-gradient-to-material-ui-icon-stack-overflow/

Discussion

ログインするとコメントできます