Skip to content

Commit

Permalink
added readme
Browse files Browse the repository at this point in the history
  • Loading branch information
proksh committed Sep 25, 2024
1 parent 8dc60f8 commit f7e8012
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 1 deletion.
73 changes: 73 additions & 0 deletions packages/react/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
# Proxy Icons - React Components for Your Project

[![npm version](https://img.shields.io/npm/v/proxy-icons.svg?style=flat-square)](https://www.npmjs.com/package/proxy-icons)

This library provides a collection of React components for commonly used icons. Easily integrate these icons into your React applications to enhance user experience.

## Installation

Install the Proxy Icons package using your preferred package manager:

```bash
npm install proxy-icons
# or
yarn add proxy-icons
# or
pnpm install proxy-icons
```

## Usage

1. Import the desired icon component:

```javascript
import { ProUserFill } from 'proxy-icons';
```

2. Use the icon component within your React component:

```javascript
const MyComponent = () => {
return (
<ProUserFill className="my-icon" /> // Add custom class for styling
);
};
```

Note: Replace `ProUserFill` with the specific icon component you need from the Proxy Icons package.

## Available Icons

[https://proxy-icons-website.vercel.app/](https://proxy-icons-website.vercel.app/)

## Sizing

Apply styles or classes to adjust the size of your icons. Here's an example using Tailwind CSS and inline styles:

```javascript
import { ProUserFill } from 'proxy-icons';

const MyComponent = () => {
return (
<>
{/* Using Tailwind CSS */}
<ProUserFill className="text-xs" />

{/* Using inline styles */}
<ProUserFill style={{ height: '20px', width: '20px' }} />
</>
);
};
```

Note: Adapt the sizing approach based on your chosen CSS framework or design system.

## Additional Notes

- Import Only Needed Icons: Only import the icons you need to keep your bundle size optimized.
- Custom Styles: Further customize the icons with CSS classes or inline styles as needed.
- Responsive Sizing: Consider using responsive classes or media queries to adjust icon sizes based on screen size.

## Live Demo

[https://proxy-icons-website.vercel.app/](https://proxy-icons-website.vercel.app/)
1 change: 0 additions & 1 deletion packages/react/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
"paths": {
"*": ["node_modules/*", "src/types/*"]
},
"noUncheckedIndexedAccess": true,
"noEmit": true
}
}

0 comments on commit f7e8012

Please sign in to comment.