【React】Materialu-uiでGoogle関連のアイコンを表示する方法

2282 ワード
React material-ui React テキストリンク

皆さんこんにちは！

ふと、Materialu-uiのアイコンで「Google」のアイコンを表示させたかったのですが、なぜかMaterialu-uiには存在しませんでした。

YoutubeアイコンはあるのになぜGoogleアイコンは無いんでしょうね。。。

そんな問題に直面していたのですが、解決することができました。

npmの@trejgun/material-ui-icons-googleというパッケージです。

これを使えばGoogle関連のほとんどのアイコンを使用することができます。

こんな感じで。

一応URLも載せておきますね。

https://www.npmjs.com/package/@trejgun/material-ui-icons-google

こちらのサイトにもやり方は書いているのですが、せっかく見て頂いた方々にこちらを見て下さいなんて言えない。

ということで説明していきます！

パッケージのインストール

まずはパッケージのインストールを行います。

npm i --save @trejgun/material-ui-icons-google

コンポーネントとして使用

あとはいつも通りコンポーネントとして使用します。

import { Search } from "@trejgun/material-ui-icons-google"

<Button startIcon={<Search />}>Google アカウントでログイン</Button>

こんな感じでMaterialu-uiでGoogle関連のアイコンを使用することができます！

以上、「【React】Materialu-uiでGoogle関連のアイコンを表示する方法」でした！！

Thank you for reading