Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pheralb/react-symbols
🪂 Symbols VSCode Icon Theme by Miguel Solorio, for React.
https://github.com/pheralb/react-symbols
file hacktoberfest icon icons icons-library library npm react svg svg-icons swc symbols vscode
Last synced: 1 day ago
JSON representation
🪂 Symbols VSCode Icon Theme by Miguel Solorio, for React.
- Host: GitHub
- URL: https://github.com/pheralb/react-symbols
- Owner: pheralb
- License: mit
- Created: 2022-09-05T23:21:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-04T00:13:27.000Z (29 days ago)
- Last Synced: 2025-01-24T20:12:20.246Z (8 days ago)
- Topics: file, hacktoberfest, icon, icons, icons-library, library, npm, react, svg, svg-icons, swc, symbols, vscode
- Language: TypeScript
- Homepage: https://react-symbols.vercel.app
- Size: 4.62 MB
- Stars: 134
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Website
❖
Getting Started
❖
License
❖
Contribute
❖
VSCode Theme
[](https://actions-badge.atrox.dev/pheralb/react-symbols/goto?ref=main)
## 🧑🚀 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 (
<>
>
);
};
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 (
<>
>
);
};
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 18](https://reactjs.org/) - A JavaScript library for building user interfaces.
- [Typescript](https://www.typescriptlang.org/) - TypeScript is JavaScript with syntax for types.
**For website:**
- [Remix](https://remix.run/) - 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.
- [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) - A Tailwind CSS plugin 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 [email protected]: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 🚀
## 🔑 License
- [MIT License](https://github.com/pheralb/react-symbols/blob/main/LICENSE).