ReactでSVGアイコンをマスターしよう！アイコンライブラリの使い方も解説

2024-04-02

React コンポーネントを使用して UI に SVG アイコンを表示する方法

概要

直接 HTML に埋め込む: シンプルな方法ですが、コードの可読性と保守性が低下します。
React コンポーネントとしてインポートする: アイコンを個別にコンポーネント化することで、コードの再利用性と可読性を向上できます。
アイコンライブラリを使用する: Font Awesome や Material Design などのアイコンライブラリは、豊富なアイコンと使いやすい API を提供します。

各方法の詳細

直接 HTML に埋め込む

<img src="./icon.svg" alt="アイコン" />

この方法はシンプルですが、アイコンのサイズや色を変更するには CSS を使用する必要があり、コードの可読性が低下します。

React コンポーネントとしてインポートする

import MyIcon from "./MyIcon.svg";

const App = () => {
  return (
    <div>
      <MyIcon />
    </div>
  );
};

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const App = () => {
  return (
    <div>
      <FontAwesomeIcon icon="fa-solid fa-home" />
    </div>
  );
};

アイコンライブラリを使用すると、豊富なアイコンと使いやすい API を利用できます。

各方法の比較

方法	メリット	デメリット
直接 HTML に埋め込む	シンプル	コードの可読性と保守性が低下
React コンポーネントとしてインポートする	コードの再利用性と可読性が高い	個別にコンポーネントを作成する必要がある
アイコンライブラリを使用する	豊富なアイコンと使いやすい API	ライブラリの導入が必要

直接 HTML に埋め込む

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVGアイコンの表示</title>
</head>
<body>
  <img src="./icon.svg" alt="アイコン">
</body>
</html>

React コンポーネントとしてインポートする

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

App.js

import React from "react";
import MyIcon from "./MyIcon.svg";

const App = () => {
  return (
    <div>
      <MyIcon />
    </div>
  );
};

export default App;

アイコンライブラリを使用する

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const App = () => {
  return (
    <div>
      <FontAwesomeIcon icon="fa-solid fa-home" />
    </div>
  );
};

export default App;

各コードの説明

直接 HTML に埋め込む

img 要素を使用して SVG ファイルを埋め込みます。
src 属性で SVG ファイルのパスを指定します。
alt 属性で代替テキストを指定します。

React コンポーネントとしてインポートする

MyIcon.svg ファイルを React コンポーネントとしてインポートします。
App コンポーネントで MyIcon コンポーネントを呼び出します。

アイコンライブラリを使用する

@fortawesome/react-fontawesome ライブラリをインストールします。
FontAwesomeIcon コンポーネントを使用してアイコンを表示します。
icon 属性でアイコンの種類を指定します。

実行方法

各コードをファイルに保存し、以下のコマンドを実行します。

npm start

ブラウザで http://localhost:3000 を開くと、SVG アイコンが表示されます。

このサンプルコードを参考に、React アプリケーションで SVG アイコンを表示してみてください。

SVGアイコンを表示するその他の方法

svg-inline-loader を使用する

npm install --save-dev svg-inline-loader

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ["svg-inline-loader"],
      },
    ],
  },
};

import React from "react";

const App = () => {
  return (
    <div>
      <svg viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" fill="red" />
      </svg>
    </div>
  );
};

export default App;

この方法を使用すると、SVG ファイルを個別にインポートする必要がなくなり、コード量を削減できます。

React-SVG は、SVG ファイルを React コンポーネントとしてレンダリングできるライブラリです。

npm install --save react-svg

import React from "react";
import { Svg } from "react-svg";

const App = () => {
  return (
    <div>
      <Svg src="./icon.svg" />
    </div>
  );
};

export default App;

この方法を使用すると、SVG ファイルをコンポーネントとして扱いやすくなり、コードの可読性と保守性を向上できます。

SVGR を使用する

npm install --global svgr

svgr --icon --out ./MyIcon.jsx ./icon.svg

MyIcon.jsx

import React from "react";

const MyIcon = () => {
  return (
    <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill="red" />
    </svg>
  );
};

export default MyIcon;

import React from "react";
import MyIcon from "./MyIcon.jsx";

const App = () => {
  return (
    <div>
      <MyIcon />
    </div>
  );
};

export default App;