IllustratedIcon

This component renders an icon from the illustrated icons collection of RefactoringUI book.

Usage

import { IllustratedIcon } from '@binarycapsule/ui-capsules';

Demo

View source on GitHub

Knobs 🎛

When passing an onClick handler, the icon is rendered as a button.
archive
<IllustratedIcon
  icon="archive"
  primaryColor="neutral300"
  primaryColorHover="neutral400"
  secondaryColor="neutral600"
  secondaryColorHover="neutral700"
/>

Props

Props

NameDescription
icon
Required
string
Name of the icon to render.
size
string(Default: 24px)
The size of the icon.
onClick
function(Default: undefined)
The onClick handler. If defined, the icon will act like a button.
primaryColor
color token(Default: $neutral200)
The primary color of the icon (on hover).
secondaryColor
color token(Default: $neutral600)
The secondary color of the icon.
primaryColorHover
color token(Default: $neutral300)
The primary color of the icon.
secondaryColorHover
color token(Default: $neutral700)
The secondary color of the icon (on hover).

Icons

archive
c_arrow_down
c_arrow_left
c_arrow_right
c_arrow_up
chart
chev_down
chev_right
circle_add
circle_close
circle_remove
close
code
copy
ct_arrow_down
ct_arrow_left
ct_arrow_right
ct_arrow_up
dots_h
edit
launch
light
logout
notification
pie
play
plus
presentation
schedule
search
settings
stop
survey
time
trash
unarchive
user
user_circle
wifi_off
wifi_on