@purpurds/icon

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

import * as IconStories from "./src/icon.stories"; import packageInfo from "./package.json";

Icon

Version {packageInfo.version}

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

In MyApp.tsx

import "@purpurds/purpur/styles";

Examples

In MyComponent.tsx

Specific icon component

import { IconAiRobot } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <div>
      <IconAiRobot size="xs" />
    </div>
  );
};

General icon component with prop

import { Icon, aiRobot } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <div>
      <Icon svg={aiRobot} size="xs" />
    </div>
  );
};

Usage with dynamic import

If you don't know beforehand what icon to use, e.g. if it comes from a CMS, you can use a dynamic import. Be aware that this will result in a larger bundle size since all icons have to be included in the bundle.

import React, { useEffect, useState } from "react";
import type { IconBaseProps, IconName } from "@purpurds/icon";
import { DEFAULT_SIZE } from "@purpurds/icon";
import { pascalCase } from "change-case";

export type IconDynamicProps = {
  name: IconName;
} & IconBaseProps;

export const IconDynamic = ({
  ["data-testid"]: dataTestId,
  name,
  className,
  allyTitle,
  size = DEFAULT_SIZE,
  ...props
}: IconDynamicProps) => {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [Component, setComponent] = useState<React.ComponentType<any> | null>(null);

  useEffect(() => {
    const importComponent = async () => {
      try {
        const module = await import(`@purpurds/icon/dist/components/${name}.es.js`);
        setComponent(() => module[`Icon${pascalCase(name)}`]);
      } catch (error) {
        // eslint-disable-next-line no-console
        console.error(`Error importing component "${name}":`, error);
      }
    };

    importComponent();
  }, [name]);

  return Component ? (
    <Component
      allyTitle={allyTitle}
      className={className}
      size={size}
      data-testid={dataTestId}
      {...props}
    />
  ) : null;
};

IconDynamic.displayName = "IconDynamic";