@aquera/nile-glyph

Icon components and glyph data for the Nile Design System.

Installation

npm install @aquera/nile-glyph
# or
yarn add @aquera/nile-glyph

Usage

Basic Usage

Import and use the <nile-glyph> web component:

<nile-glyph name="alert"></nile-glyph>

The component self-registers as a custom element when imported:

import '@aquera/nile-glyph';

Properties

| Property | Type | Default | Description | | --------------- | --------- | --------- | -------------------------------------------- | | name | string | — | The name of the icon to display | | set | string | 'local' | The icon set to use | | size | number | 16 | Icon size in pixels | | color | string | — | Icon fill color | | method | string | 'fill' | Rendering method ('fill' or 'stroke') | | description | string | '' | Accessible description for the icon | | push | boolean | false | Adds right margin spacing | | noFill | boolean | false | Prevents fill from being applied to paths | | frame | string | — | Custom viewBox dimensions | | customSvgPath | string | — | URL to a custom SVG file to load |

Examples

<!-- Icon with custom size and color -->
<nile-glyph name="alert" size="24" color="#ff0000"></nile-glyph>

<!-- Stroke-based icon -->
<nile-glyph name="calendar" method="stroke"></nile-glyph>

<!-- Icon with accessible description -->
<nile-glyph name="close" description="Close dialog"></nile-glyph>

<!-- Custom SVG from URL -->
<nile-glyph customSvgPath="/assets/my-icon.svg"></nile-glyph>

CSS Custom Properties

| Property | Description | | --------------------------- | --------------------- | | --nile-svg-height | Icon height | | --nile-svg-width | Icon width | | --nile-svg-fill | Icon fill color | | --nile-svg-stroke | Icon stroke color | | --nile-svg-stroke-width | Icon stroke width | | --nile-spacing-lg | Push margin spacing |

Programmatic Imports

// Import the component class
import { NileGlyph } from '@aquera/nile-glyph';

// Import individual icon SVG data
import * as Icons from '@aquera/nile-glyph/icons';

// Import the alias map
import { aliasMap } from '@aquera/nile-glyph';

Exports

| Entry Point | Description | | ---------------------------- | ---------------------------------------- | | @aquera/nile-glyph | Main entry — NileGlyph, aliasMap, Icons | | @aquera/nile-glyph/icons | Individual icon SVG data (base64) | | @aquera/nile-glyph/nile-glyph | NileGlyph component only |

Release Notes

In this section, you can find the updates for each release of @aquera/nile-glyph. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.

Version 1.0.3 (April 27, 2026)

• Nile Glyph: Added 21 New NxtGen Icons (UIF-1202)

Version 1.0.2 (April 15, 2026)

• Nile Glyph: Added Sql Server and Open Search Glyph (UIF-1183)

Version 1.0.1 (April 07, 2026)

• Nile Glyph: Added Colorize Glyph (UIF-1175)

Version 1.0.0 (March 26, 2026)

• Created Nile Glyph Component.

• 2200+ Glyphs(Icons) available out of the box.