@react-symbols/icons
Version:
Symbols icons by Miguel Solorio for React
395 lines (283 loc) • 11 kB
Markdown
<div align="center">
<a href="https://react-symbols.pheralb.dev">
<img src="https://raw.githubusercontent.com/pheralb/react-symbols/main/website/public/images/og.png" alt="React-Symbols Screenshot" />
</a>
<p></p>
<a href="https://react-symbols.pheralb.dev">Website</a>
<span> ❖ </span>
<a href="#-getting-started">Getting Started</a>
<span> ❖ </span>
<a href="#️-utilities">Utilities</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.pheralb.dev/) 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):
- 📦 **+200** 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
**Using file and folder icons:**
```jsx
import { Astro, FolderBlue } from "@react-symbols/icons";
const MyComponent = () => {
return (
<>
<Astro width={128} height={128} />
<FolderBlue width={128} height={128} />
</>
);
};
export default MyComponent;
```
**Only file icons:**
```jsx
import { Astro, Docker } from "@react-symbols/icons/files";
const MyComponent = () => {
return (
<>
<Astro width={128} height={128} />
<Docker width={128} height={128} />
</>
);
};
export default MyComponent;
```
**Only folder icons:**
```jsx
import { FolderConfig, FolderApp } from "@react-symbols/icons/folders";
const MyComponent = () => {
return (
<>
<FolderConfig width={128} height={128} />
<FolderApp 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;
```
## ⚙️ Utilities
### `FileIcon`
Get the [file icon](https://react-symbols.pheralb.dev) component for a given file name or extension.
**`getIconForFile`** function:
```tsx
import { getIconForFile } from "@react-symbols/icons/utils";
const Page = () => {
return (
<main>
{getIconForFile({
fileName: "example.ts",
})}
</main>
);
};
```
**`FileIcon`** component:
```tsx
import { FileIcon } from "@react-symbols/icons/utils";
const Page = () => {
return (
<main>
<FileIcon fileName="example.ts" />
</main>
);
};
```
**Options**:
- `fileName` (`string`): The name of the file (e.g., "example.ts", "index.html"). [The full list of extensions can be found here](https://github.com/pheralb/react-symbols/blob/main/library/src/utils/extensions/fileExtensionIcons.tsx). If does not match any file extension, the `DefaultFileIcon` component will be rendered.
```tsx
import { FileIcon } from "@react-symbols/icons/utils";
<FileIcon fileName="example.ts" />;
```
- `autoAssign` (`boolean`, optional): If `true`, the utility will automatically assign the icon based on the file name (e.g., "vite.config.js" -> Vite icon). [The full list of file names can be found here](https://github.com/pheralb/react-symbols/blob/main/library/src/utils/extensions/fileNameIcons.tsx). If does not match any file name, it will fallback to the file extension mapping.
```tsx
import { FileIcon } from "@react-symbols/icons/utils";
<FileIcon fileName="package.json" autoAssign={true} />;
```
- `editFileExtensionData` (`ExtensionType`, optional): An object that allows you to extend or override the default file extension to icon mapping.
```tsx
import { Js } from "@react-symbols/icons/files";
import { FileIcon } from "@react-symbols/icons/utils";
<FileIcon
fileName="customfile.ts"
editFileExtensionData={{
ts: Js,
}}
/>;
```
- `editFileNameData` (`ExtensionType`, optional. Activate `autoAssign` first): An object that allows you to extend or override the default file name to icon mapping.
```tsx
import { Ts } from "@react-symbols/icons/files";
import { FileIcon } from "@react-symbols/icons/utils";
<FileIcon
autoAssign={true}
fileName="eslint.config.ts"
editFileNameData={{
"eslint.config.ts": Ts,
}}
/>;
```
- `SVGProps<SVGSVGElement>`: SVG properties to customize the icon.
```tsx
import { FileIcon } from "@react-symbols/icons/utils";
<FileIcon fileName="myfile.ts" width={48} height={48} />;
```
### `FolderIcon`
Get the [folder icon](https://react-symbols.pheralb.dev/folders) component for a given folder name.
**`getIconForFolder`** function:
```tsx
import { getIconForFolder } from "@react-symbols/icons/utils";
const Page = () => {
return (
<main>
{getIconForFolder({
folderName: "node_modules",
})}
</main>
);
};
```
**`FolderIcon`** component:
```tsx
import { FolderIcon } from "@react-symbols/icons/utils";
const Page = () => {
return (
<main>
<FolderIcon folderName="node_modules" />
</main>
);
};
```
**Options**:
- `folderName` (`string`): The name of the folder (e.g., "src", "config"). [The full list of folder names can be found here](https://github.com/pheralb/react-symbols/blob/main/library/src/utils/extensions/folderNameIcons.tsx). If does not match any folder name, the `DefaultFolderIcon` component will be used.
```tsx
import { FolderIcon } from "@react-symbols/icons/utils";
<FolderIcon folderName="src" />;
```
- `editFolderNameData` (`ExtensionType`, optional): An object that allows you to extend or override the default folder name to icon mapping.
```tsx
import { FolderIcon } from "@react-symbols/icons/utils";
import { FolderAngular } from "@react-symbols/icons/folders";
<FolderIcon
editFolderNameData={{
app: FolderAngular,
}}
/>;
```
- `SVGProps<SVGSVGElement>`: SVG properties to customize the icon.
```tsx
import { FolderIcon } from "@react-symbols/icons/utils";
<FolderIcon folderName="app" width={48} height={48} />;
```
### `ExtensionType`
Type definition for extending or overriding the default file/folder name to icon mapping.
```ts
import type { ExtensionType } from "@react-symbols/icons/utils";
const moreExtensions: ExtensionType = {
"customfile.ext": CustomFileIcon,
customfolder: CustomFolderIcon,
};
```
### Icons for file explorers
- `DefaultFileIcon`: The default icon component for unknown files.
```tsx
import { DefaultFileIcon } from "@react-symbols/icons/utils";
<DefaultFileIcon width={48} height={48} />;
```
- `DefaultFolderIcon`: The default icon component for unknown folders.
```tsx
import { DefaultFolderIcon } from "@react-symbols/icons/utils";
<DefaultFolderIcon width={48} height={48} />;
```
- `DefaultFolderOpenedIcon`: The default icon component for opened folders.
```tsx
import { DefaultFolderOpenedIcon } from "@react-symbols/icons/utils";
<DefaultFolderOpenedIcon width={48} height={48} />;
```
## 📦 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:**
- [tsdown](https://tsdown.dev/) - The elegant bundler for libraries powered by Rolldown.
- [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.
- [shadcn/ui + Radix UI](https://ui.shadcn.com/) - An opinionated toast component for React.
- [pheralb/toast](https://toast.pheralb.dev/) - An accessible and beautiful toast library 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).