open-index/open-npm huggingface dataset:
npm package: @nexusui/branding
Description: This package contains branding elements for NexusUI applications, including logos for each unique product line. These icons work the same as basic SVG icons in React.
Latest version: 2.10.0

# NexusUI Branding

This package contains branding elements for NexusUI applications, including logos for each unique product line. These icons work the same as basic SVG icons in React.

## Installation

Add the library as a dependency to your project:

```
# With yarn
yarn add @nexusui/branding

# With npm
npm install --save @nexusui/branding
```

## Usage

In your typescript file, import the component(s) you want to use:

```tsx
// Replace ProductName with the specific logo you want to use
import { ProductName } from '@nexusui/branding';
// or
import ProductName from '@nexusui/branding/ProductName';

<ProductName height={24} width={24}/>
```
npm package: @nexusui/icon-font
Description: NexusUI custom icons available as a convenient icon font
Latest version: 1.0.0

# NexusUI Icon Font

This package contains NexusUI custom icons in a variety of font formats.

## Installation

Add the library as a dependency to your project:

```
# With yarn
yarn add @nexusui/icon-font

# With npm
npm install --save @nexusui/icon-font
```

You will need to include the `@nexusui/icon-font/NexusUIIcons.css` file in your top level CSS or JS file.

```
// CSS
import '~@nexusui/icon-font/NexusUIIcons.css'
```

```
// JS
import '@nexusui/icon-font/NexusUIIcons.css';
```

## Usage

Icons will be available by applying the appropriate class to an `<i>` or other element.

```<i className={'nexusui-ICONNAME'}></i>```
npm package: @nexusui/prettier-config
Description: nexus prettier config
Latest version: 1.0.0

# NexusUI Prettier Config

This is a [Shareable Configuration](https://prettier.io/docs/en/configuration.html#sharing-configurations) for Prettier. This is the configuration used in all NexusUI packages and contains prettier rules that we recommend for all NexusUI applications.


## Installation

1) First, add necessary prettier dependencies to your project's `devDependencies`:

```sh
# With yarn
yarn add --dev prettier onchange

# With npm
npm install --save-dev prettier onchange
```

2) Second, add the NexusUI prettier config library as a `devDependency` to your project:

```sh
# With yarn
yarn add --dev @nexusui/prettier-config

# With npm
npm install --save-dev @nexusui/prettier-config
```

## Usage

Configuration supports three ways, please choose one you prefer to.

* It's out of box, reference `@nexusui/prettier-config` in your `package.json` prettier field as below:

  ```json
  {
    "name": "Your-App",
    "version": "0.0.1",
    "prettier": "@nexusui/prettier-config"
  }
  ```

* If you don’t want to use `package.json`, you can use any of the supported extensions to export a string, e.g. `.prettierrc.json`:

  ```json
  "@nexusui/prettier-config"
  ```

* The above two ways do not provide extended configuration to override some properties in shared configuration. If you need to do that, import the file in a `.prettierrc.js` file and export the modifications, e.g:

  ```json
  module.exports = {
    ...require("@nexusui/prettier-config"),
    printWidth: 250,
  };
  ```

## Migration Guide

### 0.X.X -> 1.0.0

#### printWidth

`printWidth` was changed from `250` to `120` to make code readable.

#### trailingComma

`trailingComma` was changed from `none` to `all` to prevent unnecessary line changes in git and makes PRs cleaner.


```sh

// Before (0.x.x)
printWidth: 250,
trailingComma: 'none'

// After (1.0.0)
printWidth: 120,
trailingComma: 'all'

```


### Scripts
Update the `package.json` file to add `prettier` scripts.

```json
// package.json
"scripts": {
  "prettier": "prettier \"src/**/*.{js,ts,tsx,jsx}\" --write",
  "prettier-check": "prettier \"src/**/*.{js,ts,tsx,jsx}\" --check",
  "prettier-watch": "onchange 'src/**/*.{js,ts,tsx,jsx}' -- prettier --write {{changed}}"
}

```

## Related Packages

[@nexusui/eslint-config](https://www.npmjs.com/package/@nexusui/eslint-config) is a complementary package that includes recommended eslint [Shareable Configuration](https://eslint.org/docs/latest/developer-guide/shareable-configs.html#publishing-a-shareable-config) for NexusUI projects.