Web Component Solid

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:

import 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:

import 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:

import 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.