あなたの反応アプリにアイコンを追加する最も簡単な方法😎

偉大なUIはいくつかの偉大なアイコンを開始します。

彼らはあなたのウェブサイトに慣れを追加すると、アイコンが重要です.ハンバーガーメニューなど.誰もがより多くの情報を得るためにハンバーガーのアイコンをクリックするか、またはどのようにページの下部にあるダウン矢印、ユーザーがスクロールする必要がありますを示しています.
あなたが反応で働いているならば、あなたのプロジェクトにアイコンを実装することは非常に簡単です.
始めましょう.

資源

反応アイコン:https://react-icons.github.io/react-icons

デモ:https://react-icons-blog-example.netlify.app/

チャンネ17 / アイコンブログ

反応プロジェクトの反応アイコンを使用する方法の例。

1 .反応アイコンパッケージを使用する予定です📦

ダウンロードreact-icons 糸かNPMのどちらか.以下のように:

yarn add react-icons 
or 
npm install react-icons --save 

インポートアイコン↩️

反応のアイコンのホームページでは、あなたが選択するライブラリのトンが表示されます.ブートストラップ、フォント素晴らしい、素材のUIと多くから.お好みを選択します.
したら、クリップボードにコードを追加するには、クリックして好きなアイコンを見つける.
さて、App.js 必要なのはアイコンとライブラリをインポートすることです.

// fa is the reference to the font-awesome library
import { FaReact, FaSass, FaLinux} from 'react-icons/fa';

// md is the reference to the material-ui library
import { MdFavoriteBorder, MdChat } from 'react-icons/md';

3 .アイコンを使いましょう👍

最後に、あなたのApp() コンポーネントは、他のコンポーネントのようなアイコンを使用する必要があります.ステップ2で戻って、反応、SASS、Linux、お気に入りとチャットのアイコンをインポートする場合は、次のように使用します.

function App() {
  return (
    <ul>
      <li><FaReact/></li>
      <li><FaSass/></li>
      <li><FaLinux/></li>

      <li><MdFavoriteBorder/></li>
      <li><MdChat/></li>
    </ul>
 );
}

結論😎

おめでとう!それだ!それはあなたの反応プロジェクトにアイコンをもたらすためにかかるすべてです.あなたは21種類のライブラリからアイコンの数千の選択があります!そして、最良の部分は、あなただけのパフォーマンスで役立つ個々のライブラリから必要なアイコンをインポートすることです!
だからあなたのUIにいくつかのフレアをもたらす＆創造的な入手!

あなたのWeb devの学習の旅ですか？

私の他のポストをチェックアウト生産性と反応.

集中する方法🔍 自己教育フロントウェブウェブ開発者として💻

クリスハンセン・ Jul 29・ 7分読む

#beginners #webdev #productivity #devjournal

応答を構築する方法📱 スタイルのコンポーネントとの反応ナビゲーションメニュー💻

クリスハンセン・ 月3日・ 10分読む

#webdev #tutorial #javascript #react

.ltag__tag__id__6357 .アクションボタン
背景色:経度57 d 700!重要
カラー:竜華ffffff!重要
ボーダーカラー:557 D 700!重要
｝

後傾

.ltag__tag__id__2162 .アクションボタン
背景色:!重要
色:!重要
ボーダーカラー!重要
｝

後傾