abaabil.icon - npm Package Compare versions

Comparing version 0.0.18 to 0.0.19

package.json

 {
   "name": "abaabil.icon",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "main": "dist/index.js",
@@ -27,3 +27,3 @@ "module": "dist/index.esm.js",
   },
-  "gitHead": "63ab642d6991be0321c02ba7acc17d7713df41cb"
+  "gitHead": "4f9edc0769d35504f1c93d20c54f3ac2dac62dfd"
 }

README.md

@@ -1,2 +0,2 @@
-# Icon
+# Icon Component
 
@@ -6,10 +6,52 @@ [![npm version](https://img.shields.io/npm/v/abaabil.icon.svg)](https://www.npmjs.com/package/abaabil.icon)
 
-## Introduction
+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.
 
-Welcome to the Icon npm package. This package provides a set of icons for your projects, offering a consistent look and feel across your application.
+## Usage
 
-## Documentation
+```jsx
+import * as React from 'react';
+import Icon from './path-to-icon';
 
-For full documentation, including installation instructions, usage examples, and API references, please visit our official documentation site:
+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>
+);
 
-👉 [Official Documentation](https://www.abaabil.com/icon) 👈
+export default App;
+```
+
+## Props
+
+| 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.                                                            |
+
+## Sizes
+
+- **sm**: Small icon size.
+- **base**: Base icon size.
+- **lg**: Large icon size.
+
+## Example
+
+```jsx
+import * as React from 'react';
+import Icon from './path-to-icon';
+
+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>
+);
+
+export default Example;
+```
+
+This example demonstrates various ways to use the `Icon` component, showcasing different sizes and custom class names for further styling.

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

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

Total package byte prevSize

7113

increased by24.94%

Number of lines in readme file

57

increased by280%

No dependency changes