Skip to main content

Icon Class Function

Available from version 0.3.0

The iconClass function allows you to integrate third-party icon libraries with the Tailwind-Joy component.

info

This function replaces the role of the Icon Adapter component.

Introduction​

For Joy UI, you are instructed to define global styles to integrate third-party icon libraries with Joy UI components.

Some of these libraries are instructed to define styles for <svg>, but this can have the side effect of applying a single style to <svg>s that are not components of the icon library.

So, I created this function to enable “Automatic adjustment” feature while avoiding the side effects that can occur with global style definitions.

Basics​

import { iconClass } from 'tailwind-joy/utils';

The iconClass function defines default styles for third-party icon components by class name.

The demo below shows the difference with or without the iconClass function.

import { Box, Button } from 'tailwind-joy/components';
import { iconClass } from 'tailwind-joy/utils';
import { MdAdd } from 'react-icons/md';

export function IconClassBasics() {
  return (
    <div>
      <Box className="flex flex-wrap items-center justify-center gap-2">
        <Button
          color="primary"
          size="sm"
          startDecorator={<MdAdd className={iconClass()} />}
        >
          With
        </Button>
        <Button
          color="success"
          size="md"
          startDecorator={<MdAdd className={iconClass()} />}
        >
          With
        </Button>
        <Button
          color="neutral"
          size="lg"
          startDecorator={<MdAdd className={iconClass()} />}
        >
          With
        </Button>
      </Box>
      <Box className="flex flex-wrap items-center justify-center gap-2">
        <Button
          color="primary"
          size="sm"
          startDecorator={
            <MdAdd className="m-[var(--Icon-margin)] inline-block h-[1em] w-[1em] shrink-0 select-none [color:var(--Icon-color,var(--joy-neutral-500))] [font-size:var(--Icon-fontSize,1.5rem)] dark:[color:var(--Icon-color,var(--joy-neutral-400))]" />
          }
        >
          Without
        </Button>
        <Button
          color="success"
          size="md"
          startDecorator={
            <MdAdd className="m-[var(--Icon-margin)] inline-block h-[1em] w-[1em] shrink-0 select-none [color:var(--Icon-color,var(--joy-neutral-500))] [font-size:var(--Icon-fontSize,1.5rem)] dark:[color:var(--Icon-color,var(--joy-neutral-400))]" />
          }
        >
          Without
        </Button>
        <Button
          color="neutral"
          size="lg"
          startDecorator={
            <MdAdd className="m-[var(--Icon-margin)] inline-block h-[1em] w-[1em] shrink-0 select-none [color:var(--Icon-color,var(--joy-neutral-500))] [font-size:var(--Icon-fontSize,1.5rem)] dark:[color:var(--Icon-color,var(--joy-neutral-400))]" />
          }
        >
          Without
        </Button>
      </Box>
    </div>
  );
}

Icon libraries​

React Icons​

npm install react-icons

See the Basics section above for a component demo display.

Heroicons​

npm install @heroicons/react
import { Box, Button } from 'tailwind-joy/components';
import { iconClass } from 'tailwind-joy/utils';
import { HeartIcon } from '@heroicons/react/24/outline';

export function IconClassHeroicons() {
  return (
    <div>
      <Box className="flex flex-wrap items-center justify-center gap-2">
        <Button
          color="danger"
          size="sm"
          startDecorator={<HeartIcon className={iconClass()} />}
        >
          With
        </Button>
        <Button
          color="warning"
          size="md"
          startDecorator={<HeartIcon className={iconClass()} />}
        >
          With
        </Button>
        <Button
          color="success"
          size="lg"
          startDecorator={<HeartIcon className={iconClass()} />}
        >
          With
        </Button>
      </Box>
      <Box className="flex flex-wrap items-center justify-center gap-2">
        <Button
          color="danger"
          size="sm"
          startDecorator={
            <HeartIcon className="m-[var(--Icon-margin)] inline-block h-[1em] w-[1em] shrink-0 select-none [color:var(--Icon-color,var(--joy-neutral-500))] [font-size:var(--Icon-fontSize,1.5rem)] dark:[color:var(--Icon-color,var(--joy-neutral-400))]" />
          }
        >
          Without
        </Button>
        <Button
          color="warning"
          size="md"
          startDecorator={
            <HeartIcon className="m-[var(--Icon-margin)] inline-block h-[1em] w-[1em] shrink-0 select-none [color:var(--Icon-color,var(--joy-neutral-500))] [font-size:var(--Icon-fontSize,1.5rem)] dark:[color:var(--Icon-color,var(--joy-neutral-400))]" />
          }
        >
          Without
        </Button>
        <Button
          color="success"
          size="lg"
          startDecorator={
            <HeartIcon className="m-[var(--Icon-margin)] inline-block h-[1em] w-[1em] shrink-0 select-none [color:var(--Icon-color,var(--joy-neutral-500))] [font-size:var(--Icon-fontSize,1.5rem)] dark:[color:var(--Icon-color,var(--joy-neutral-400))]" />
          }
        >
          Without
        </Button>
      </Box>
    </div>
  );
}

Props​

color​

The color of the icon.

  • Type: 'primary' | 'neutral' | 'danger' | 'success' | 'warning'
  • Default: 'neutral'

size​

The size of the icon.

  • Type: 'sm' | 'md' | 'lg'
  • Default: 'md'

Migrating from the Icon Adapter​

Pass the color and size props specified in the Icon Adapter component as is to the iconClass function.

 <Button
   color="primary"
   size="sm"
   startDecorator={
-    <IconAdapter>
-      <MdAdd />
-    </IconAdapter>
+    <MdAdd className={iconClass()} />
   }
 >
   Button
 </Button>
 <CircularProgress color="warning">
-  <IconAdapter color="warning">
-    <MdWarning />
-  </IconAdapter>
+  <MdWarning className={iconClass({ color: 'warning' })} />
 </CircularProgress>