Icons

SVG icon sizing and color utilities for @bnotk/dsx.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/icons.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Usage

The module is designed for SVG sprites or inline SVGs:

<svg class="dsx-icon dsx-icon--sm dsx-icon--main" viewBox="0 0 16 16" aria-hidden="true">
  <use href="/icons/sprite.svg#info"></use>
</svg>

For the closest XNA/KSS match, prefer the exported sprite (or inline the same paths), keep filled icons on currentColor, and set stroke="currentColor" on outlined inline SVG shapes. The live preview inlines the same exported symbol paths so the iframe stays self-contained.

Classes

Class	Purpose
`.dsx-icon`	Base icon size and `currentColor`-driven fill
`.dsx-icon--xs` / `--sm` / `--lg` / `--xl`	Size variants
`.dsx-icon--main` / `--highlight` / `--success` / `--warning` / `--error` / `--muted` / `--white`	Color utilities

Accessibility notes

Decorative icons should use aria-hidden="true".
Informative standalone icons need an accessible label via adjacent text, <title>, or ARIA.
Because the icon inherits currentColor, test contrast in the surrounding context.