Zenn
🍱

Next.jsとTailwindCSSでフッターにRemixIconを配置する

2022/02/11に公開
Next.js
Tailwind CSS
アイコン
Remix Icon
tech

RemixIcon について

Remix アイコンはApache License Version 2.0をもつオープンソースで提供されており、2200 以上[1]のアイコンがあります。
個人利用はもちろん商用利用可能であり、 24px*24px の svg 形式としてダウンロードすることもできますが、クラス名を指定して使用することもできます。
今回はアイコンをクリックするとページ遷移するように実装したいと思います。

環境

  • Next.js ver 12
  • remixicon ver 2.5.0
  • TailwindCSS ver 3.0.17

使用法

公式サイトから使いたいアイコンを探します。
今回は Twitter のアイコンと GitHub のアイコンを使いました。
svg 形式でダウンロードできますが今回はクラスを使います。

Twitterアイコンの検索

クラス名は"ri-{アイコン名}-{サイズ}"という規則で付けられています。
画像では class を使っていますが、Next.js なので className を使います。

インストール

公式では npm を使っていますが、yarn で RemixIcon をインストールします。

yarn add remixicon

ソースコード

フッター部分

下記 2 行を加えるだけでアイコンを利用できます。

import "remixicon/fonts/remixicon.css";
<i className="ri-twitter-fill"></i>;

今回は最下部に固定で配置させたいので

className = "absolute inset-x-0 bottom-0";

で固定させています。
また、ページ遷移させたいので Link タグを使っています。

src/component/layout/container/footer.tsx
import type { NextPage } from "next";
import Link from "next/link";
import "remixicon/fonts/remixicon.css";
export const Footer = () => {
  return (
    // 最下部に固定で配置
    <div className="absolute inset-x-0 bottom-0 h-8 bg-green-200">
      {/* 中央に配置 */}
      <footer className="flex justify-center gap-x-4">
        <Link href="https://twitter.com/{TwitterName}">
          <a>
            {/* アイコンをセットする */}
            <i className="ri-twitter-fill"></i>
          </a>
        </Link>
        <Link href="https://github.com/{GitHubName}">
          <a>
            {/* アイコンをセットする */}
            <i className="ri-github-fill"></i>
          </a>
        </Link>
      </footer>
    </div>
  );
};

呼び出し側

src/pages/index.tsx
import type { NextPage } from "next";
import Head from "next/head";
import { Footer } from "../component/layout/container/footer";

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>タイトル</title>
        <meta name="description" content="title" />
      </Head>
      {/* コンポーネントを呼び出し */}
      <Footer />
    </div>
  );
};

export default Home;

実行結果

実行結果

フッター部分にアイコンをつけることができました。

最後に

We would be very grateful if you mention "Remix Icon" in your product info, but it's not required.

とあるので感謝の意味を込めて ReadMe.md などに Remix Icon を使用したことを記載すると開発者に喜ばれるかもしれません。

参考

脚注

  1. 2022/02/11 時点 ↩︎

GitHubで編集を提案

Discussion