@obosbbl/grunnmuren-icons

Grunnmuren's icon set as React components and SVG files.

See our storybook for a showcase of all the icons in this set.

Install

npm install @obosbbl/grunnmuren-icons

Usage

// React
import { House } from '@obosbbl/grunnmuren-icons';

// SVG
import House from '@obosbbl/grunnmuren-icons/svg/House.svg';

Accessibility (React)

The SVG is rendered using role="img" because most screen readers have limited support for SVGs default implicit ARIA role.

Since icons are mostly used for decorative purposes, the icons are automatically hidden from screen readers with aria-hidden, unless an aria-label is provided.

Updating the icons

To update the icons, run the update and build scripts. The icons should never be edited manually, as the source of truth is in Figma.

The first operation downloads all the icons as SVG files and performs some optimization on them. These icons are checked into the svg folder.

The second command converts the SVG icons into React components and bundles them.

pnpm run update
pnpm run build

Figma access token

If you are running the import script for the first time, it will prompt your for a Figma access token. The token is is required to access Figma's API. It can be generated on your Figma account settings page.

The import script may store the token to a local file, so you won't have to supply the token again on subsequent runs.

If the scripts authentication issues, you could try to create a new access token and delete the local file .FIGMA_TOKEN before running the script again.