Iconify Icon web component with React

This tutorial is part of Iconify Icon web component tutorial.

Iconify icon web component works well with React, but there are few problems:

• When using web components in React, you need to use class instead of className to pass class name.
• Property icon can only be a string.
• No JSX hints.

Iconify Icon for React

These problems are solved by Iconify Icon for React.

It is a wrapper for web component that provides support for className, allows to use objects with icon and provides typings for React component.

Installation

Instead of iconify-icon package, install @iconify-icon/react package:

npm install --save-dev @iconify-icon/react

yarn add --dev @iconify-icon/react

Usage

Import Icon component from @iconify-icon/react, set icon in icon property:

jsximport React from 'react';
import { Icon } from '@iconify-icon/react';

export function Alert() {
   return (
       <div className="alert">
           <Icon icon="mdi-light:alert" />
           Important notice with alert icon!
       </div>
   );
}

Usage with objects

You can pass objects in icon property:

jsximport React from 'react';
import { Icon } from '@iconify-icon/react';
import alertIcon from '@iconify-icons/mdi-light/alert';

export function Alert() {
   return (
       <div className="alert">
           <Icon icon={alertIcon} />
           Important notice with alert icon!
       </div>
   );
}

Functions

All other functions, listed in Iconify Icon web component tutorial, are available. You can import them directly from @iconify-icon/react package:

jsximport React from 'react';
import { Icon, addIcon } from '@iconify-icon/react';

addIcon('alert', {
   body: '<path fill="currentColor" d="M1 21L11.5 2.813L22 21H1Zm19.268-1L11.5 4.813L2.732 20h17.536ZM11 14v-4h1v4h-1Zm0 2h1v2h-1v-2Z"/>',
   width: 24,
   height: 24,
});

export function Alert() {
   return (
       <div className="alert">
           <Icon icon="alert" />
           Important notice with alert icon!
       </div>
   );
}

See Iconify Icon web component for list of all attributes, functions and usage examples. @iconify-icon/react is only a wrapper for iconify-icon, not a different component, it supports all the same properties and functions.