From ac65c4d69dc32cca1945e40f738d9cd4cc725c64 Mon Sep 17 00:00:00 2001
From: Proksh Luthra <35415752+proksh@users.noreply.github.com>
Date: Wed, 25 Sep 2024 20:39:56 +0530
Subject: [PATCH] feat: added readme docs
---
README.md | 106 +++++++++++++++++-
.../website/src/components/common/header.tsx | 2 +-
.../src/contents/docs/installation/react.mdx | 12 +-
3 files changed, 112 insertions(+), 8 deletions(-)
diff --git a/README.md b/README.md
index 15ef8025..3c30f779 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,105 @@
-# proxy-icons
\ No newline at end of file
+# Proxy Icons - React Components for Your Project
+
+[](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 with CDN
+
+1. **Add CDN Link**: To integrate Proxy Icons into your project, copy the following CDN link and paste it within the `` tag of your HTML document:
+
+ ```html
+
+ ```
+
+ Alternatively, you can download the proxy-icons.css file and include it in the `` tag of your HTML document.
+
+2. **Use Icons**: To use an icon, add an `` tag with the appropriate class name. The class name follows the convention: `pro-{name}-{style}`.
+
+ ```html
+
+ ```
+
+ Note: Replace `{name}` with the icon name and `{style}` with the desired style (e.g., line for outlined icons or fill for filled icons).
+
+3. **Sizing**: You can resize Proxy Icons using inline styles or predefined classes. For example:
+
+ ```html
+
+ ```
+
+ If you're using a CSS framework like Tailwind CSS or Bootstrap, you can apply their text sizing classes directly:
+
+ ```html
+
+
+
+ ```
+
+## Installation with npm
+
+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 (
+ // 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 */}
+
+
+ {/* Using inline styles */}
+
+
+ );
+};
+```
+
+**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/)
diff --git a/packages/website/src/components/common/header.tsx b/packages/website/src/components/common/header.tsx
index a11dcafa..d9553125 100644
--- a/packages/website/src/components/common/header.tsx
+++ b/packages/website/src/components/common/header.tsx
@@ -31,7 +31,7 @@ export default function Header() {
Submit Issues or request
-
+
Documentation
diff --git a/packages/website/src/contents/docs/installation/react.mdx b/packages/website/src/contents/docs/installation/react.mdx
index 821271e2..96f10e6b 100644
--- a/packages/website/src/contents/docs/installation/react.mdx
+++ b/packages/website/src/contents/docs/installation/react.mdx
@@ -8,17 +8,17 @@ description: Installation guide for using Proxy Icons as React components.
1. **Install the Package**: Add the Proxy Icons package to your React project using npm, yarn, or pnpm.
```bash
- npm install @proxyicons/react
+ npm install proxy-icons
# or
- yarn add @proxyicons/react
+ yarn add proxy-icons
# or
- pnpm install @proxyicons/react
+ pnpm install proxy-icons
```
2. **Usage**: Import the desired icon and use it within your React components.
```jsx
- import { ProUserFill } from '@proxyicons/react';
+ import { ProUserFill } from 'proxy-icons';
const MyComponent = () => {
return (
@@ -29,12 +29,12 @@ description: Installation guide for using Proxy Icons as React components.
};
```
- Note: Replace ProUserFill with any icon component from the @proxyicons/react package that suits your needs.
+ Note: Replace ProUserFill with any icon component from the proxy-icons package that suits your needs.
3. **Sizing**: Apply styles or classes to adjust the size of your icons.
```jsx
- import { ProUserFill } from '@proxyicons/react';
+ import { ProUserFill } from 'proxy-icons';
const MyComponent = () => {
return (