IconRenderer

A convenienve component for rendering icons.

import React from 'react';
import { IconRenderer } from '@minddrop/ui';

export const IconRendererDemo = () => (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <IconRenderer icon="settings" color="white" />
  </div>
);

export default IconRendererDemo;

IconRenderer is intended for internal use as a convenient way of rendering the icons of components which accept both an IconName and an Icon element through a single prop.

• Renders an icon from the MindDrop icon set if icon is a valid IconName.

• Renders the given element if icon is an element.

• Renders nothing if icon is falsy or a string which is not a valid IconName.

Exports a IconProp type which can be set as the component's icon prop type.

Import the component from the @minddrop/ui package.

import React from 'react';
import { IconRenderer, IconProp } from '@minddrop/ui';

interface MyComponentProps {
  icon: IconProp;
}

export const MyComponent: React.FC<MyComponentProps> = ({ icon }) => {
  return (
    <div>
      <IconRenderer icon={icon} />
    </div>
  );
};

IconRendererProps extends IconProps.