@react-symbols/icons
Version:
Symbols icons by Miguel Solorio for React
164 lines (118 loc) • 5.09 kB
Markdown
<div align="center">
<a href="https://react-symbols.vercel.app/">
<img src="https://raw.githubusercontent.com/pheralb/react-symbols/main/website/public/images/og.png">
</a>
<p></p>
<a href="https://react-symbols.vercel.app">Website</a>
<span> ❖ </span>
<a href="#-getting-started">Getting Started</a>
<span> ❖ </span>
<a href="#-license">License</a>
<span> ❖ </span>
<a href="#-contribute">Contribute</a>
<span> ❖ </span>
<a href="https://marketplace.visualstudio.com/items?itemName=miguelsolorio.symbols">VSCode Theme</a>
[](https://actions-badge.atrox.dev/pheralb/react-symbols/goto?ref=main)
</div>
## 🧑🚀 Introduction
[**React-Symbols**](https://react-symbols.vercel.app/) is a library for React with the icons of the VSCode theme [**Symbols**](https://marketplace.visualstudio.com/items?itemName=miguelsolorio.symbols) created by [Miguel Solorio (@miguelsolorio)](https://github.com/miguelsolorio):
- 📦 **+100** files & folders icons.
- ☁️ Support for **React Server Components** (RSC).
- 🍃 **Lightweight** & **tree-shakable**.
- 💙 Built with **Typescript**.
- 🚀 **SVG optimized** and **minified**.
## 🚀 Getting Started
> React-Symbols require **React >=16.8.0**.
### - Install
```bash
# 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
```jsx
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**](https://remix.run/) if you are using CJS (v1 uses CJS by default, v2 uses ESM):
```js
// Add in the remix.config.js:
module.exports = {
...
serverDependenciesToBundle: ["@react-symbols/icons"],
...
};
```
> ✍️ Change the name of the icon:
```jsx
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`](https://www.npmjs.com/package/create-turbo) Turborepo CLI.
- [`pnpm`](https://pnpm.io/) + [pnpm workspaces](https://pnpm.io/workspaces) - Fast, disk space efficient package manager.
- [Prettier](https://prettier.io/) - Opinionated code formatter.
- [Sherif](https://github.com/QuiiBz/sherif) - Opinionated, zero-config linter for JavaScript monorepos.
**For library:**
- [SWC](https://swc.rs/) - Rust-based platform for the Web.
- [React 19](https://reactjs.org/) - A JavaScript library for building user interfaces.
- [Typescript](https://www.typescriptlang.org/) - TypeScript is JavaScript with syntax for types.
**For website:**
- [React Router v7](https://reactrouter.com/) - Create modern, resilient user experiences with web fundamentals.
- [Typescript](https://www.typescriptlang.org/) - TypeScript is JavaScript with syntax for types.
- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs.
- [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) - A collection of Tailwind CSS v4.0 utilities for creating beautiful animations.
- [shadcn/ui + Radix UI](https://ui.shadcn.com/) - An opinionated toast component for React.
- [Sonner](https://sonner.emilkowal.ski/) - An opinionated toast component for React.
## 🙌 Contribute
1. [Fork the repository](https://github.com/pheralb/react-symbols/fork) and clone it:
```bash
git clone git@github.com:YOUR_USERNAME/react-symbols.git
```
2. Install the dependencies:
```bash
# Install pnpm globally if you don't have it:
npm install -g pnpm
# Install the dependencies:
pnpm install
```
3. Run the development server:
```bash
pnpm dev
```
and open [**localhost:5173**](http://localhost:5173) with your browser to see the website 🚀
<a href="https://github.com/pheralb/react-symbols/graphs/contributors">
<img src="https://contrib.rocks/image?repo=pheralb/react-symbols" />
</a>
<p></p>
## 🔑 License
- [MIT License](https://github.com/pheralb/react-symbols/blob/main/LICENSE).