1.2.7 • Published 9 months ago

@react-symbols/icons v1.2.7

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

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

1.2.7

9 months ago

1.2.6

10 months ago

1.2.5

1 year ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.0

2 years ago

1.1.8

2 years ago

1.2.1

2 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago