proicons 4.11.1 → 4.11.2

package/README.md

@@ -2,19 +2,19 @@
 
 <p>
     <a href="https://github.com/ProCode-Software/proicons/releases">
-        <img src="https://img.shields.io/github/v/release/ProCode-Software/proicons?style=for-the-badge&color=rgb(172, 229, 251)"
+        <img src="https://img.shields.io/github/v/release/ProCode-Software/proicons?style=for-the-badge"
             alt="Version">
     </a>
-    <a href="">
-        <img src="https://img.shields.io/github/stars/ProCode-Software/proicons?style=for-the-badge&color=rgb(255, 215, 142)"
+    <a href="https://github.com/ProCode-Software/proicons">
+        <img src="https://img.shields.io/github/stars/ProCode-Software/proicons?style=for-the-badge"
             alt="Stars">
     </a>
     <a href="https://www.npmjs.com/package/proicons">
-        <img src="https://img.shields.io/npm/dm/proicons?label=downloads&style=for-the-badge&color=rgb(180, 240, 155)"
+        <img src="https://img.shields.io/npm/dm/proicons?label=downloads&style=for-the-badge"
             alt="NPM Package">
     </a>
     <a href="https://github.com/ProCode-Software/proicons/blob/main/LICENSE">
-        <img src="https://img.shields.io/github/license/ProCode-Software/proicons?style=for-the-badge&color=rgb(252, 197, 232)"
+        <img src="https://img.shields.io/github/license/ProCode-Software/proicons?style=for-the-badge"
             alt="License">
     </a>
 </p>
@@ -33,134 +33,130 @@
 </p>
 
 ## Features
+
 - Highly-customizable icons
-- Available for [HTML](https://procode-software.github.io/proicons/docs/api-reference/html-api), [Node.js](https://procode-software.github.io/proicons/docs/api-reference/html-api), [React](https://procode-software.github.io/proicons/docs/packages/react) and [Vue](https://procode-software.github.io/proicons/docs/packages/vue)
+- Available for [HTML](https://procode-software.github.io/proicons/docs/html-api), [Node.js](https://procode-software.github.io/proicons/docs/html-api), [React](https://procode-software.github.io/proicons/docs/react) and [Vue](https://procode-software.github.io/proicons/docs/vue)
 - Tree-shakable for eliminating unused icons when using a bundler
 
-## Usage
-
-### HTML
-ProIcons can be imported via a CDN provider such as UNPKG or [JSDelivr](https://www.jsdelivr.com/package/npm/proicons)
-
-```html
-<!-- Insert the icon -->
-<i proicon="add"></i>
-
-<script src="https://unpkg.com/proicons"></script>
-
-<!-- Replace icons with SVG -->
-<script>
-    proicons.replace();
-</script>
-```
-
-You can also self-host the package by installing it via [NPM](https://www.npmjs.com/package/proicons):
-
-```shell
-npm install proicons
-```
-Then add this `<script>` tag to your HTML:
-```html
-<script src="path/to/proicons/dist/umd/proicons.cjs"></script>
-```
-
-### Node.js
-Install the ProIcons package via [NPM](https://www.npmjs.com/package/proicons):
-
-```shell
-npm install proicons
-```
-
-Then import the package in your script:
-
-```javascript
-// Recommended way to import
-import { AddIcon } from 'proicons'
-
-console.log(AddIcon.raw) // Returns SVG string
-```
-Or if you are using CommonJS:
-```javascript
-const { addIcon } = require('proicons')
-
-// or
-const proicons = require('proicons')
-const { addIcon } = proicons
-```
-
-### Webfont
-ProIcons also has a webfont version, allowing you to use icons from a stylesheet without the need of scripts, similar to Font Awesome.
-
-[Documentation](https://procode-software.github.io/proicons/docs/packages/webfont)
-
-Import via a CDN:
-```html
-<link rel="stylesheet" href="https://unpkg.com/@proicons/webfont">
-```
-Or, install via [NPM](https://npmjs.com/package/@proicons/webfont):
-
-```shell
-npm install @proicons/webfont
-```
-```html
-<link rel="stylesheet" href="path/to/@proicons/webfont/ProIcons.css">
-```
-
-### React
-ProIcons can also be imported as customizable React components.
-
-[Documentation](https://procode-software.github.io/proicons/docs/packages/react)
-
-Install via [NPM](https://npmjs.com/package/@proicons/react):
-```shell
-npm install @proicons/react
-```
-```jsx
-import { SearchIcon } from '@proicons/react'
-
-function App() {
-    return (
-        <SearchIcon color="red" size={32} />
-    )
-}
-```
-> [!IMPORTANT]
-> This package is ESM-only. To use in CommonJS contexts, use `await import('@proicons/react')` (asynchronous) or `require('@proicons/react')` in newer Node.js versions.
-
-### Vue
-ProIcons is also available as a Vue package, similar to React. This supports Vue 3, and is also ESM-only.
-
-[Documentation](https://procode-software.github.io/proicons/docs/packages/vue)
-
-Install via [NPM](https://npmjs.com/package/@proicons/vue):
-
-```shell
-npm install @proicons/react
-```
-
-Then import in your Vue application:
-```vue
-<script setup lang="ts">
-import { AddSquareIcon } from '@proicons/vue'
-
-</script>
-
-<template>
-    <AddSquareIcon :size="32" color="red">
-</template>
-```
+## Packages
+
+<table>
+    <tr>
+        <th></th>
+        <th>Package</th>
+        <th>NPM</th>
+        <th>Links</th>
+    </tr>
+    <tr>
+        <td>
+            <img src="https://raw.githubusercontent.com/ProCode-Software/proicons/refs/heads/main/site/src/public/logos/javascript.svg" width="48">
+        </td>
+        <td>
+            <b>Vanilla</b>
+            <br>
+            <code>proicons</code>
+        </td>
+        <td>
+            <a href="https://npmjs.com/package/proicons">
+                <img src="https://img.shields.io/npm/dm/proicons?label=downloads&style=for-the-badge" alt="NPM Package">
+            </a>
+        </td>
+        <td>
+            <a href="https://procode-software.github.io/proicons/docs/javascript-api">Documentation</a> | 
+            <a href="https://github.com/ProCode-Software/proicons/tree/main/src">GitHub</a>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <img src="https://raw.githubusercontent.com/ProCode-Software/proicons/refs/heads/main/site/src/public/logos/react.svg" width="48">
+        </td>
+        <td>
+            <b>React</b>
+            <br>
+            <code>@proicons/react</code>
+        </td>
+        <td>
+            <a href="https://npmjs.com/package/@proicons/react">
+                <img src="https://img.shields.io/npm/dm/@proicons/react?label=downloads&style=for-the-badge" alt="NPM Package">
+            </a>
+        </td>
+        <td>
+            <a href="https://procode-software.github.io/proicons/docs/react">Documentation</a> | 
+            <a href="https://github.com/ProCode-Software/proicons/tree/main/packages/proicons-react">GitHub</a>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <img src="https://raw.githubusercontent.com/ProCode-Software/proicons/refs/heads/main/site/src/public/logos/vue.svg" width="48">
+        </td>
+        <td>
+            <b>Vue</b>
+            <br>
+            <code>@proicons/vue</code>
+        </td>
+        <td>
+            <a href="https://npmjs.com/package/@proicons/vue">
+                <img src="https://img.shields.io/npm/dm/@proicons/vue?label=downloads&style=for-the-badge" alt="NPM Package">
+            </a>
+        </td>
+        <td>
+            <a href="https://procode-software.github.io/proicons/docs/vue">Documentation</a> | 
+            <a href="https://github.com/ProCode-Software/proicons/tree/main/packages/proicons-vue">GitHub</a>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <img src="https://raw.githubusercontent.com/ProCode-Software/proicons/refs/heads/main/site/src/public/logos/html5.svg" width="48">
+        </td>
+        <td>
+            <b>Webfont</b>
+            <br>
+            <code>@proicons/webfont</code>
+        </td>
+        <td>
+            <a href="https://npmjs.com/package/@proicons/webfont">
+                <img src="https://img.shields.io/npm/dm/@proicons/webfont?label=downloads&style=for-the-badge" alt="NPM Package">
+            </a>
+        </td>
+        <td>
+            <a href="https://procode-software.github.io/proicons/docs/webfont">Documentation</a> | 
+            <a href="https://github.com/ProCode-Software/proicons/tree/main/packages/proicons-webfont">GitHub</a>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <img src="https://raw.githubusercontent.com/ProCode-Software/proicons/refs/heads/main/site/src/public/logos/roblox-studio.svg" width="48">
+        </td>
+        <td>
+            <b>Roblox</b>
+            <br>
+            <code>procode-software/proicons</code>
+        </td>
+        <td>
+            <a href="https://wally.run/package/procode-software/proicons">View on Wally</a>
+        </td>
+        <td>
+            <a href="https://procode-software.github.io/proicons/docs/roblox">Documentation</a> | 
+            <a href="https://github.com/ProCode-Software/proicons/tree/main/packages/proicons-roblox">GitHub</a>
+        </td>
+    </tr>
+</table>
 
 # License
+
 ProIcons is 100% free for personal and commercial use, and is licensed under the [MIT License](https://github.com/ProCode-Software/proicons?tab=MIT-1-ov-file).
 
 ## Request an icon
+
 If an icon you want isn't in the set, you can request an icon in [discussions](https://github.com/ProCode-Software/proicons/discussions/categories/icon-requests).
 
 ## Contributing
+
 For more info on how to contribute, please see our [contributing guide](https://github.com/ProCode-Software/proicons/blob/main/CONTRIBUTING.md).
 
 ## Credits
--   Icon design and guidelines inspired by Microsoft's [Fluent System Icons](https://github.com/microsoft/fluentui-system-icons)
--   Alpha bleeding script from https://github.com/Corecii/Transparent-Pixel-Fix
--   API based on [Feather Icons](https://github.com/feathericons/feather)
--   Website design inspired by [Lucide Icons](https://github.com/lucide-icons/lucide)
+
+- Icon design and guidelines inspired by Microsoft's [Fluent System Icons](https://github.com/microsoft/fluentui-system-icons)
+- Alpha bleeding script from https://github.com/Corecii/Transparent-Pixel-Fix
+- API based on [Feather Icons](https://github.com/feathericons/feather)
+- Website design inspired by [Lucide Icons](https://github.com/lucide-icons/lucide)