@atom-learning/icons

Icons

This package exports the Ikonate icon set as React components alongside custom icons specific to Atom Learning.

Installation & usage

yarn add @atom-learning/icons

import { Danger } from '@atom-learning/icons`

const Component = () => (
  <Danger />
)

To use alongside the @atom-learning/components package, you can combine any imported icon with the Icon primitive to provide a set of default sizes and props for styling.

import { Icon } from '@atom-learning/components`
import { Danger } from '@atom-learning/icons`

const Component = () => (
  <Icon is={Danger} css={{ color: 'red' }} size="lg" />
)

Contributing

Custom SVG icons can be added to ./src and will automatically be bundled, when adding to the custom icon set you must follow the following guidelines:

• The viewBox must be 0 0 24 24
• No height or width should be set
• Visually the contents of the icon should work when stroke-width: 2 and fill: none are applied

Changelog

1.3.0 (2021-09-30)

Features

• add new list icon (65cec0b)
• allow custom icons to override ikonate (b5a45f9)
• update to check-list, add simple list icon (5292da2)