@atom-learning/icons
v1.20.0
Published
This package exports the [Ikonate](https://ikonate.com/) icon set as React components alongside custom icons specific to Atom Learning.
Downloads
132
Readme
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 be0 0 24 24
and noheight
orwidth
should be set - Visually the contents of the icon should work when
stroke-width: 2
andfill: none
are applied
You can remove all attributes that we default to in our @atom-learning/components
Icon
component to save on file size:
fill
(defaultfill="none"
)stroke
(defaultstroke="currentcolor"
)stroke-linecap
(defaultstroke-linecap="round"
)stroke-linejoin
(defaultstroke-linejoin="round"
)stroke-width
(defaultstroke-width="2"
)
However, you may include these if necessary if you need to override these default styles used above, e.g. fill="currentColor"
and stroke-width="0"
for a filled path