open-index/open-npm huggingface dataset:
npm package: @paypay/pp-components
Description: PayPay Components
Author: PayPay Corporation
Latest version: 0.1.6

# PP Components

To get started developing Mini Apps with a rich user experience, PayPay provides a set of custom elements that are purely based on web standards. 
These components are optimized and tested to run on mobile browsers and webviews. The look and feel reflects PayPay's design system out of the box.

Features: 
- Works with any JS framework
- Seamlessly matches PayPay's design
- Customizable with CSS

The custom elements can be used like any other HTML tag, i.e.:
```HTML
<pp-button btn-type="primary" size="sm" pill>I am a demo</pp-button>
```

## Usage

Add `@paypay/pp-components` to your project by running the following command:

```bash
npm install @paypay/pp-components
```
npm package: @payping/icons
Description: 1. Get `svg` format of the new icon and add its file to images folder.
Latest version: 1.5.3

# @PayPing/icon package

### How to add new icon

1. Get `svg` format of the new icon and add its file to images folder.

> If you need to add initial conversions for your SVG code you can run the **svgo** script for your file
>
> ```shell
> svgo -i src/images/Add.svg
> ```

2. The new icon's `viewBox` attribute should be the following:

```
 viewBox="0 0 24 24"
```

3. If `viewBox` needs to be changed, the size of our icon should also change,
   so we should open it with a svg editor (e.g. inkscape) and edit its size to fill the new `viewBox`.
4. After editing, we should save the new icon as `Optimized svg` (to remove all unnecessary attributes).
5. Depending on the type of icon we might need `fill="currentColor"` (e.g. ant icons) or `fill="none" stroke="currentColor"` (e.g. feather icons).

### How build works

1. Initially there is only an **images** folder inside our **src** folder.
2. When `build` script is executed it will generate the **icons** folder by compiling **images** with `.svgorc.json` config.
3. This config files includes the required attribute that should be added to all icons (e.g. `className="PayPing-icon`).
4. A complete list for this config file is available at [SVGO repo](https://github.com/svg/svgo).

### How to publish

1. Create a release branch for the new version.
2. Increase the version in package.json file.
3. Run `customPublish` script to publish it to npm.
4. Close release branch.