react-symbols

react-symbols copied to clipboard

Explore   ❖   Getting Started   ❖   License   ❖   VSCode Theme

👋 Introduction

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

• +100 files & folders icons.
• Support React Server Components (RSC) & Next.js 13/14 /app directory.
• Lightweight.
• Ready to use 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 ultra:
ultra install @react-symbols/icons

# with yarn:
yarn 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 Turborepo project bootstrapped with create-turbo:

For library:

• SWC - Rust-based platform for the Web.
• tsup (alternative) - The simplest and fastest way to bundle your TypeScript libraries.
• React - 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.

🙌 Contributing

🔑 License

• MIT.