@neo4j-design-system/icon-library NPM

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.

<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

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

defineCustomElements();

Then you can use any icons as like

<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.

<!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.

<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.

@stencil/core

@infinitebrahmanuniverse/nolb-_neo @everything-registry/sub-chunk-639 @zalastax/nolb-_neo

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago