Icons

Usage

Method 1: Web Component (JS-enabled environments)

<!-- Decorative icon (hidden from screen readers) -->
<velin-icon name="check" size="24"></velin-icon>

<!-- Meaningful icon (announced to screen readers) -->
<velin-icon name="warning" size="20" label="Warning"></velin-icon>

<!-- Custom sprite path -->
<velin-icon name="star" sprite="/assets/velin-icons.svg"></velin-icon>

<!-- Or set a page-wide default (no /dist hardcode) -->
<meta name="velin-icon-sprite" content="vendor/velinstyle/velin-icons.svg">

Default when sprite is omitted: meta / data-velin-icon-sprite / VelinIcon.defaultSprite / relative velin-icons.svg.

Method 2: Inline SVG (static / file:// usage)

<!-- Decorative icon -->
<svg width="24" height="24" fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
     aria-hidden="true">
  <use href="path/to/velin-icons.svg#check"></use>
</svg>

<!-- Meaningful icon -->
<svg width="20" height="20" fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
     role="img" aria-label="Warning">
  <use href="path/to/velin-icons.svg#warning"></use>
</svg>