Icon

A component for displaying glyphs that convey meaning through iconography.

npm version

Source Code

npm install @vrembem/icon
@use "@vrembem/icon";

You can use any icon set but may require changing default icon variables. Default styles are intended for feather icons which is a great open source option.

icon

You can inject svg icons directly or use svg sprites. The only requirement is the icon component class.

<svg class="icon" role="img">
  <use xlink:href="#icon-anchor"></use>
</svg>

icon_style_[key]

The default icon style is set using the $icon-style variable. You can also explicity style an icon using the style modifier.

<svg class="icon icon_style_stroke" role="img">
  <use xlink:href="#icon-heart"></use>
</svg>

<svg class="icon icon_style_fill" role="img">
  <use xlink:href="#icon-heart"></use>
</svg>