@purpurds/icon-dynamic
v3.7.1
Published
import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
Downloads
135
Keywords
Readme
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>
);
};