Zenn
👻

rocketicons の紹介

2024/05/08に公開
Next.js
React
Tailwind CSS
#
rocketicons
tech

rocketiconsとは

rocketeicons は、React 及び React Native のプロジェクトで利用できるアイコンライブラリーです。2024 年 5 月 8 日時点では 45,945 のアイコンの利用が可能です。rocketicons の特徴として、Tailwind CSS のクラスを利用してスタイリングを行うことができるため、Tailwind CSSを利用している場合はアプリケーションへの統合が容易です。

https://rocketicons.io/en

https://github.com/rocketclimb/rocketicons

まとめ

利用可能なアイコンはこちらで確認できます。2024 年 5 月 8 日時点では、45,945のアイコンが利用可能です。

https://rocketicons.io/en/icons

利用方法は簡単です。

  1. rocketicons をインストールします。
  2. Tailwind CSS の設定ファイルにプラグインを追加します。
  3. アイコンをコンポーネントとして利用します。

所感として Tailwind で装飾できるのはすごく良いです。一方で線の太さが変えられないのは欠点です。以下の記事でも紹介している Lucide React であれば線の太さも変更できるため、アイコンの数は少ないですが Lucide React の方が個人的には使いやすいです。

https://zenn.dev/hayato94087/articles/9f5892eb22bdec

以降は Next.js での導入手順を紹介します。

動作確認の環境を構築

動作確認するための Next.js プロジェクトを作成します。長いので、折り畳んでおきます。

新規プロジェクト作成と初期環境構築の手順詳細

プロジェクトの作成

create next-app@latestでプロジェクトを作成します。

$ pnpm create next-app@latest next-rocketicons --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app
$ cd next-rocketicons

Peer Dependenciesの警告を解消

Peer dependenciesの警告が出ている場合は、pnpm installを実行し、警告を解消します。

 WARN  Issues with peer dependencies found
.
├─┬ eslint-config-next 14.2.1
│ └─┬ @typescript-eslint/parser 7.2.0
│   └── ✕ unmet peer eslint@^8.56.0: found 8.0.0
└─┬ next 14.2.1
  ├── ✕ unmet peer react@^18.2.0: found 18.0.0
  └── ✕ unmet peer react-dom@^18.2.0: found 18.0.0

以下を実行することで警告が解消されます。

$ pnpm i -D eslint@^8.56.0
$ pnpm i react@^18.2.0 react-dom@^18.2.0

不要な設定を削除し、プロジェクトを初期化します。

styles

CSSなどを管理するstylesディレクトリを作成します。globals.cssを移動します。

$ mkdir -p src/styles
$ mv src/app/globals.css src/styles/globals.css

globals.cssの内容を以下のように上書きします。

src/styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

初期ページ

app/page.tsxを上書きします。

src/app/page.tsx
import { type FC } from "react";

const Home: FC = () => {
  return (
    <div className="">
      <div className="text-lg font-bold">Home</div>
      <div>
        <span className="text-blue-500">Hello</span>
        <span className="text-red-500">World</span>
      </div>
    </div>
  );
};

export default Home;

レイアウト

app/layout.tsxを上書きします。

src/app/layout.tsx
import "@/styles/globals.css";
import { type FC } from "react";
type RootLayoutProps = {
  children: React.ReactNode;
};

export const metadata = {
  title: "Sample",
  description: "Generated by create next app",
};

const RootLayout: FC<RootLayoutProps> = (props) => {
  return (
    <html lang="ja">
      <body className="">{props.children}</body>
    </html>
  );
};

export default RootLayout;

TailwindCSSの設定

TailwindCSSの設定を上書きします。

tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  plugins: [],
}
export default config

TypeScriptの設定

TypeScriptの設定を上書きします。

tsconfig.json
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

スクリプトを追加

型チェックのスクリプトを追加します。

package.json
{
  "name": "next-tsconfig-resolvejsonmodule",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
+   "typecheck": "tsc"
  },
  "dependencies": {
    "next": "14.1.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.4",
    "postcss": "^8.4.38",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

動作確認

ローカルで動作確認します。

$ pnpm run dev

コミットして作業結果を保存しておきます。

$ git add .
$ git commit -m "feat:新規にプロジェクトを作成し, 作業環境を構築"

rocketicons の導入

rocketicons のパッケージをインストールします。現時点では警告が出ますがそのうち解消されること期待します。

$ pnpm add rocketicons

 WARN  deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
 WARN  deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
 WARN  deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
 WARN  deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
 WARN  deprecated @babel/plugin-proposal-async-generator-functions@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
 WARN  deprecated @babel/plugin-proposal-optional-catch-binding@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
 WARN  deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
 WARN  deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
 WARN  deprecated @babel/plugin-proposal-logical-assignment-operators@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead.
Already up to date
Progress: resolved 869, reused 861, downloaded 0, added 0, done
 WARN  Issues with peer dependencies found
.
└─┬ react-native 0.74.1
  ├── ✕ unmet peer @types/react@^18.2.6: found 18.0.0
  ├── ✕ unmet peer react@18.2.0: found 18.3.1
  └─┬ @react-native/virtualized-lists 0.74.83
    └── ✕ unmet peer @types/react@^18.2.6: found 18.0.0

Done in 7.7s

Tailwind CSS の設定ファイルにプラグインを追加します。

tailwind.config.ts
import type { Config } from 'tailwindcss'
+import icons from "rocketicons/tailwind";

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  plugins: [
+   icons
  ],
}
export default config

コミットします。

$ git add .
$ git commit -m "feat:rocketiconsのパッケージをインストール"

rocketicons の利用

app/page.tsx にアイコンを追加します。詳細は後ほど説明します。

src/app/page.tsx
import { type FC } from "react";
import { RcRocketIcon } from "rocketicons/rc";
import { LuAlignEndHorizontal } from "rocketicons/lu";

const Home: FC = () => {
  return (
    <div className="grid grid-cols-1 gap-2 mx-2 my-2">
      <div className="bg-slate-200 px-2 py-2">
        <h1 className="text-base font-bold">アイコンを使う</h1>
        <div className="mt-2 py-2 px-2 rounded-md bg-white">
          <div className="flex flex-row space-x-2">
            <RcRocketIcon />
            <LuAlignEndHorizontal />
          </div>
        </div>
      </div>
      <div className="bg-slate-200 px-2 py-2">
        <h1 className="text-base font-bold">色をつける</h1>
        <div className="mt-2 py-2 px-2 rounded-md bg-white">
          <div className="flex flex-row space-x-2">
            <RcRocketIcon className="icon-slate-600" />
            <RcRocketIcon className="icon-gray" />
            <RcRocketIcon className="icon-zinc-700" />
            <RcRocketIcon className="icon-neutral-400" />
            <RcRocketIcon className="icon-stone-500" />
            <RcRocketIcon className="icon-red-300" />
            <RcRocketIcon className="icon-orange-600" />
            <RcRocketIcon className="icon-amber" />
            <RcRocketIcon className="icon-yellow-800" />
            <RcRocketIcon className="icon-lime-500" />
            <RcRocketIcon className="icon-green-300" />
            <RcRocketIcon className="icon-emerald-400" />
            <RcRocketIcon className="icon-teal-500" />
            <RcRocketIcon className="icon-cyan-200" />
            <RcRocketIcon className="icon-sky" />
            <RcRocketIcon className="icon-blue-600" />
            <RcRocketIcon className="icon-indigo-400" />
            <RcRocketIcon className="icon-violet-200" />
            <RcRocketIcon className="icon-purple" />
            <RcRocketIcon className="icon-fuchsia-500" />
            <RcRocketIcon className="icon-pink-800" />
            <RcRocketIcon className="icon-rose" />
          </div>
        </div>
      </div>
      <div className="bg-slate-200 px-2 py-2">
        <h1 className="text-base font-bold">サイズを変更</h1>
        <div className="mt-2 py-2 px-2 rounded-md bg-white">
          <div className="flex flex-row space-x-2 items-center">
            <RcRocketIcon className="icon-xs" />
            <RcRocketIcon className="icon-sm" />
            <RcRocketIcon className="icon-base" />
            <RcRocketIcon className="icon-lg" />
            <RcRocketIcon className="icon-xl" />
            <RcRocketIcon className="icon-2xl" />
            <RcRocketIcon className="icon-3xl" />
            <RcRocketIcon className="icon-4xl" />
            <RcRocketIcon className="icon-5xl" />
            <RcRocketIcon className="icon-6xl" />
            <RcRocketIcon className="icon-7xl" />
          </div>
          <div className="flex flex-row space-x-2 items-center">
            <RcRocketIcon className="size-5" />
            <RcRocketIcon className="size-10" />
            <RcRocketIcon className="size-14" />
            <RcRocketIcon className="size-16" />
          </div>
          <div className="flex flex-row space-x-2 items-center">
            <RcRocketIcon className="h-2 w-2" />
            <RcRocketIcon className="h-4 w-4" />
            <RcRocketIcon className="h-7 w-7" />
            <RcRocketIcon className="h-9 w-9" />
          </div>
        </div>
      </div>
      <div className="bg-slate-200 px-2 py-2">
        <h1 className="text-base font-bold">hover</h1>
        <div className="mt-2 py-2 px-2 rounded-md bg-white">
          <div className="flex flex-row space-x-2">
            <RcRocketIcon className="size-10 hover:bg-red-100" />
          </div>
        </div>
      </div>
      <div className="bg-slate-200 px-2 py-2">
        <h1 className="text-base font-bold">animate</h1>
        <div className="mt-2 py-2 px-2 rounded-md bg-white">
          <div className="flex flex-row space-x-2">
            <RcRocketIcon className="size-10 animate-spin" />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;

ローカルで動作確認します。

$ pnpm run dev

しっかりとアイコンが表示されていることを確認します。

https://x.com/hayato94087/status/1788208839164330055

コミットします。

$ git add .
$ git commit -m "feat:rocketiconsの利用"

それでは 1 つずつ説明していきます。

アイコンを追加

こちらの公式サイトからアイコンを選択し、コンポーネントを追加して利用します。

以下の通り利用したいアイコンを選択し、コンポーネントをインポートします。

import { RcRocketIcon } from "rocketicons/rc";
import { LuAlignEndHorizontal } from "rocketicons/lu";

アイコンを表示するためにコンポーネントを追加します。

<RcRocketIcon />
<LuAlignEndHorizontal />

以下のようにアイコンが表示されます。

alt text

色の変更

アイコンに色をつけることができます。以下のようにクラスを指定します。

<RcRocketIcon className="icon-slate-600" />
<RcRocketIcon className="icon-gray" />
<RcRocketIcon className="icon-zinc-700" />
<RcRocketIcon className="icon-neutral-400" />
<RcRocketIcon className="icon-stone-500" />
<RcRocketIcon className="icon-red-300" />
<RcRocketIcon className="icon-orange-600" />
<RcRocketIcon className="icon-amber" />
<RcRocketIcon className="icon-yellow-800" />
<RcRocketIcon className="icon-lime-500" />
<RcRocketIcon className="icon-green-300" />
<RcRocketIcon className="icon-emerald-400" />
<RcRocketIcon className="icon-teal-500" />
<RcRocketIcon className="icon-cyan-200" />
<RcRocketIcon className="icon-sky" />
<RcRocketIcon className="icon-blue-600" />
<RcRocketIcon className="icon-indigo-400" />
<RcRocketIcon className="icon-violet-200" />
<RcRocketIcon className="icon-purple" />
<RcRocketIcon className="icon-fuchsia-500" />
<RcRocketIcon className="icon-pink-800" />
<RcRocketIcon className="icon-rose" />

以下のようにアイコンが表示されます。

alt text

サイズを指定

アイコンのサイズを指定できます。以下のようにクラスを指定します。

<RcRocketIcon className="icon-xs" />
<RcRocketIcon className="icon-sm" />
<RcRocketIcon className="icon-base" />
<RcRocketIcon className="icon-lg" />
<RcRocketIcon className="icon-xl" />
<RcRocketIcon className="icon-2xl" />
<RcRocketIcon className="icon-3xl" />
<RcRocketIcon className="icon-4xl" />
<RcRocketIcon className="icon-5xl" />
<RcRocketIcon className="icon-6xl" />
<RcRocketIcon className="icon-7xl" />

<RcRocketIcon className="size-5" />
<RcRocketIcon className="size-10" />
<RcRocketIcon className="size-14" />
<RcRocketIcon className="size-16" />

<RcRocketIcon className="h-2 w-2" />
<RcRocketIcon className="h-4 w-4" />
<RcRocketIcon className="h-7 w-7" />
<RcRocketIcon className="h-9 w-9" />

以下のようにアイコンが表示されます。

alt text

hover

Hover 時のスタイルを指定できます。以下のようにクラスを指定します。

<RcRocketIcon className="size-10 hover:bg-red-100" />

Hover 前の見た目です。

alt text

Hover 後の見た目です。

alt text

しっかり動作しています。

アニメーション

アニメーションを指定できます。以下のようにクラスを指定します。

<RcRocketIcon className="size-10 animate-spin" />

アニメーションが適用された見た目です。

https://x.com/hayato94087/status/1788208839164330055

その他

Tailwind を利用しているので、dark モード対応も容易です。

https://rocketicons.io/en/docs/dark-mode

画面サイズにあわせたレスポンシブ対応もできます。

https://rocketicons.io/en/docs/responsive-design

複雑なスタイリングも可能です。

https://rocketicons.io/en/docs/state-management

https://rocketicons.io/en/docs/styling

所感

所感として Tailwind で装飾できるのはすごく良いです。一方で線の太さが変えられないのは欠点です。以下の記事でも紹介している Lucide React であれば線の太さも変更できるため、アイコンの数は少ないですが Lucide React の方が個人的には使いやすいです。

https://zenn.dev/hayato94087/articles/9f5892eb22bdec

さいごに

rocketicons の紹介でした。Next.js での導入手順と利用方法を紹介しました。Tailwind の良さを活かして、アイコンを利用できます。ぜひ、試してみてください。

作業用のリポジトリはこちらです。

https://github.com/hayato94087/next-rocketicons

Discussion