【Next.js】svg spriteがうまく利用できなかったので代替案を考える

以前Next.jsでsvgを利用する方法は調べた

uga-box.hatenablog.com

今度は一つのアイコンが保存されたsvgファイルではなく、複数のアイコンを集めたsvg-spriteをつくってそれを利用したい

ただ、結論どうにもうまくいかなかったので代替案を考えた

iconコンポーネントを作る

atomicデザインを使っているのでatomsにiconコンポーネントをつくり、そこに閉じ込める

icon.jsx

import React from "react";
import Heart from "../../../static/svg/heart.svg";
import Bars from "../../../static/svg/bars.svg";
import UserAlt from "../../../static/svg/user-alt.svg";
import SignOutAlt from "../../../static/svg/sign-out-alt.svg";
import Times from "../../../static/svg/times.svg";
import CaretRight from "../../../static/svg/caret-right.svg";
import ArrowCircleRight from "../../../static/svg/arrow-circle-right.svg";
import Home from "../../../static/svg/home.svg";

export default function Menu(props) {
  switch (props.icon) {
    case "arrow-circle-right":
      return <ArrowCircleRight />;
    case "bars":
      return <Bars />;
    case "caret-right":
      return <CaretRight />;
    case "heart":
      return <Heart />;
    case "home":
      return <Home />;
    case "sign-out-alt":
      return <SignOutAlt />;
    case "times":
      return <Times />;
    case "user-alt":
      return <UserAlt />
    default:
      return <></>;
  }
}

使う側は

import Icon from "../atoms/Icon";

...
<Icon icon="times" />
...

iconコンポーネントのcase文を増やすのは手間だが、そんなに変更を加えることもないし、svg-spriteをつくる手間はなくなったので、一旦これで様子をみる