React Icons を CDN で使用する方法

CDN から React Icons のスクリプトを取得する最初に、React Icons のスクリプトを CDN から取得する必要があります。以下の CDN リンクを使用します。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-icons.min.js"></script>

このリンクは、React Icons の最新バージョンを提供する CDN になります。バージョン番号を適宜更新してください。

React Icons コンポーネントを使用する React Icons を使用するには、インポートしてコンポーネントとして利用します。以下は、例としていくつかの一般的な React Icons の使用方法です。

import { FaReact, FaGithub } from 'react-icons/fa';
function App() {
  return (
    <div>
      <h1>React Icons Example</h1>
      <FaReact />
      <FaGithub />
    </div>
  );
}
export default App;

この例では、FaReact と FaGithub のアイコンを表示しています。必要なアイコンを import 文で指定し、コンポーネントとして使用することができます。

アイコンのサイズや色を変更する React Icons を使用して表示するアイコンのサイズや色を変更するには、スタイリングを適用します。例えば、以下のように CSS を使用してアイコンのサイズと色を変更することができます。

import { FaReact } from 'react-icons/fa';
import './App.css';
function App() {
  return (
    <div>
      <h1>React Icons Example</h1>
      <FaReact className="icon" />
    </div>
  );
}
export default App;

App.css ファイルで .icon クラスを定義し、サイズや色を指定します。

.icon {
  font-size: 24px;
  color: red;
}

他のアイコンセットを使用する React Icons は、さまざまなアイコンセットを提供しています。例えば、react-icons/ai からは Adobe Icons や Ant Design Icons を利用することができます。必要なアイコンセットをインポートして使用するだけです。

import { AiFillCamera } from 'react-icons/ai';
function App() {
  return (
    <div>
      <h1>React Icons Example</h1>
      <AiFillCamera />
    </div>
  );
}
export default App;

以上が React Icons を CDN で使用する方法の概要です。必要に応じてさまざまなアイコンを組み合わせて利用することができます。