【React】SVGアイコンを使用する方法

2023年1月15日React

Reactで独自で作成したSVGアイコンや無料のアイコンサービスなど使用する方法を紹介します。

ReactでSVGアイコンを使用する方法

他にも以下のように手軽に使えるやり方を紹介しています。

SVGを準備する

今回は、手軽に使える無料サービスのHeroIconsを使って説明します。
イラストレーターなどで作成している場合は、そのSVGでOKです。
HeroIconsにアクセス(https://heroicons.com/)します。

使いたいアイコンをホバーしてJSXをコピーします。
SVGでもいいのですが、たとえば、stroke-linecap属性などが、JSXの記法にのっとっておらず、コンソールでエラーが出力されるので、素直にJSXの方を使うのがいいです。

Icons.jsを作成

Icons.jsなど名前は好きに決めて、以下のように記述します。

/ カートのアイコン
export const CartIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="w-6 h-6"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
      />
    </svg>
  );
};

これで、使いたいコンポーネントでインポートすれば、svgをコンポーネントとして使用することができます。
独自のものを使っている場合は、svgタグ部分を入れ替えれば利用できます。