@highlight-ui/icon - npm Package Compare versions

Comparing version 5.0.0 to 5.0.1

dist/cjs/index.js

@@ -45,6 +45,6 @@ 'use strict';
 var styles = {
-  "iconColor": "Icon-module__CLA8sueg__v5-0-0",
-  "spin": "Icon-module__zqGixWV1__v5-0-0",
-  "rotate": "Icon-module__nc9ZsMZi__v5-0-0",
-  "block": "Icon-module__TDwEUoXL__v5-0-0"
+  "iconColor": "Icon-module__CLA8sueg__v5-0-1",
+  "spin": "Icon-module__zqGixWV1__v5-0-1",
+  "rotate": "Icon-module__nc9ZsMZi__v5-0-1",
+  "block": "Icon-module__TDwEUoXL__v5-0-1"
 };
@@ -51,0 +51,0 @@ var familyPrefixMap = {

dist/esm/index.js

@@ -32,6 +32,6 @@ import React from 'react';
 var styles = {
-  "iconColor": "Icon-module__CLA8sueg__v5-0-0",
-  "spin": "Icon-module__zqGixWV1__v5-0-0",
-  "rotate": "Icon-module__nc9ZsMZi__v5-0-0",
-  "block": "Icon-module__TDwEUoXL__v5-0-0"
+  "iconColor": "Icon-module__CLA8sueg__v5-0-1",
+  "spin": "Icon-module__zqGixWV1__v5-0-1",
+  "rotate": "Icon-module__nc9ZsMZi__v5-0-1",
+  "block": "Icon-module__TDwEUoXL__v5-0-1"
 };
@@ -38,0 +38,0 @@ var familyPrefixMap = {

package.json

 {
   "name": "@highlight-ui/icon",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "author": "Personio GmbH & Co. KG",
@@ -48,3 +48,3 @@ "main": "dist/cjs/index.js",
   },
-  "gitHead": "3298af27b22ce36baeabd64f165d69e9d32eff5a"
+  "gitHead": "e350b6a3203165c887f553b3f2bb0b286f392dbf"
 }

README.md

@@ -1,13 +0,37 @@
-# `@highlight-ui/icon`
+[![npm](https://img.shields.io/npm/v/@highlight-ui/icon)](https://www.npmjs.com/package/@highlight-ui/icon)
+[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/3340d7-icons/b/072e59)
+[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/elements-icon--default)
 
+# @highlight-ui/icon
+
 ## Installation
 
+Using npm:
+
+```bash
+npm install @highlight-ui/icon
 ```
+
+Using yarn:
+
+```bash
 yarn add @highlight-ui/icon
 ```
 
-## Usage
+Using pnpm:
 
-In TypeScript/JavaScript:
+```bash
+pnpm install @highlight-ui/icon
+```
 
+> In order to use font-awesome, it is necessary to include per your usage! It is not shipped in this package.
+
+In your (S)CSS file:
+
+```scss
+@import url('@highlight-ui/icon');
+```
+
+Once the package is installed, you can import the library:
+
 ```ts
@@ -17,13 +41,35 @@ import { Icon } from '@highlight-ui/icon';
 
-In (S)CSS:
+## Usage
 
-```scss
-@import url('@highlight-ui/icon');
+```tsx
+import React, { useState } from 'react';
+import { Icon } from '@highlight-ui/icon';
+
+export default function IconExample() {
+  return <Icon name="map" color="icon-critical" type="light" />;
+}
 ```
 
-_P.S. in order to use font-awesome, it is necessary to include per your usage!
-It is not shipped in this package._
+## Props 📜
 
-## Documentation
+| Prop          | Type                                  | Required | Default   | Description                                                                       |
+| :------------ | :------------------------------------ | :------- | :-------- | :-------------------------------------------------------------------------------- |
+| `name`        | `string`                              | Yes      |           | Specify a name of the icon                                                        |
+| `color`       | `IconColorToken`                      | No       |           | Specify a color of the icon                                                       |
+| `size`        | `number`                              | No       | `14`      | Specify the size of the icon                                                      |
+| `spin`        | `boolean`                             | No       | `false`   | Specifies whether the icon will be spinning (using CSS animation) or not          |
+| `type`        | `'regular', 'light', 'solid'`         | No       | `regular` | Specify a font family for the icon                                                |
+| `block`       | `boolean`                             | No       | `false`   | Makes the component behave as a block element (take up the whole available space) |
+| `aria-hidden` | `React.AriaAttributes['aria-hidden']` | No       |           | Indicates whether the element is exposed to an accessibility API                  |
 
-Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/3340d7-icons)
+### Custom types 🔠
+
+| Type             | Values                                                                                                                                                                       | Description |
+| :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- |
+| `IconColorToken` | ["Icon"](https://www.personio.design/40d648a47/p/489790-colours/t/215ba4) and ["Icon On"](https://www.personio.design/40d648a47/p/489790-colours/t/77d4a6) color token names |             |
+
+## Contributing 🖌️
+
+Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/3340d7-icons/b/072e59) for usage guidelines and visual examples.
+
+If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).

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

52688

increased by6.44%

Number of lines in readme file

75

increased by158.62%

No dependency changes