<Icon> Component

Displays an emoticon or other icon to attract user's attention with built-in variants: sizes, themes, and mild.

Here the demo:

Preview

Installing <Icon> Component

There are 2 ways to install <Icon> component into your react app project:

  • Install the Specific Package of <Icon> Component
  • Install the Whole Reusable-UI Component Pack, including the <Icon> Component

Because <Icon> needs to be configured first, you'll need to do: Configuring <Icon>'s Resources below:

Configuring <Icon>'s Resources

After you install the <Icon>, you need to manually copy some resources into your application public directory.

Go to /node_modules/@reusable-ui/icon/public directory. Inside it, copy the fonts and icons directories into application public directory (in React: /public). So, the final files are something like this:

  • /public/fonts/*.(ttf|woff|woff2)
  • /public/icons/*.svg

Done! The required resources by the <Icon> component are now set! 😉

icon Property

Select an icon set (a string value) corresponding to the icon image.

There are 2 types of icon sets: Built-in icon set and Custom icon set.

Built-in Icon Sets

There a pretty much of common icon sets that ready to use for general projects.

Show icon gallery

Adding Custom Icon Sets

To add custom icons, for example a logo icon, follow these steps:

  • Prepare the Image
  • Store the Image
  • Registering the Custom Icons
  • Using the Registered Custom Icons

Variant Properties

The alternative appearances of the <Icon> layout without changing the <Icon>'s functionality.

size Property

Defines the alternative size of the <Icon>.

The possible values are:

  • undefined
  • 'xs'
  • 'sm'
  • 'md'
  • 'lg'
  • 'xl'
  • '1em'

Here the preview:

Preview

Show code

theme Property

Defines the contextual theme of the <Icon>.

The possible values are:

  • undefined
  • 'primary'
  • 'secondary'
  • 'success'
  • 'info'
  • 'warning'
  • 'danger'
  • 'light'
  • 'dark'

Here the preview:

Preview

Show code

mild Property

Activates a mild mode (mild color) of the <Icon>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

Variables

There are several variables of <Icon> you can customize. Changing the variables affects all <Icon> instance and other components that depend on <Icon>.

Here the exposed variables:

  • Sizes
  • Animations

The example of accessing, modifying, & adding variables:

Show code