Skip to main content

@accelint/ntds

An NTDS-compliant offering of a set of SVG Icon Components with fill color inputs for general usage, and a spritesheet for icons to be used in the COP.

Installation

npm install @accelint/ntds

Background

This package contains two sets of output: a spritesheet for icons for the CBC2 COP, and a core set of colorable React SVG Components.

Spritesheet

The first group is the set of masked icons that are used solely in the COP. These reside in ./icons/masked. Since they will only be used as part of the deckGL rendering, these are combined into a spritesheet under ./dist/masked.

Masked

React SVG Core Components

The second group is a set of icons to be used anywhere needed in a React app as an SVG component, colored as needed. The source icons come from ./icons/core. The first section of this set adhere to a minimal set of icons for Hostile, Friendly and Unknown.

CategoryHostileFriendlyUnknown
AirAir hostileAir friendAir unknown
Air BaseAir Base hostileAir Base friendAir Base unknown
Air GroupAir Group hostileAir Group friendAir Group unknown
HelicopterHelicopter hostileHelicopter friendHelicopter unknown
MissileMissile hostileMissile friendMissile unknown
BaseBase hostileBase friendBase unknown
CarrierCarrier hostileCarrier friendCarrier unknown
LandLand hostileLand friendLand unknown
SurfaceSurface hostileSurface friendSurface unknown
Surface GroupSurface Group hostileSurface Group friendSurface Group unknown
Sub-SurfaceSub-Surface hostileSub-Surface friendSub-Surface unknown
Sub-Surface GroupSub-Surface Group hostileSub-Surface Group friendSub-Surface Group unknown
TorpedoTorpedo hostileTorpedo friendTorpedo unknown

The next section is a simple generic icon for any color variety.

CategoryGeneric
CommunicationsCommunications
Mine FieldMine Field
Petroleum, Oil and Lubricants (POL)POL
PortPort
RunwayRunway
Surface to Air Missile (SAM)SAM
StructureStructure
TargetTarget

The color variants are defined in ./src/constants.ts.

Color variants

Functions

Variables