Icons | fronnt UI

List of icons

Usage

Icons are provided by the @fronntui/icons package. The package contains all icons as SVG files.

Each icon is made available for direct import as Vue component from the @fronntui/vue package.

<script setup>
import { NNIconArrow } from "@fronntui/vue";
</script>

<template>
  <NNIconArrow />
</template>

Icons can also be imported as raw SVG code (e.g. using Vite’s raw directive) and bundled into your source code.

import ArrowSvg from "@fronntui/icons/arrow?raw";

// ArrowSvg is a string containing the SVG markup
// <svg xmlns="http://www.w3.org/2000/svg" class="nn-raw-icon nn-raw-icon--arrow" viewBox="0 0 24 24"><polyline points="12 20 20 12 12 4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><line x1="20" y1="12" x2="4" y2="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>

Customization

The stroke width can be set via the CSS variable --nn-icon-stroke-width, which defaults to 2px.

The default size is 1.5em, which means it’s 1.5x the default font size. It can be customized via CSS by setting the font-size accordingly.

/* My theme */

:root {
  /* custom stroke width */
  --nn-icon-stroke-width: 1.25px;
}

.nn-icon {
  /* custom dimensions */
  font-size: 2em;
}