@payfit/unity-icons

A comprehensive icon library for the Unity design system, provided as React Components.

Installation

Install the package in your project. We recommend you use this package alongside @payfit/unity-components.

``bash
yarn add @payfit/unity-icons @payfit/unity-components
`

Ensure that react and react-dom are also installed in your project:

`bash
yarn add react react-dom
`

Usage

This package provides two ways to import and use icons.

$3

Wrap your application with the IconProvider to make all icons available in your application.

`tsx
import { UnityIconsProvider } from '@payfit/unity-icons'

function App() {
return (



)
}
`

$3

Render any icon using the IconSprite component, passing the icon's name as the src prop.

`tsx
import { IconSprite } from '@payfit/unity-icons'

function MyComponent() {
return
}
`

$3

You can also use the Icon component from @payfit/unity-components to render icons (recommended). The Icon component provides additional customization options that follow design system guidelines, and uses the IconSprite component internally.

`tsx
import { Icon } from '@payfit/unity-components'

function MyComponent() {
return
}
`

API

The icons library uses SVG sprites to render icons. All icons are referenced by their name, which is the filename in the /svg folder without the extension.
The IconSprite component accepts all the props of an SVG element.

`tsx
import { IconSprite } from '@payfit/unity-icons'

function MyComponent() {
return
}
`

We recommend you customize the icon's color, sizes, and other properties via the Icon component from @payfit/unity-components.

Customization

All icons use currentColor for their fill or stroke, allowing you to easily customize the color using CSS or the color prop.

TypeScript Support

This package includes TypeScript definitions, and a list of all the available icon names is exported as a type.

`tsx
import { iconNames, UnityIcon } from '@payfit/unity-icons'

const myIcons: UnityIcon[] = ['AirplaneFilled', 'CakeOutlined']

console.log(iconNames) // ['AirplaneFilled', 'AirplaneOutlined', ...+309 icons more]
``

Browser Support

This package supports all modern evergreen browsers. It does not support IE.