📚

Next.js × MUIでSVGロゴをアイコンとして使う方法

に公開
Next.js
mui
tech

はじめに

今回はNext.jsとMUIを使用して、SVGロゴを追加する方法を紹介します。
たとえば自分のポートフォリオやブログにZennへのリンクを追加したいとき、TwitterやGitHubのアイコンと並べて表示したい場面があると思います。
本記事では、そうした場面でロゴを他のアイコンと同じように扱うための実装手順を解説します。

環境

  • Next.js - 15.3.0

実装

1. muiとsvgrをインストールする

npm install @emotion/react @emotion/styled @mui/icons-material @mui/material @svgr/webpack

2. SVGファイルをimportできるようにする

まず、SVGファイルをReactコンポーネントとして使えるようにするため、publicディレクトリではなく、srcディレクトリ内に配置してください。例えば、以下のようにsrc/logos/zenn.svgに配置します。

your-project/
├── src/
│   └── logos/
│       └── zenn.svg

3. next.config.tsを設定する

SVGファイルをReactコンポーネントとしてインポートできるように、webpack設定をカスタマイズします。
以下のように next.config.ts に設定を追加してください。

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  webpack(config) {
    // SVG を React コンポーネントとして読み込む設定
    config.module.rules.push({
      test: /\.svg$/i,
      use: ["@svgr/webpack"],
    });
    return config;
  },
};

export default nextConfig;

この設定を行うことで、import ZennIcon from "../logos/zenn.svg" のように、SVGファイルをReactコンポーネントとして直接インポートして使用できるようになります。

4. SVGをimportして表示する

"use client";

import ZennIcon from "@/logos/zenn.svg";
import SvgIcon from "@mui/material/SvgIcon";

const Logo = () => {
  return (
    <SvgIcon>
      <ZennIcon />
    </SvgIcon>
  );
};

export default Logo;
コード全体
"use client";

import React from "react";
import { Box, Container } from "@mui/material";
import ZennIcon from "@/logos/zenn.svg";
import { Grid } from "@mui/material";
import SvgIcon from "@mui/material/SvgIcon";

import TwitterIcon from "@mui/icons-material/Twitter";
import GitHubIcon from "@mui/icons-material/GitHub";

const Logo = () => {
  return (
    <Box
      sx={{
        height: "100vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Container maxWidth="sm">
        <Grid container spacing={2} justifyContent="center" alignItems="center">
          <Grid>
            <TwitterIcon />
          </Grid>
          <Grid>
            <GitHubIcon />
          </Grid>
          <Grid>
            <SvgIcon>
              <ZennIcon />
            </SvgIcon>
          </Grid>
        </Grid>
      </Container>
    </Box>
  );
};

export default Logo;

Material-UIの<SvgIcon>で囲っているのがポイントです。以下のように表示されるようになります。

5. ロゴの色をMUI側で調整できるようにする

ロゴの色を MUIのスタイルで自由に変更したい場合、SVGファイル内のgタグに指定されているfill属性をcurrentColorに変更する必要があります。

zenn.svg
  <svg>
+    <g fill="currentColor">
-    <g fill="#3EA8FF">
      <path ... />
      <path ... />
    </g>
  </svg>

  <Grid container spacing={2} justifyContent="center" alignItems="center">
    <Grid>
-     <TwitterIcon />
+     <TwitterIcon sx={{ color: "gray" }} />
    </Grid>
    <Grid>
-     <GitHubIcon />
+     <GitHubIcon sx={{ color: "gray" }} />
    </Grid>
    <Grid>
-     <SvgIcon>
+     <SvgIcon sx={{ color: "gray" }}>
        <ZennIcon />
      </SvgIcon>
    </Grid>
  </Grid>;

以下のようにロゴの色が設定した色に変更されたと思います。

さいごに

今回はMUIを使用してSVGロゴを追加して表示する方法を紹介しました。

@svgr/webpackを使うことで、SVGファイルをReactコンポーネントとして扱えるようになり、MUIのスタイルシステムと組み合わせて柔軟にカスタマイズできるようになります。
ちょっとした見た目の統一感が、ポートフォリオやブログのデザインをぐっと引き締めてくれるので、ぜひ試してみてください。

この記事が少しでも参考になれば嬉しいです！

参考

https://zenn.dev/team_zenn/articles/zenn-mediakit-svg-to-material-ui

Discussion