Icons

Install

pnpm add @via-ds/icons

Examples

Importing Icons

Each icon is available as a standalone module for optimal tree-shaking:

import Cloud from '@via-ds/icons/Cloud';
import Settings from '@via-ds/icons/Settings';
import Bell from '@via-ds/icons/Bell';

function MyComponent() {
  return (
    <div>
      <Cloud />
      <Settings />
      <Bell />
    </div>
  );
}

Icons are also available as named exports from the package index. Note that tree-shaking from the barrel export depends on your bundler configuration and may not eliminate all unused icons:

import { Cloud, Settings, Bell } from '@via-ds/icons';

Using the Dynamic Icon Component

Use the Icon component with the glyph prop for dynamic icon selection:

import { Icon } from '@via-ds/icons';

function MyComponent() {
  return <Icon glyph="Checkmark" />;
}

Sizes

Icons support preset sizes (small, medium, large) or custom pixel values:

import Cloud from '@via-ds/icons/Cloud';

function Sizes() {
  return (
    <>
      <Cloud size="small" /> {/* 14px */}
      <Cloud size="medium" /> {/* 16px */}
      <Cloud size="large" /> {/* 20px */}
      <Cloud size={48} /> {/* custom 48px */}
    </>
  );
}

Custom Fill Color

Override the default currentColor with a custom fill:

import Warning from '@via-ds/icons/Warning';

function ColoredIcon() {
  return <Warning fill="#FF0000" />;
}

Accessibility

Add an accessible title for screen readers:

import InfoWithCircle from '@via-ds/icons/InfoWithCircle';

function AccessibleIcon() {
  return <InfoWithCircle title="More information" />;
}

Use role="presentation" for decorative icons:

import Sparkle from '@via-ds/icons/Sparkle';

function DecorativeIcon() {
  return <Sparkle role="presentation" />;
}