@pmcx/assets

Centralized asset management for the pmcx workspace, including SVG icons in multiple styles and variants.

Purpose

This package provides a unified collection of icons and assets used across the pmcx workspace. By centralizing assets, we ensure consistency in visual design and simplify icon management across all applications and packages.

Contents

Icons (src/icons/)

Icons are organized by style:

• 3d/ – 3D-style icons (e.g., Barcode3D, Coupon3D, Reward3D)
• colored/ – Colored icons for various use cases (e.g., Allergy, BeautyCare, FamilyProfile)
• filled/ – Filled/solid style icons (e.g., ActivityFilled, DoctorFilled, ProfileFilled)
• outlined/ – Outlined/stroke style icons (e.g., AchievementOutlined, BackOutlined, EditOutlined)

Each icon is exported as a React component using the ReactComponent export from SVG files.

Usage

Import all icons from a style

import * as Icons3d from '@pmcx/assets/icons/3d'
import * as IconsColored from '@pmcx/assets/icons/colored'
import * as IconsFilled from '@pmcx/assets/icons/filled'
import * as IconsOutlined from '@pmcx/assets/icons/outlined'

Import specific icons

import {ActivityFilled, DoctorFilled} from '@pmcx/assets/icons/filled'
import {BackOutlined, EditOutlined} from '@pmcx/assets/icons/outlined'
import {BeautyCareColored} from '@pmcx/assets/icons/colored'
import {Reward3D} from '@pmcx/assets/icons/3d'

Using icons in components

export function MyComponent() {
  return (
    <div>
      <ActivityFilled className="w-6 h-6" />
      <EditOutlined className="w-4 h-4" />
    </div>
  )
}

Adding New Icons

1. Add the SVG file to the appropriate style directory
2. Update the corresponding index.tsx file to export the new icon
3. Build the package: pnpm build --filter @pmcx/assets

Development

Watch mode for development:

pnpm run dev --filter @pmcx/assets

Build the package:

pnpm run build --filter @pmcx/assets