# Nova Icons

This package provides a utility component for rendering Material Symbols or custom Nova icons.

## Installation

```sh
# With npm
npm install @hxnova/icons@beta

# With pnpm
pnpm add @hxnova/icons@beta

# With yarn
yarn add @hxnova/icons@beta
```

## Usage

### Import CSS

Import the icons.css file either in your application root file or top-level css. This will set up the necessary icon fonts in order to render the icons.

```tsx
// in TS/JS file
import '@hxnova/icons/icons.css'
```

```css
@import '@hxnova/icons/icons.css';
```

### Use the Icon component

#### Material Symbols

```ts
import { Icon } from '@hxnova/icons';

// outlined style
<Icon family="material" name="home" />
// filled style
<Icon family="material" name="home" filled />
```

#### Nova Custom Icons

```tsx
import { Icon } from '@hxnova/icons';

// outlined style
<Icon family="nova" name="Plane-Z" />
```

### Styling

The icon component can be customized using the `size` and `color` props. You can also further style the icon using CSS:

```tsx
<Icon family={'material'} name={'home'} size={40} color={'gray'} />
```