Skip to content

pheralb/react-symbols

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Website   ❖   Getting Started   ❖   License   ❖   Contribute   ❖   VSCode Theme

Remix Badge SWC Badge Build Status GitHub releases GitHub stars GitHub issues GitHub license

πŸ§‘β€πŸš€ 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:

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 git@github.com:YOUR_USERNAME/react-symbols.git
  1. Install the dependencies:
# Install pnpm globally if you don't have it:
npm install -g pnpm

# Install the dependencies:
pnpm install
  1. Run the development server:
pnpm dev

and open localhost:5173 with your browser to see the website πŸš€

πŸ”‘ License