### Install Project Dependencies

Source: https://github.com/resolvetosavelives/healthicons/blob/main/README.md

Install all necessary Node.js dependencies for the project using Yarn. This command should be run after cloning the repository.

```bash
yarn install
```

--------------------------------

### Prepare Environment Variables for Figma Update

Source: https://github.com/resolvetosavelives/healthicons/blob/main/README.md

Copy the example environment file and add your Figma personal access token. This token is required for the `yarn update-icons` script.

```bash
cp .env.example .env.local
```

```bash
FIGMA_PERSONAL_ACCESS_TOKEN="{token-goes-here}"
```

--------------------------------

### Run Health Icons Website Locally

Source: https://github.com/resolvetosavelives/healthicons/blob/main/README.md

Start the Next.js development server to view the healthicons website locally. This allows for testing changes before committing.

```bash
yarn dev
```

--------------------------------

### Install Health Icons via NPM or Yarn

Source: https://github.com/resolvetosavelives/healthicons/blob/main/README.md

Use this command to add the healthicons package to your project. It is available on NPM and Yarn.

```bash
npm i healthicons
```

```bash
yarn add healthicons
```

--------------------------------

### Clone Health Icons Repository

Source: https://github.com/resolvetosavelives/healthicons/blob/main/README.md

Clone the forked repository to your local machine to begin development. Ensure you have the GitHub CLI installed.

```bash
gh repo clone {your-username}}/healthicons
```

--------------------------------

### Development Commands

Source: https://context7.com/resolvetosavelives/healthicons/llms.txt

A collection of essential bash commands for managing the Health Icons project. Includes commands for installing dependencies, running the development server, building for production, exporting the static site, updating icons from Figma, and running tests and linters.

```bash
# Install dependencies
yarn install

# Run development server (http://localhost:3000)
yarn dev

# Build for production
yarn build

# Export static site
yarn export

# Update icons from Figma (requires .env.local configuration)
yarn update-icons

# Individual update scripts
yarn import-meta-data           # Sync metadata from Figma
yarn generate-icon-og-images    # Generate Open Graph images
yarn generate-site-map          # Update sitemap.txt
yarn remove-svg-backgrounds     # Clean SVG files

# Run tests
yarn test        # Watch mode
yarn test:ci     # CI mode with junit reporter

# Linting
yarn lint        # ESLint
yarn lint:style  # Stylelint for CSS
```

--------------------------------

### Icon Categories Reference

Source: https://context7.com/resolvetosavelives/healthicons/llms.txt

Lists all available icon categories with brief descriptions and an example of how to retrieve icons for a specific category using TypeScript. This is useful for understanding the scope of available icons and for programmatic access.

```typescript
// Available categories (21 total):
const categories = [
  'blood',          // Blood types, blood bags, donation
  'body',           // Organs, anatomy, body parts
  'conditions',     // Medical conditions, symptoms
  'contraceptives', // Family planning, contraception methods
  'devices',        // Medical devices, equipment
  'diagnostics',    // Testing, diagnostic tools
  'emotions',       // Facial expressions, moods
  'exercise',       // Physical activity, rehabilitation
  'graphs',         // Charts, data visualization
  'medications',    // Pills, medicines, drugs
  'nutrition',      // Food, diet, supplements
  'objects',        // General healthcare objects
  'people',         // Healthcare workers, patients
  'places',         // Hospitals, clinics, facilities
  'ppe',            // Personal protective equipment
  'shapes',         // Basic shapes, UI elements
  'specialties',    // Medical specializations
  'symbols',        // Healthcare symbols, signs
  'typography',     // Numbers, letters
  'vehicles',       // Ambulances, helicopters
  'zoonoses'        // Animals, disease vectors
];

// Example: List all icons in a category
const bodyIcons = categories.find(c => c.title === 'body').icons;
// Returns: [{id: "heart-organ", ...}, {id: "lungs", ...}, ...]
```

--------------------------------

### Get Categories and Icons Server-Side Function

Source: https://context7.com/resolvetosavelives/healthicons/llms.txt

A server-side function that reads icon categories and metadata from the file system. It's used in Next.js pages to fetch and provide icon data for rendering.

```typescript
// src/lib/icons.tsx
import { promises as fs } from 'fs';
import path from 'path';
import metaData from '../../public/icons/meta-data.json';

export async function getCategoriesAndIcons(): Promise<Category[]> {
  // Reads icon directory structure and enriches with metadata
  // Returns alphabetically sorted categories with sorted icons
}
```

```typescript
// Usage in Next.js page (src/pages/index.tsx)
import { GetStaticProps } from 'next';
import { getCategoriesAndIcons, Category } from '../lib/icons';

interface HomeProps {
  categories: Category[];
}

export default function Home({ categories }: HomeProps) {
  return <LandingPage categories={categories} />;
}

export const getStaticProps: GetStaticProps<HomeProps> = async () => {
  const categories = await getCategoriesAndIcons();
  return {
    props: { categories }
  };
};

// Example output structure:
// [
//   { title: "blood", icons: [{ id: "blood-a_n", ... }, ...] },
//   { title: "body", icons: [{ id: "antibody", ... }, ...] },
//   { title: "devices", icons: [{ id: "stethoscope", ... }, ...] },
//   ...
// ]
```

--------------------------------

### Redux Search State Management

Source: https://context7.com/resolvetosavelives/healthicons/llms.txt

Manages search keywords, icon style, category, and format filters using Redux Toolkit. Includes reducers for updating state and example usage with React hooks.

```typescript
// src/store/search.tsx
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { IconFormat } from '../lib/icons';

export type SearchStyle = 'outline' | 'filled' | 'all';

export interface SearchState {
  keywords: string;      // Search text
  style: SearchStyle;    // Icon style filter
  category: string;      // Category filter (empty = all)
  format: IconFormat;    // Size filter ('48px' or '24px')
}

const initialState: SearchState = {
  keywords: '',
  style: 'all',
  category: '',
  format: '48px'
};

export const searchSlice = createSlice({
  name: 'search',
  initialState,
  reducers: {
    setKeywords: (state, action: PayloadAction<string>) => {
      state.keywords = action.payload;
    },
    setStyle: (state, action: PayloadAction<SearchStyle>) => {
      state.style = action.payload;
    },
    setCategory: (state, action: PayloadAction<string>) => {
      state.category = action.payload;
    },
    setFormat: (state, action: PayloadAction<IconFormat>) => {
      state.format = action.payload;
    }
  }
});

export const { setKeywords, setStyle, setCategory, setFormat } = searchSlice.actions;

// Usage in component:
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../store';
import { setKeywords, setStyle } from '../store/search';

function SearchComponent() {
  const dispatch = useDispatch();
  const keywords = useSelector((state: RootState) => state.search.keywords);

  return (
    <input
      value={keywords}
      onChange={(e) => dispatch(setKeywords(e.target.value))}
      placeholder="Search icons..."
    />
  );
}

```

--------------------------------

### Set up Upstream Remote for Health Icons

Source: https://github.com/resolvetosavelives/healthicons/blob/main/README.md

Add a remote reference to the main healthicons repository. This is necessary for fetching updates and contributing back.

```bash
git remote add upstream git@github.com:resolvetosavelives/healthicons.git
```

--------------------------------

### Clean and Update Icons

Source: https://github.com/resolvetosavelives/healthicons/blob/main/README.md

This command sequence cleans the existing icon directories and then updates them with the latest icons from Figma. Ensure you have set up your .env.local file correctly.

```bash
rm -rf public/icons/png/* public/icons/svg/*
```

```bash
yarn update-icons
```

--------------------------------

### Bulk Icon Download Link

Source: https://context7.com/resolvetosavelives/healthicons/llms.txt

Provides an HTML anchor tag for downloading all icons as a ZIP file. This is useful for users who need offline access to the entire icon collection.

```html
<!-- Available at /icons.zip on the website -->
<a href="/icons.zip" download>Download All Icons (ZIP)</a>

<!-- Direct link -->
<!-- https://healthicons.org/icons.zip -->
```

--------------------------------

### Create a New Branch for Development

Source: https://github.com/resolvetosavelives/healthicons/blob/main/README.md

Create a new branch based on the main branch of the healthicons repository. Name your branch descriptively, e.g., 'my-branch-name'.

```bash
git checkout -b my-branch-name upstream/main
```

--------------------------------

### Push Changes to Your Fork

Source: https://github.com/resolvetosavelives/healthicons/blob/main/README.md

Upload your local branch with new commits to your forked repository on GitHub. This makes your changes available for a pull request.

```bash
git push origin my-branch-name
```

--------------------------------

### Update Icons from Figma

Source: https://github.com/resolvetosavelives/healthicons/blob/main/README.md

This command updates icon information, open-graph images, and the sitemap.xml. It requires a Figma personal access token to be set in the .env.local file.

```bash
yarn update-icons
```

--------------------------------

### Health Icons File Structure Overview

Source: https://context7.com/resolvetosavelives/healthicons/llms.txt

Icons are organized by style (filled, outline), format (svg, png), and size (48px, 24px) within the public directory. Access icons directly using the specified path patterns.

```treeview
public/icons/
├── svg/
│   ├── filled/
│   │   ├── blood/
│   │   ├── body/
│   │   ├── conditions/
│   │   └── ...
│   ├── filled-24px/
│   ├── outline/
│   └── outline-24px/
└── png/
    ├── filled/
    ├── filled-24px/
    ├── outline/
    └── outline-24px/

# Access pattern:
# /icons/svg/{style}/{category}/{icon-id}.svg
# /icons/png/{style}/{category}/{icon-id}.png
# /icons/png/{style}/{category}/{icon-id}@2x.png
```

--------------------------------

### Import Icon Metadata from Figma Script

Source: https://context7.com/resolvetosavelives/healthicons/llms.txt

This TypeScript script syncs icon metadata from Figma design files to a local JSON file. Ensure your .env.local file contains FIGMA_PERSONAL_ACCESS_TOKEN and FIGMA_FILENAME. Run with 'yarn import-meta-data'.

```typescript
// src/scripts/importMetaData.ts
import config from '../config';
import * as Figma from 'figma-js';
import { promises as fs } from 'fs';

// Environment setup required:
// .env.local with FIGMA_PERSONAL_ACCESS_TOKEN and FIGMA_FILENAME

const client = Figma.Client({
  personalAccessToken: config.figma.personalAccessToken
});

// Parse icon description format: "Title [tag1, tag2, dhis2:tag]"
const metadataRegex = /([^/[]*) \[(.*)\]$/;

function getMetadataFromDescription(name: string, description: string) {
  const metaData = description.trim().match(metadataRegex);

  return metaData && metaData.length > 2
    ? {
        title: metaData[1].trim(),
        tags: metaData[2].split(',').map((tag) => tag.trim()).sort()
      }
    : {
        title: startCase(name),
        tags: []
      };
}

// Run with: yarn import-meta-data
// Output: public/icons/meta-data.json
client.file(figmaFilename).then(({ data }) => {
  const metaDataArray = [];

  // Process components from Figma "Export" page
  data.document.children.forEach((page) => {
    if (page.name.toLowerCase() === 'export') {
      page.children.forEach((component) => {
        // Extract: filled/{category}/{name} pattern
        const [, style, category, name] = component.name.match(filenameRegex);
        const description = data.components[component.id].description;

        metaDataArray.push({
          id: name,
          category: category,
          path: `${category}/${name}`,
          tags: getMetadataFromDescription(name, description).tags,
          title: getMetadataFromDescription(name, description).title,
          formats: has24pxVersion(category, name) ? ['24px', '48px'] : ['48px']
        });
      });
    }
  });

  fs.writeFile('public/icons/meta-data.json', JSON.stringify(metaDataArray));
});

```

--------------------------------

### Dynamic Icon Page Route (Next.js)

Source: https://context7.com/resolvetosavelives/healthicons/llms.txt

Defines a dynamic route for individual icon pages in Next.js. Use this to create SEO-friendly URLs for each icon, allowing for specific icon, category, and style to be part of the URL.

```typescript
// src/pages/icon/[style]/[category]/[icon].tsx
import { getCategoriesAndIcons, Category } from '../../../../lib/icons';

// URL pattern: /icon/{style}/{category}/{icon}
// Example: /icon/filled/vehicles/ambulance

interface IconPageProps {
  categories: Category[];
  icon: string;
  style: 'outline' | 'filled';
  category: string;
}

export default function IconPage({ icon, category, style, categories }: IconPageProps) {
  const iconObj = categories
    .flatMap((c) => c.icons)
    .find((i) => i.id === icon && i.category === category);

  return (
    <>
      <HeadTags
        title={`Icon: ${iconObj.title}`}
        image={`og-icon-images/${iconObj.category}/${iconObj.id}.png`}
      />
      <LandingPage categories={categories} icon={iconObj} style={style} />
    </>
  );
}

// Generate static paths for all icons at build time
export async function getStaticPaths() {
  const categories = await getCategoriesAndIcons();
  const allIcons = categories.flatMap((category) => category.icons);

  const allPaths = [];
  ['filled', 'outline'].forEach((style) => {
    allIcons.forEach((icon) => {
      allPaths.push({
        params: { style, category: icon.category, icon: icon.id }
      });
    });
  });

  return { paths: allPaths, fallback: false };
}

export async function getStaticProps({ params: { icon, category, style } }) {
  const categories = await getCategoriesAndIcons();
  return { props: { icon, category, style, categories } };
}
```

--------------------------------

### IconTileModal Component for Viewing Icon Details

Source: https://context7.com/resolvetosavelives/healthicons/llms.txt

Use this React component to display icon details, provide download links for various formats (SVG, PNG), and enable copying of SVG code. It fetches SVG code and uses clipboard.js for the copy functionality.

```tsx
// src/components/IconTileModal.tsx
import { useEffect, useRef, useState } from 'react';
import ClipboardJs from 'clipboard';
import ReactModal from 'react-modal';
import { Icon } from '../lib/icons';

interface IconTileModalProps {
  icon: Icon;
  allIcons: Icon[];
  iconType: string;      // 'filled' or 'outline'
  isOpen: boolean;
  onClose: () => void;
}

export function IconTileModal(props: IconTileModalProps) {
  const [iconCode48, setIconCode48] = useState(null);
  const btnRef48 = useRef(null);

  // Fetch SVG code for copy functionality
  useEffect(() => {
    fetch(`/icons/svg/${props.iconType}/${props.icon.category}/${props.icon.id}.svg`)
      .then((res) => res.text())
      .then((text) => setIconCode48(text));
  }, [props.icon.category, props.icon.id, props.iconType]);

  // Setup clipboard.js for copy button
  useEffect(() => {
    if (!btnRef48.current) return;
    const clipboard = new ClipboardJs(btnRef48.current, {
      text: () => iconCode48
    });
    return () => clipboard.destroy();
  }, [iconCode48]);

  return (
    <ReactModal isOpen={props.isOpen} onRequestClose={props.onClose}>
      <img
        src={`/icons/svg/${props.iconType}/${props.icon.category}/${props.icon.id}.svg`}
        width="96"
        height="96"
      />
      <h2>{props.icon.title}</h2>

      {/* Download buttons */}
      <a href={`/icons/svg/${props.iconType}/${props.icon.category}/${props.icon.id}.svg`}
         download={`${props.icon.id}.svg`}>Download SVG</a>
      <a href={`/icons/png/${props.iconType}/${props.icon.category}/${props.icon.id}.png`}
         download={`${props.icon.id}.png`}>Download 48px PNG</a>
      <a href={`/icons/png/${props.iconType}/${props.icon.category}/${props.icon.id}@2x.png`}
         download={`${props.icon.id}@2x.png`}>Download 96px PNG</a>

      {/* Copy SVG button */}
      <button ref={btnRef48}>Copy SVG Code</button>

      {/* SVG code preview */}
      <pre>{iconCode48}</pre>

      {/* Tags for search filtering */}
      <div>
        {props.icon.tags.map((tag) => (
          <button key={tag}>{tag}</button>
        ))}
      </div>
    </ReactModal>
  );
}

```

--------------------------------

### Embed Health Icons in HTML

Source: https://context7.com/resolvetosavelives/healthicons/llms.txt

Use standard HTML `<img>` tags to embed SVG or PNG icons. For PNGs, use `srcset` for retina display support.

```html
<!-- Standard 48px filled icon -->
<img src="/icons/svg/filled/body/heart-organ.svg" width="48" height="48" alt="Heart organ icon">
```

```html
<!-- Outline style icon -->
<img src="/icons/svg/outline/devices/stethoscope.svg" width="48" height="48" alt="Stethoscope icon">
```

```html
<!-- 24px small version -->
<img src="/icons/svg/filled-24px/symbols/hospital-symbol.svg" width="24" height="24" alt="Hospital symbol">
```

```html
<!-- PNG format with retina support -->
<img
  src="/icons/png/filled/vehicles/ambulance.png"
  srcset="/icons/png/filled/vehicles/ambulance@2x.png 2x"
  width="48"
  height="48"
  alt="Ambulance icon"
>
```

--------------------------------

### IconTile Component for Rendering Icons

Source: https://context7.com/resolvetosavelives/healthicons/llms.txt

Renders an icon tile, displaying either filled, outline, or both variants based on the `iconStyle` prop. Uses `react-lazy-load-image-component` for efficient loading.

```tsx
// src/components/IconTile.tsx
import { LazyLoadImage } from 'react-lazy-load-image-component';
import { Icon, IconFormat } from '../lib/icons';
import { SearchStyle } from '../store/search';

interface IconTileProps {
  icon: Icon;
  visible: boolean;
  iconStyle: SearchStyle;    // 'all', 'filled', or 'outline'
  iconFormat: IconFormat;    // '48px' or '24px'
  onClick: (type: string) => void;
}

export function IconTile(props: IconTileProps) {
  const formatSuffix = props.iconFormat === '24px' ? '-24px' : '';

  return (
    <div className="iconGroup">
      {['all', 'filled'].includes(props.iconStyle) && (
        <button onClick={() => props.onClick('filled')}> 
          <LazyLoadImage
            src={`/icons/svg/filled${formatSuffix}/${props.icon.category}/${props.icon.id}.svg`}
            width="48"
            height="48"
            alt={`${props.icon.title} filled icon`}
            effect="opacity"
          />
        </button>
      )}
      {['all', 'outline'].includes(props.iconStyle) && (
        <button onClick={() => props.onClick('outline')}> 
          <LazyLoadImage
            src={`/icons/svg/outline${formatSuffix}/${props.icon.category}/${props.icon.id}.svg`}
            width="48"
            height="48"
            alt={`${props.icon.title} outline icon`}
            effect="opacity"
          />
        </button>
      )}
      <div className="iconTitle">{props.icon.title}</div>
    </div>
  );
}

```

--------------------------------

### Search Keywords Utility Function

Source: https://context7.com/resolvetosavelives/healthicons/llms.txt

Filters text by matching all provided search terms case-insensitively and in any order. Returns true if the search string is empty.

```typescript
// src/lib/searchKeywords.tsx
export function searchKeywords(search: string, keywords: string): boolean {
  // Returns true if all search terms match (in any order)
  // Supports partial matches and is case-insensitive

  if (!search || search.trim() === '') {
    return true; // Show all results when search is empty
  }

  const searchTerms = search.trim().split(/\s+/).filter((term) => term.length > 0);

  if (searchTerms.length === 0) {
    return true;
  }

  // Match all terms in any order
  const pattern = '(?=.*?' + searchTerms.join(')(?=.*?') + ').*';
  return new RegExp(pattern, 'i').test(keywords);
}

// Usage example:
const icon = {
  title: "Heart Organ",
  tags: ["cardiac", "cardiovascular", "body"],
  category: "body"
};

const searchableText = icon.tags.concat([icon.title, icon.category]).join(', ');
// "cardiac, cardiovascular, body, Heart Organ, body"

searchKeywords("heart", searchableText);      // true
searchKeywords("cardiac body", searchableText); // true
searchKeywords("blood", searchableText);       // false
searchKeywords("", searchableText);            // true (shows all)

```

--------------------------------

### Fetch Upstream Changes

Source: https://github.com/resolvetosavelives/healthicons/blob/main/README.md

Retrieve the latest changes from the main healthicons repository. This command fetches all branches and tags from the upstream remote.

```bash
git fetch upstream
```

--------------------------------

### Health Icons TypeScript Interfaces

Source: https://context7.com/resolvetosavelives/healthicons/llms.txt

Defines the structure for icon data, including formats, IDs, categories, titles, tags, and available sizes. Used for managing icon metadata within the application.

```typescript
// src/lib/icons.tsx

// Available icon formats
export type IconFormat = '48px' | '24px';

// Icon data structure
export interface Icon {
  id: string;          // Unique identifier (e.g., "heart-organ")
  category: string;    // Category name (e.g., "body")
  title: string;       // Display title (e.g., "Heart Organ")
  tags: string[];      // Searchable tags
  formats: IconFormat[]; // Available sizes ['48px'] or ['24px', '48px']
}

// Category containing multiple icons
export interface Category {
  title: string;   // Category name
  icons: Icon[];   // Icons in this category
}

// Example icon object from meta-data.json:
const exampleIcon: Icon = {
  id: "helicopter",
  category: "vehicles",
  title: "Helicopter",
  tags: ["Chopper", "Medevac", "Medivac", "dhis2:helicopter"],
  formats: ["24px", "48px"]
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.