open-index/open-npm huggingface dataset:
npm package: @neo4j-design-system/icon-library
Description: Stencil Component Starter
Latest version: 0.0.5

# Neo4j Icon Library (Web Components)

This is a icon library to be used by products and apps of Neo4j, Inc (https://neo4j.com). This icon library uses Streamline Icons (https://app.streamlineicons.com/).

The icon library is built as Web Components. You can learn more about Web Components here - https://www.webcomponents.org/introduction

Storybook Preview: https://design-icons.surge.sh/

## Installation

### Using NPM

`npm install @neo4j-design-system/icon-library`

### Using YARN

`yarn add @neo4j-design-system/icon-library`

### Using CDN

Note: Include both the scripts. It will automatically load the version that is compatible with the user's browser.

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@neo4j-design-system/icon-library@latest/dist/icon-library/icon-library.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@neo4j-design-system/icon-library@latest/dist/icon-library/icon-library.js"></script>
```

## Example Usage

### Option 1

With a Javascript Framework

```js
import { defineCustomElements } from '@neo4j-design-system/icon-library/dist/loader';

defineCustomElements();
```

Then you can use any icons as like

```html
<neo-icon-hamburger size="24px"></neo-icon-hamburger>
```

### Option 2

Without any Javascript Framework

Include the required javascipt file via the CDN. And then you can include the icon web components into your HTML.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@neo4j-design-system/icon-library@latest/dist/icon-library/icon-library.esm.js"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/@neo4j-design-system/icon-library@latest/dist/icon-library/icon-library.js"></script>
  </head>
  <body>
    <neo-icon-hamburger size="24px" />
  </body>
</html>
```

You can view the working example in a codesandbox.io here - https://codesandbox.io/s/icon-library-playground-izpso?file=/index.html

### Sizing the icon

You can size the icon by passing the `size` attribute to the web component. Example -

`<neo-icon-hamburger size="24px">`

### Coloring the icon

The icons are SVGs. So they take the color of its parent HTML. For example, this will generate a red colored icon.

```html
<i style="color: red">
  <neo-icon-hambuger />
</i>
```

## FAQs

**What is the file size of this package?**

This is a very light weight library. The base javascript is less than 10KB. Then per icon used on the page it is an additional 1KB.

The base javascript detects what webcomponent icons are used on the page, and then only inject additional ~1KB of javascript corresponding to it. Don't worry, it can also handle icons in the HTML that is dynamically added after page load (like in Modals, Tabs, etc).

**What icons are included?**

The icons currently included in the library can be previewed here - https://design-icons.surge.sh/. If you or your team would like additional icons, please reach out to the Web Design Team.