Suomifi-icons NPM

suomifi-icons

Suomi.fi icons as accessible React components.

The library consists of five icon categories:

Base icons
Illustrative icons
Doctype icons
Component icons
Logo icons

Usage

The icons can be used simply by importing the desired icon components and using them in your code like any other React component.

import { IconArchive } from 'suomifi-icons';

<IconArchive color="green" mousePointer />;

Different icon categories have slightly varying APIs based on their intended use and styling possibilities:

Base icons API

Base icons are the most commonly used icon set. Their color and size can be customized via props. By default the color value is set to currentColor, so the icons inherit the current font color.

Property	Property type	Description
className	`string`	Custom classname to extend or customize
ariaLabel	`string`	Aria-label for SVG, undefined hides SVG from screen reader
mousePointer	`boolean`	Show mouse cursor as hand-pointer
color	`string`	Custom fill color
fill	`string`	Custom fill color, takes precedence over color if both are provided

Illustrative icons API

Illustrative icons are 2-color icons that can be customized to fit the required color scheme.

Property	Property type	Description
className	`string`	Custom classname to extend or customize
ariaLabel	`string`	Aria-label for SVG, undefined hides SVG from screen reader
mousePointer	`boolean`	Show mouse cursor as hand-pointer
baseColor	`string`	Custom base color
highlightColor	`string`	Custom highlight color

Logo icons API

Logo icons contains variations of the Suomi.fi logo.They offer only limited customisation options.

Property	Property type	Description
className	`string`	Custom classname to extend or customize
ariaLabel	`string`	Aria-label for SVG, undefined hides SVG from screen reader
mousePointer	`boolean`	Show mouse cursor as hand-pointer

Doctype icons API

Doctype icons portray different document types.

Property	Property type	Description
className	`string`	Custom classname to extend or customize
ariaLabel	`string`	Aria-label for SVG, undefined hides SVG from screen reader
mousePointer	`boolean`	Show mouse cursor as hand-pointer

Versioning

This repository uses semantic versioning (https://semver.org/).

Major: Changes to the APIs or changes that result in visible changes in the existing icons.
Minor: Addition of new icons, or other non-breaking changes.
Patch: Any other changes that don't affect how the components are or can be used.