nucleo-arcade

A collection of 30px React SVG arcade icons from Nucleo.

Installation

npm install nucleo-arcade

Usage

import { IconFloppyDisk } from 'nucleo-arcade';

function MyComponent() {
  return <IconFloppyDisk />;
}

Browse the full list of available icons on the Nucleo Web App.

Customization

Icon Size

You can set a custom size using the size prop:

import { IconFloppyDisk } from 'nucleo-arcade';

function MyComponent() {
  return <IconFloppyDisk size={24} />;
}

Icon Colors

Icon colors are controlled using CSS custom properties:

| CSS Custom Property | Default Value | | --------------------- | ------------- | | --nc-arcade-color-1 | #212121 | | --nc-arcade-color-2 | #21212140 | | --nc-arcade-color-3 | #21212100 |

You can modify them inline using the style attribute:

<IconFloppyDisk style={
  {
    '--nc-arcade-color-1': '#212121',
  } as React.CSSProperties
} />

Or you can use utility classes. For example, if using Tailwind CSS:

<IconFloppyDisk className="[--nc-arcade-color-1:#212121]" />

Icon Stroke Width

Default stroke width for arcade icons is 4px. You can customize it using the strokeWidth prop:

<IconFloppyDisk strokeWidth={3} />

Icon Corners

Arcade icons have squared corners by default. You can round them by using the corners prop:

<IconFloppyDisk corners="round" />

Accessibility

To improve accessibility, you can either add a title attribute to the icon or use the aria-label attribute.

<IconFloppyDisk title="Icon Name" />

or

<IconFloppyDisk aria-label="Icon Name" />

If you want to hide the icon from screen readers, you can use the aria-hidden attribute.

<IconFloppyDisk aria-hidden="true" />

License

nucleoapp.com/license