@luxury-presence/design-system-icons

@luxury-presence/design-system-icons

This package provides SVG icons as React and React Native components for the Luxury Presence Design System.

Icons are automatically generated from the SVG files located in the src/icons directory using SVGR and esbuild.

Installation

This package is part of the Luxury Presence monorepo. Ensure dependencies are installed from the root:

pnpm install

If used in a separate project, install it via pnpm (assuming access to the private registry):

pnpm add @luxury-presence/design-system-icons

For React Native Usage

This package has a peer dependency on react-native-svg. If you are using these icons in a React Native project, ensure react-native-svg is installed:

# For npm users
npm install react-native-svg

# For yarn users
yarn add react-native-svg

# For pnpm users
pnpm add react-native-svg

Follow the react-native-svg documentation for any additional setup or linking steps if required for your React Native version (though it's usually automatic with auto-linking).

Usage

Import the desired icon component directly from the package. The import paths are the same for both web and React Native projects, as the package uses conditional exports to provide the correct component version.

Icons have their variant (e.g., Outline, Solid) appended to their name.

import React from 'react';
import {
  AlertCircleOutline,
  CheckSolid,
} from '@luxury-presence/design-system-icons/alerts'; // Example category, adjust as needed

function MyComponent() {
  return (
    <div>
      {/* For Web: className can be used for styling (e.g., with Tailwind CSS) */}
      <AlertCircleOutline className="h-5 w-5 text-blue-500" />

      {/* For React Native: pass width, height, fill, stroke directly or use the style prop */}
      {/* The 'currentColor' replacement in SVGR config helps with dynamic coloring. */}
      <CheckSolid width={24} height={24} fill="green" />
    </div>
  );
}

Standard SVG props like width, height, fill, stroke, and for web, className, can be passed to the components. For React Native, styling is typically done via direct props or the style prop.

Available Icons

Icons are sourced from the src/icons directory, organized by category (e.g., general, alerts, finance) and variant (solid, line).

Refer to the source directory or the project's Storybook/documentation site for a complete list of available icons.

Contributing

Adding New Icons

• Place SVG: Add your new SVG file(s) to the appropriate subdirectory within packages/design-system-icons/src/icons/. Follow the existing naming convention (e.g., src/icons/general/solid/new-icon-name.svg). Ensure the SVG is optimized and cleaned.

• Build & Test: Run the full build script to generate components and types for both web and React Native, and then run tests:

  # From package directory
  pnpm build
  pnpm test
  
  # Or from monorepo root
  pnpm --filter @luxury-presence/design-system-icons build
  pnpm --filter @luxury-presence/design-system-icons test
  

  This will generate the React components and their type definitions in the dist/ (for web) and dist/native/ (for React Native) directories.

• Changeset: Create a changeset to document the addition:

  pnpm changeset
  

• Commit: Commit the new SVG file(s) in src/icons/ and the changeset file. Generally, do not commit the generated files in dist/ as they are build artifacts typically handled by CI/CD during the release process.

Build Process

The package employs a multi-stage build process orchestrated by pnpm build to generate components and type definitions for both web and React Native platforms:

• clean: Removes previous build artifacts from dist/.
• esbuild:icons & esbuild:native: These scripts use tsx scripts/esbuild.icons.ts (with and without the --native flag respectively). This script processes all SVGs from src/icons/, converting them into React components using SVGR (via esbuild-plugin-svgr).
  • Web components are output to dist/.
  • React Native components are output to dist/native/.
• tsc:build & tsc:build:native: These scripts compile TypeScript and generate type declarations (.d.ts files).
  • tsc -p tsconfig.build.json is used for web components, outputting types to dist/.
  • tsc -p tsconfig.build.native.json is used for React Native components, outputting types to dist/native/.
• generate & generate:native: These scripts use tsx scripts/generate-icons-index.ts (with and without the --native flag). They create and update barrel files (e.g., index.js, index.d.ts) within their respective dist/ and dist/native/ category subdirectories and at the root of dist/ and dist/native/. This facilitates easier importing of icons.