@purpurds/icon-dynamic v3.7.1

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as IconDynamicStories from "./src/icon-dynamic.stories"; import packageInfo from "./package.json";

IconDynamic

Version {packageInfo.version}

Use this component when the icon is dynamic, i.e. it's unknown beforehand which icon should be used.

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/icon-dynamic": "x.y.z"

Since the component is dependent on styling from the Icon component, add that dependency as well: "@purpurds/icon": "x.y.z"

In MyApp.tsx

import "@purpurds/icon/styles";

In MyComponent.tsx

import { IconDynamic } from "@purpurds/icon-dynamic";
import type { IconName } from "@purpurds/icon";

type Props = {
  icon: IconName;
};

export const MyComponent = ({ icon }: Props) => {
  return (
    <div>
      <IconDynamic name={icon} size="xs" />
    </div>
  );
};