【Log】Next.js で SVG ファイルを表示する

実現したいこと

• 個人 web サイトのヘッダーに自作のロゴ（SVG）を表示させたい
• ロゴの色味は css で変更可能な状態にしたい

▼ 今回作ったロゴのサンプル

SVG を表示させる方法

1. img タグの src に SVG ファイルへのパスを設定して読み込ませる
2. CSS ファイル内の background-image にパスを設定して読み込ませる
3. HTML 内で SVG をインラインコードで埋め込む

1 や 2 の方法だと、比較的簡単に SVG を表示することができるけど、css でデザインを変更することができない。
今回は SVG のデザインを変更したいので、3. の方法で実装してみる

Next.js 内で SVG のインライン埋め込みを実現するには、SVG ファイル内のコードを JSX 記法に対応させる修正が必要になるようなので、@svgr/webpack を使って読み込めるようにする

実際にやってみる

導入手順

1. @svgr/webpack をインストール

yarn add -D @svgr/webpack

2. next.config.js を編集
自身のリポジトリには next.config.js がなかったので新規作成

touch next.config.js

新規作成したファイルに以下を記載

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        and: [/\.(js|ts)x?$/],
      },
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            svgo: false, // 圧縮を無効にする設定
          },
        },
      ],
    });

    return config;
  },
  images: {
    disableStaticImages: true, // importした画像の型定義設定を無効にする設定
  },
};

3. index.d.ts を作成し、SVG の型定義をする
今回は、src/types 配下に index.d.ts を作成

declare module '*.svg' {
  const content: React.FC<React.SVGProps<SVGElement>>;
  export default content;
}

実際に呼び出してみる

1. logo.tsx を src/components/common/parts 配下に追加

import Logo from 'public/logo.svg';
const LogoView = (): JSX.Element => {
  return <Logo />;
};

export default LogoView;

2. header.tsx で logo.tsx を import

import LogoView from './parts/logo';

const Header = (): JSX.Element => {
  return (
    <header className="relative py-3 shadow-md">
      <Container className="flex items-center justify-between">
        {/* ロゴ */}
        <Link href="/">
          <a>
            <LogoView />
          </a>
        </Link>

        {/* 略 */}
      
      </Container>
    </header>
  );
};

export default Header;

▼ 正常に読み込めた！

デザインを当ててみる

今のままだとロゴが大きすぎるので、サイズを変更する
ついでにヘッダーの色と SVG の文字色も変えてみる

▼ できた！

けど...
png で作った画像を SVG に変換する際に、SVG の中身の影響で css が適用できない問題に遭遇して、何時間も詰みんだ...
こっちについては別の記事で log を残す