Iconify Icon web component with SolidJS

This tutorial is part of Iconify Icon web component tutorial.

Currently, SolidJS has poor support for web components. It is caused by issues in the web components spec. When setting a property to a web component, it sometimes does not work as expected.

Workaround

Workaround for Solid usage is to force Solid to use attributes instead of properties:

html<iconify-icon attr:icon="mdi-light:home"></iconify-icon>

Iconify Icon for Solid

Iconify Icon for Solid solves that by mapping properties to attributes in a native Solid component, so you can use the web component without any issues.

It also provides typings for the component, making it easier to use in JSX and supports objects for icon property.

Installation

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

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

yarn add --dev @iconify-icon/solid

Usage

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

jsximport { Icon } from '@iconify-icon/solid';

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

Usage with objects

You can pass objects in icon property:

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

export default () => {
   return (
       <div class="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/solid package:

jsximport { Icon, addIcon } from '@iconify-icon/solid';

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 default () => {
   return (
       <div class="alert">
           <Icon icon="alert" />
           Important notice with alert icon!
       </div>
   );
};

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