2.2.0 • Published 2 months ago

@amsterdam/design-system-react-icons

Licence

SEE LICENSE IN LICENSE.md

Version

2.2.0

Deps

Size

552 kB

Vulns

Weekly

Stars

Summary Dependency Versions

Amsterdam Design System: React icons

This package provides all icons from the Amsterdam Design System as React components. Use it to use the correct icons in your React project.

Installation

Install this package by itself if you want or need to use icons directly in your React project.

Note that our React components contain an Icon component that offers a convenient API for using the icons and streamlines alignment with text.

npm install @amsterdam/design-system-react-icons

Usage

Import the component for the icon you need, as well as the generic Icon component, and use them in your JSX.

import { Icon } from "@amsterdam/design-system-react"
import { SearchIcon } from "@amsterdam/design-system-react-icons"

export const App = () => <Icon svg={SearchIcon} />

Some icons (arrows, vehicles, speech balloons, and similar) carry a data-directional="true" attribute on their root <svg> element and are meant to be horizontally mirrored in a right-to-left (RTL) context. When you render an icon through the Icon component, this mirroring is handled automatically by @amsterdam/design-system-css's .ams-icon styles.

If you render an icon component directly, without wrapping it in Icon, you are responsible for the mirroring yourself. Add a rule along these lines, scoped to wherever you render the icon:

.your-icon-wrapper:dir(rtl) svg[data-directional="true"] {
  transform: scaleX(-1);
}

Apply :dir(rtl) to the wrapper, not the <svg> itself. Directionality determination is defined per document language, and SVG has its own rules distinct from HTML's — applying :dir() directly to an <svg> element relies on unspecified cross-namespace inheritance behaviour that browsers handle inconsistently.

See the icon contribution guide for which icons carry the attribute and why.