Health Icons

The Health Icons website is built with Next.js. To contribute to the codebase, follow these steps to set up your local environment:

1. Fork the main repository on GitHub.
2. Clone your fork: gh repo clone {your-username}/healthicons.
3. Add the upstream remote: git remote add upstream git@github.com:resolvetosavelives/healthicons.git.
4. Fetch the upstream: git fetch upstream.
5. Create a new branch from upstream main: git checkout -b my-branch-name upstream/main.
6. Install dependencies: yarn install.
7. Start the development server: yarn dev.

If you need a specific icon that is not currently available, you can submit a request by opening a GitHub Issue. Use the following format for the title:

Icon Request: [name of icon]

To synchronize the website with the latest icon data from Figma, update the open-graph images and sitemap.xml using the following steps:

1. Copy .env.example to .env.local.
2. Generate a Personal Access Token in your Figma account settings.
3. In .env.local, add your token: FIGMA_PERSONAL_ACCESS_TOKEN="{token-goes-here}".
4. Run the update command: yarn update-icons.
5. Ensure you commit the newly generated files in the /public/ directory.

cp .env.example .env.local
# Add FIGMA_PERSONAL_ACCESS_TOKEN to .env.local
yarn update-icons

You can install the Health Icons package directly into your project using a package manager. The icons are available in the public domain (CC0) and can be used in commercial or personal projects without attribution.

npm i healthicons
# or
yarn add healthicons

To add new icons to the live website, follow this workflow:

1. Run the website locally.
2. Clear existing local icon files in /public/icons/png/ and /public/icons/svg/.
3. In Figma, ensure all new icons are tagged correctly.
4. Export icons from Figma:
   • PNG: Select all icons and export as 1x PNG and 2x PNG.
   • SVG: Select all icons and export as SVG.
5. Run yarn update-icons in your terminal.
6. Test the site locally at localhost:4000.
7. Commit changes to a new branch, raise a Pull Request, and request a review via Slack.

The SearchState interface defines the shape of the search configuration in the application state:

When designing icons in Figma, you must provide metadata in the "Description" field of the filled version of the icon. Use the following format:

{title} [{tag1}, {tag2}, {tag3}…, dhis2:{tag}]

Requirements:

• Title: Use Title Case (e.g., Blood Type RH+).
• Tags: Use Title Case. Tags should be synonyms or related concepts to improve searchability (e.g., [Blood, RH Positive, dhis2:blood_rh_p]).
• dhis2 tag: Include the specific dhis2:{tag} identifier if applicable.

Donkey [Animal, Ass, Farm, Mule, dhis2:donkey]
Blood Type RH+ [Blood, RH Positive, dhis2:blood_rh_p]

Use getCategoriesAndIcons() to asynchronously fetch a sorted list of all available icon categories and their associated icon data. This function reads the local filesystem and merges icon metadata (titles, tags, and formats) from the project's meta-data.json file. The resulting categories are sorted alphabetically by title.

import { getCategoriesAndIcons } from './path/to/icons';

const categories = await getCategoriesAndIcons();

// categories is an array of Category objects
// Each Category has a 'title' and an 'icons' array
console.log(categories);

The searchSlice provides Redux actions to manage the search state, including keywords, icon style, category, and icon format. Use these actions to update the global search configuration:

• setKeywords(keywords: string): Updates the search query string.
• setStyle(style: SearchStyle): Updates the icon style to 'outline', 'filled', or 'all'.
• setCategory(category: string): Updates the selected icon category.
• setFormat(format: IconFormat): Updates the desired icon size/format.

import { setKeywords, setStyle, setCategory, setFormat } from './path/to/searchSlice';

dispatch(setKeywords('heart'));
dispatch(setStyle('filled'));
dispatch(setCategory('cardiology'));
dispatch(setFormat('48px'));

The IconFormat type defines the available sizes for an icon. The supported values are:

• '48px'
• '24px'

type IconFormat = '48px' | '24px';

The icon data is structured using the following TypeScript interfaces:

Category

Represents a grouping of icons.

• title: string
• icons: Icon[]

Icon

Represents individual icon metadata.

• id: string (the filename without extension)
• category: string (the directory name)
• title: string (the human-readable name)
• tags: string[] (searchable keywords)
• formats: IconFormat[] (available sizes)

When working with the Redux store in this project, use the exported RootState and AppDispatch types to ensure type safety when accessing the global state or dispatching actions. RootState represents the shape of the entire application state, and AppDispatch represents the type of the dispatch function, which includes middleware-specific enhancements.

import { RootState, AppDispatch } from './store';

// Example usage in a selector
const selectSearchData = (state: RootState) => state.search;

// Example usage in a component
const dispatch = useDispatch<AppDispatch>();