https://github.com/proksh/proxy-icons
https://github.com/proksh/proxy-icons
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/proksh/proxy-icons
- Owner: proksh
- Created: 2024-05-09T17:08:16.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-30T16:37:07.000Z (over 1 year ago)
- Last Synced: 2025-08-09T03:58:22.563Z (7 months ago)
- Language: HTML
- Homepage: https://proxy-icons-website.vercel.app
- Size: 11.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Proxy Icons
[](https://www.npmjs.com/package/proxy-icons)
Easily integrate these icons into your application by using Font cdn or React components 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/)