@react-symbols/icons

Website   ❖   Getting Started   ❖   License   ❖   Contribute   ❖   VSCode Theme

🧑‍🚀 Introduction

React-Symbols is a library for React with the icons of the VSCode theme Symbols created by Miguel Solorio (@miguelsolorio):

• 📦 +100 files & folders icons.
• ☁️ Support for React Server Components (RSC).
• 🍃 Lightweight.
• 💙 Built with Typescript.
• 🚀 SVG optimized and minified.

🚀 Getting Started

React-Symbols require React >=16.8.0.

- Install

# with npm:
npm install @react-symbols/icons

# with pnpm:
pnpm add @react-symbols/icons

# with yarn:
yarn add @react-symbols/icons

# with bun:
bun add @react-symbols/icons

- Usage

import { Angular, Astro, Document } from "@react-symbols/icons";

const MyComponent = () => {
  return (
    <>
      <Angular width={128} height={128} />
      <Astro width={128} height={128} />
      <Document width={128} height={128} />
    </>
  );
};

export default MyComponent;

💿 Config for use the library with Remix Old Compiler if you are using CJS (v1 uses CJS by default, v2 uses ESM):

// Add in the remix.config.js:
module.exports = {
  ...
  serverDependenciesToBundle: ["@react-symbols/icons"],
  ...
};

✍️ Change the name of the icon:

import { Bun as BunIcon } from "@react-symbols/icons";

const MyComponent = () => {
  return (
    <>
      <BunIcon width={128} height={128} />
    </>
  );
};

export default MyComponent;

📦 Stack

This is a monorepo project created with:

For monorepo:

• create-turbo Turborepo CLI.
• pnpm + pnpm workspaces - Fast, disk space efficient package manager.
• Prettier - Opinionated code formatter.
• Sherif - Opinionated, zero-config linter for JavaScript monorepos.

For library:

• SWC - Rust-based platform for the Web.
• React 18 - A JavaScript library for building user interfaces.
• Typescript - TypeScript is JavaScript with syntax for types.

For website:

• Remix - Create modern, resilient user experiences with web fundamentals.
• Typescript - TypeScript is JavaScript with syntax for types.
• Tailwind CSS - A utility-first CSS framework for rapidly building custom designs.
• tailwindcss-animate - A Tailwind CSS plugin for creating beautiful animations.
• shadcn/ui + Radix UI - An opinionated toast component for React.
• Sonner - An opinionated toast component for React.

🙌 Contribute

1. Fork the repository and clone it:

git clone [e-mail]:YOUR_USERNAME/react-symbols.git

2. Install the dependencies:

# Install pnpm globally if you don't have it:
npm install -g pnpm

# Install the dependencies:
pnpm install

3. Run the development server:

pnpm dev

and open localhost:5173 with your browser to see the website 🚀

🔑 License

• MIT License.