abaabil.icon - npm Package Compare versions

Comparing version 0.0.21 to 0.0.22

package.json

 {
   "name": "abaabil.icon",
   "author": "Abaabil",
-  "version": "0.0.21",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
+  "version": "0.0.22",
+  "main": "dist/index.esm.min.js",
   "files": [
@@ -11,11 +10,7 @@ "dist"
   "scripts": {
-    "build": "rm -rf dist && npm run build:cjs && npm run build:esm",
-    "build:cjs": "babel index.js -d dist --out-file-extension .js",
-    "build:esm": "babel index.js -d dist --out-file-extension .esm.js -M"
+    "build": "rm -rf dist && npm run build:esm",
+    "build:esm": "esbuild index.js --format=esm --outfile=dist/index.esm.min.js --minify --charset=utf8 --loader:.js=jsx"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.8",
-    "@babel/core": "^7.24.9",
-    "@babel/preset-env": "^7.24.8",
-    "@babel/preset-react": "^7.24.7"
+    "esbuild": "^0.23.0"
   },
@@ -40,3 +35,3 @@ "peerDependencies": {
   ],
-  "gitHead": "aced84b9725548e6f587b7e78f06c78e2fbc7097"
+  "gitHead": "a6bfe6c37f4a998451473ee53b6c066773dd0738"
 }

README.md

@@ -1,23 +0,23 @@
-# Icon Component
+# Icon Component Documentation
 
-[![npm version](https://img.shields.io/npm/v/abaabil.icon.svg)](https://www.npmjs.com/package/abaabil.icon)
-[![npm downloads](https://img.shields.io/npm/dm/abaabil.icon.svg)](https://www.npmjs.com/package/abaabil.icon)
+[![NPM version](https://img.shields.io/npm/v/abaabil.icon)](https://www.npmjs.com/package/abaabil.icon)
+[![License](https://img.shields.io/npm/l/abaabil.icon)](https://www.npmjs.com/package/abaabil.icon)
+[![Downloads](https://img.shields.io/npm/dm/abaabil.icon)](https://www.npmjs.com/package/abaabil.icon)
+[![Bundle Size](https://img.shields.io/bundlephobia/min/abaabil.icon)](https://bundlephobia.com/result?p=abaabil.icon)
 
-The `Icon` component is a versatile and customizable SVG icon component built with React. It supports different sizes and allows for additional class names to be applied for further customization.
+## Overview
 
-## Usage
+The `Icon` component is a lightweight and flexible SVG icon component for React applications. It allows you to easily include icons in your application using a centralized sprite sheet, ensuring a consistent and efficient way to manage your iconography.
 
-```jsx
-import * as React from 'react';
-import Icon from 'abaabil.icon';
+### Features:
+- **Customizable Sizing:** The component supports different sizes, allowing you to scale icons according to your design requirements.
+- **Accessibility Support:** Includes options for making icons either decorative or informative, with appropriate ARIA attributes.
+- **SVG Sprite Usage:** Icons are referenced from an external SVG sprite sheet, making it easy to manage and update icons across your application.
 
-const App = () => (
-  <div>
-    <Icon id="settings" size="base" />
-    <Icon id="check" size="lg" className="text-green-500" />
-    <Icon id="warning" size="sm" className="text-red-500" />
-  </div>
-);
+## Installation
 
-export default App;
+You can install the `Icon` component using npm:
+
+```bash
+npm install abaabil.icon
 ```
@@ -27,31 +27,61 @@
 
-| Prop       | Type       | Default   | Description                                                                                             |
-|------------|------------|-----------|---------------------------------------------------------------------------------------------------------|
-| `id`       | `string`   | `null`    | The ID of the icon to use from the SVG sprite.                                                          |
-| `size`     | `string`   | `base`    | The size of the icon. Can be `sm`, `base`, or `lg`.                                                     |
-| `className`| `string`   | `''`      | Additional class names to apply to the icon.                                                            |
+### id
+- **Type:** `string`
+- **Description:** The ID of the icon within the SVG sprite sheet. This ID is used to reference the specific icon you want to display.
 
-## Sizes
+### size
+- **Type:** `string`
+- **Default:** `'base'`
+- **Options:** `'sm'`, `'base'`, `'lg'`
+- **Description:** Specifies the size of the icon. The available options correspond to different width and height values:
+    - `'sm'`: Small size (`w-4 h-4`)
+    - `'base'`: Base size (`w-6 h-6`)
+    - `'lg'`: Large size (`w-8 h-8`)
 
-- **sm**: Small icon size.
-- **base**: Base icon size.
-- **lg**: Large icon size.
+### className
+- **Type:** `string`
+- **Description:** Additional CSS classes to apply to the icon for custom styling.
 
-## Example
+### aria-label
+- **Type:** `string`
+- **Description:** Provides an accessible label for the icon. Use this prop when the icon conveys meaningful information that needs to be announced by screen readers. If provided, the `aria-hidden` attribute is automatically set to `false`.
 
+### aria-hidden
+- **Type:** `boolean`
+- **Default:** `true` (when no `aria-label` is provided)
+- **Description:** Controls whether the icon is hidden from screen readers. By default, the icon is hidden (`aria-hidden="true"`), but if an `aria-label` is provided, this attribute is automatically set to `false`.
+
+## Accessibility Considerations
+
+- **Decorative Icons:** If the icon is purely decorative and does not convey any meaningful content, the `aria-hidden="true"` attribute is applied by default. This ensures that screen readers ignore the icon, improving the overall accessibility experience.
+
+- **Informative Icons:** If the icon conveys important information (such as an error or success indicator), provide an `aria-label` prop to describe the icon. This makes the icon accessible to users relying on screen readers, ensuring that they receive the same information as sighted users.
+
+## Example Usage
+
+### Basic Icon (Decorative)
 ```jsx
-import * as React from 'react';
-import Icon from 'abaabil.icon';
+<Icon id="checkmark" />
+```
 
-const Example = () => (
-  <div>
-    <Icon id="settings" size="base" />
-    <Icon id="check" size="lg" className="text-green-500" />
-    <Icon id="warning" size="sm" className="text-red-500" />
-  </div>
-);
+In this example, the icon is decorative and does not require any additional accessibility features. The `aria-hidden="true"` attribute is applied by default.
 
-export default Example;
+### Informative Icon (With `aria-label`)
+```jsx
+<Icon id="checkmark" aria-label="Success" />
 ```
 
-This example demonstrates various ways to use the `Icon` component, showcasing different sizes and custom class names for further styling.
+Here, the icon represents a "Success" status and therefore includes an `aria-label`. This makes the icon accessible to screen readers, ensuring that users are informed about the icon's meaning.
+
+### Large Icon with Custom Styling
+```jsx
+<Icon id="alert" size="lg" className="text-red-500" />
+```
+
+This example shows how to render a large icon with custom styling applied via the `className` prop. The icon will have a large size and be colored red using Tailwind CSS utilities.
+
+## Best Practices
+
+1. **Always use `aria-label` for informative icons** to ensure that their meaning is conveyed to users who rely on screen readers.
+2. **Use decorative icons sparingly** and make sure they are correctly marked with `aria-hidden="true"` so they do not clutter the screen reader experience.
+3. **Consistently manage icon sizes** using the provided `size` prop to ensure a cohesive visual design throughout your application.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

1

decreased by-75%

Number of lines in readme file

87

increased by52.63%

Worsened metrics

Total package byte prevSize

6750

decreased by-10.16%

Number of package files

4

decreased by-20%

Lines of code

2

decreased by-96.55%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes