【SVG】ReactでSVGスプライトを利用する

この記事ですが、スマホの実機でみたらアイコンが表示されなくなってしまったので、使えませんでした。デスクトップPCだけなら問題ないです。

---

いままでReactでSVGスプライトをインラインで使うため、react-svg-inlineというモジュールを利用していたが3年ほどメンテされていないし、Storybook v6.3.4 にしたらSVGアイコンが全て表示されなくなってしまった

react-svg-inline
https://www.npmjs.com/package/react-svg-inline

そこで、ReactでSVGスプライトを利用する方法を再度調査した

調査していて以下の記事をみつけた

medium.com

以下のようにSVGスプライトをimportし、

import sprite from './sprite.svg';

次のように利用するだけと記事にある

<svg>
  <use href={sprite + "#icon-star"} />
</svg>

ただ、これだけではsvgのimport時にエラーが起きてしまうので、webpackでurl-loaderを使ってsvgファイルを読み込めるようにする必要があった

https://v4.webpack.js.org/loaders/url-loader/

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

これで余計なモジュールを利用せずにSVGスプライトが利用できるようになった