Family Chart

https://donatso.github.io/family-chart/
Admin
Family Chart is a D3.js-based visualization library for creating interactive, customizable family...
Tokens:32,036
Snippets:191
Trust Score:8.3
Update:8 months ago
Show doc for...
Tokens:
Raw
### Create Family Tree Chart with Data

Source: https://donatso.github.io/family-chart/index

This example demonstrates how to initialize a family tree chart using the Family Chart library. It includes importing necessary modules, defining sample family data, and configuring chart components like cards and editing features. The code requires the 'family-chart' library and its CSS styles.

```javascript
import * as f3 from 'family-chart';
import 'family-chart/dist/styles/family-chart.css';

// Your family tree data
const data = [
  {
    "id": "1",
    "data": {"first name": "John", "last name": "Doe", "birthday": "1980", "gender": "M"},
    "rels": {"spouses": ["2"], "children": ["3"]}
  },
  {
    "id": "2",
    "data": {"first name": "Jane", "last name": "Doe", "birthday": "1982", "gender": "F"},
    "rels": {"spouses": ["1"], "children": ["3"]}
  },
  {
    "id": "3",
    "data": {"first name": "Bob", "last name": "Doe", "birthday": "2005", "gender": "M"},
    "rels": {"parents": ["1", "2"]}
  }
];

// Create the chart
const f3Chart = f3.createChart('#FamilyChart', data)

const f3Card = f3Chart.setCardHtml()
  .setCardDisplay([["first name","last name"],["birthday"]]);

const f3EditTree = f3Chart.editTree()
  .setFields(["first name","last name","birthday"]);

f3Chart.updateTree({initial: true});
```

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

### HTML Handlers Setup for Family Chart

Source: https://donatso.github.io/family-chart/variables/htmlHandlers

The `htmlHandlers` module provides functions to interact with HTML elements for rendering the family chart. It includes utilities for generating unique IDs, setting up SVG elements, and managing reactive tree data updates. These functions are crucial for dynamic chart updates and element identification within the DOM.

```typescript
const htmlHandlers: __module & {
getUniqueId: (d: any) => any;
setupHtmlSvg: (getHtmlSvg: () => HTMLElement) => void;
setupReactiveTreeData: (
getHtmlSvg: () => HTMLElement,
) => (new_tree_data: TreeDatum[]) => TreeDatum[];
} = ...

// Type Declaration:
// getUniqueId: (d: any) => any
// setupHtmlSvg: (getHtmlSvg: () => HTMLElement) => void
// setupReactiveTreeData: (getHtmlSvg: () => HTMLElement) => (new_tree_data: TreeDatum[]) => TreeDatum[]

// Deprecated: Use setupReactiveTreeData instead of the direct export of setupHtmlSvg in future versions.
```

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

### Get User Icon (JavaScript)

Source: https://donatso.github.io/family-chart/functions/icons.userIcon

The userIcon function is designed to return a string representing a user icon. This function has no parameters and its primary output is a string.

```javascript
function userIcon(): string {
  // Implementation details for returning user icon string
}
```

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

### setupZoom Function

Source: https://donatso.github.io/family-chart/functions/handlers.setupZoom

Initializes zoom functionality for a given HTML element. This function is part of the internal handlers for managing zoom behavior within the family chart.

```APIDOC
## Function setupZoom

### Description
Initializes zoom functionality for a given HTML element. This function is part of the internal handlers for managing zoom behavior within the family chart.

### Method
N/A (This is a client-side JavaScript function, not a REST endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
// Example usage (assuming 'chartContainer' is an HTML element and ZoomProps is defined)
setupZoom(chartContainer, { initialScale: 1.5 });
```

### Response
#### Success Response (void)
This function does not return a value.

#### Response Example
N/A
```

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

### Get linkOffIcon String - Family Chart API

Source: https://donatso.github.io/family-chart/functions/icons.linkOffIcon

Retrieves the string representation for the linkOffIcon. This function is part of the icons module and returns a string.

```typescript
linkOffIcon(): string
```

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

### Get Main Person Data

Source: https://donatso.github.io/family-chart/classes/Chart

Retrieves the data object for the main person in the family tree. This is typically the root individual around whom the tree is centered.

```javascript
getMainDatum(): Datum
```

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

### htmlContSetup Function

Source: https://donatso.github.io/family-chart/functions/handlers.htmlContSetup

Sets up the HTML content for the family chart, including SVG elements for rendering.

```APIDOC
## htmlContSetup

### Description
Sets up the HTML content for the family chart, including SVG elements for rendering.

### Method
N/A (This is a function, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Example usage (assuming 'containerElement' is an HTMLElement)
const setupResult = htmlContSetup(containerElement);
console.log(setupResult.svg);
```

### Response
#### Success Response
Returns an object containing references to the created HTML and SVG elements.
- **htmlSvg** (null | Element) - Reference to the HTML SVG element.
- **htmlView** (null | Element) - Reference to the HTML view element.
- **svg** (SVGElement) - The main SVG element.
- **svgView** (null | Element) - Reference to the SVG view element.

#### Response Example
```json
{
  "htmlSvg": "<svg>...</svg>",
  "htmlView": "<div>...</div>",
  "svg": "<svg>...</svg>",
  "svgView": "<div>...</div>"
}
```
```

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

### cardComponentSetup Function

Source: https://donatso.github.io/family-chart/functions/handlers.cardComponentSetup

Sets up the card component for the family chart. It takes an HTMLElement as a container and returns a function that updates the tree data.

```APIDOC
## Function cardComponentSetup

### Description
Sets up the card component for the family chart. It takes an HTMLElement as a container and returns a function that updates the tree data.

### Method
N/A (This is a function signature, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Example usage:
const container = document.getElementById('chart-container');
const updateChart = cardComponentSetup(container);

const initialData = [
  // ... your TreeDatum[] data
];
updateChart(initialData);
```

### Response
#### Success Response
Returns a function: `(new_tree_data: TreeDatum[]) => TreeDatum[]`

#### Response Example
```javascript
// The returned function takes new tree data and returns updated tree data.
const updatedData = updateChart(newChartData);
```

### Error Handling
N/A for this function signature.
```

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

### Initialize and Configure CardHtml with Family Chart API (JavaScript)

Source: https://donatso.github.io/family-chart/classes/CardHtmlClass

Demonstrates how to initialize the Family Chart using a CSS selector and data, then set up the CardHtml instance for custom card display. This involves creating a chart instance and chaining methods to define which data fields appear on the cards.

```javascript
import * as f3 from 'family-chart'  
const f3Chart = f3.createChart('#FamilyChart', data)  
const f3Card = f3Chart.setCardHtml()  // returns a CardHtml instance  
  .setCardDisplay([["first name","last name"],["birthday"]]);
```

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

### Get userPlusCloseIcon - Family Chart API

Source: https://donatso.github.io/family-chart/functions/icons.userPlusCloseIcon

Retrieves the userPlusCloseIcon from the Family Chart API. This function returns a string representing the icon. No specific dependencies are mentioned, and it takes no arguments.

```javascript
userPlusCloseIcon(): string
```

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

### setupModal

Source: https://donatso.github.io/family-chart/classes/EditTree

Initializes and configures the modal component for the family tree.

```APIDOC
## POST /setupModal

### Description
Initializes and sets up the modal component used for various interactions within the family tree interface, such as displaying detailed information or forms.

### Method
POST

### Endpoint
/setupModal

### Parameters
None

### Response
#### Success Response (200)
- **Modal** - Returns a Modal object, likely containing methods to control the modal's visibility and content.

### Request Example
```json
{}
```

### Response Example
```json
{
  "message": "Modal object returned"
}
```
```

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

### Set Sort Children Function - TypeScript

Source: https://donatso.github.io/family-chart/classes/Chart

Allows customization of the sorting order for children within the family chart. A function can be provided to define the sorting logic, for example, by birth date.

```typescript
setSortChildrenFunction(sortChildrenFunction: SortChildrenFunction): Chart
```

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

### Get Max Depth

Source: https://donatso.github.io/family-chart/classes/Chart

Determines the maximum depth of a person within the family tree, considering both their ancestry and progeny. It requires the ID of the person for whom to calculate the depth. Returns an object with `ancestry` and `progeny` depth values.

```javascript
getMaxDepth(d_id: string): { ancestry: number; progeny: number }
```

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

### Get Current Zoom Transform from SVG Element

Source: https://donatso.github.io/family-chart/functions/handlers.getCurrentZoom

Retrieves the current zoom transformation applied to an SVG element. This function is useful for understanding the current scale and translation of the SVG content. It takes an SVGElement as input and returns a d3-zoom.ZoomTransform object.

```typescript
/**
 * Retrieves the current zoom transformation applied to an SVG element.
 * @param svg The SVG element to get the zoom transform from.
 * @returns The current ZoomTransform object.
 */
function getCurrentZoom(svg: SVGElement): ZoomTransform;
```

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

### Initialize SVG Container with htmlContSetup

Source: https://donatso.github.io/family-chart/functions/handlers.htmlContSetup

The htmlContSetup function initializes SVG elements (svg, svgView) and their corresponding container elements (htmlSvg, htmlView) within a provided HTMLElement. It returns an object containing these initialized elements. This function is crucial for setting up the visual rendering area for the family chart.

```TypeScript
function htmlContSetup(
  cont: HTMLElement,
): {
  htmlSvg: null | Element;
  htmlView: null | Element;
  svg: SVGElement;
  svgView: null | Element;
} {
  // Implementation details for setting up SVG elements
  // ...
  return {
    htmlSvg: null,
    htmlView: null,
    svg: document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
    svgView: null
  };
}
```

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

### Get Kinship Information - TypeScript

Source: https://donatso.github.io/family-chart/functions/elements.kinshipInfo

The kinshipInfo function retrieves kinship details based on configuration, a relationship ID, and a data stash. It returns either an HTMLElement or undefined. This function is crucial for rendering relationship information within the family chart.

```TypeScript
function kinshipInfo(
  kinship_info_config: KinshipInfoConfig,
  rel_id: string,
  data_stash: Data,
): undefined | HTMLElement;
```

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

### Create Family Chart Instance

Source: https://donatso.github.io/family-chart/classes/Chart

Initializes a new family chart visualization. This is the primary method for creating a chart instance, requiring a selector for the container element and the data for the chart. It returns a Chart instance that can be further configured.

```javascript
const f3Chart = createChart('#FamilyChart', data)  // returns a Chart instance;
```

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

### Get Kinships Data Stash

Source: https://donatso.github.io/family-chart/classes/Chart

Retrieves a data stash containing kinship information between two specified individuals. This stash can be used to generate smaller family trees showing the relatives connecting these two people. Requires the IDs of both the main person and the related person.

```javascript
getKinshipsDataStash(main_id: string, rel_id: string): void | DatumKinship[]
```

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

### Initialize and Configure EditTree Instance (JavaScript)

Source: https://donatso.github.io/family-chart/classes/EditTree

Demonstrates how to create a Family Chart instance, obtain its EditTree object, configure fields, and set up a change handler to export updated data. This is useful for integrating interactive family tree editing into web applications.

```javascript
import * as f3 from 'family-chart'  
const f3Chart = f3.createChart('#FamilyChart', data)  
const f3EditTree = f3Chart.editTree()  // returns an EditTree instance  
  .setFields(["first name","last name","birthday"])  
  .setOnChange(() => {  
     const updated_data = f3EditTree.exportData()  
     // do something with the updated data  
  })
```

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

### User Plus Icon Function

Source: https://donatso.github.io/family-chart/functions/icons.userPlusIcon

Provides information about the userPlusIcon function, which returns a string representation of an icon.

```APIDOC
## Function userPlusIcon

### Description
Returns a string representing the user plus icon.

### Method
N/A (This is a function, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
None

### Request Example
N/A

### Response
#### Success Response
- **iconString** (string) - The string representation of the user plus icon.

#### Response Example
```json
{
  "iconString": "<svg>...</svg>"
}
```
```

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

### Create History Function Signature

Source: https://donatso.github.io/family-chart/functions/handlers.createHistory

Defines the TypeScript signature for the createHistory function. It takes a store, a function to get a data copy, and an update callback, returning a History object. This function is crucial for managing and updating the history of changes within the Family Chart application.

```typescript
createHistory(
  store: Store,
  getStoreDataCopy: () => Data,
  onUpdate: () => void,
): History
```

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

### Create Store with Initial State - TypeScript

Source: https://donatso.github.io/family-chart/functions/createStore

The createStore function initializes a new store with the provided initial state. It takes a single argument, initial_state, of type StoreState, and returns a Store object. This is fundamental for setting up the application's state management.

```typescript
function createStore(initial_state: StoreState): Store {
  // Implementation details for creating and returning a store
  return {}; // Placeholder for actual Store object
}
```

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

### Function trashSvgIcon

Source: https://donatso.github.io/family-chart/functions/icons.trashSvgIcon

Provides the SVG icon for the trash functionality.

```APIDOC
## Function trashSvgIcon

### Description
Provides the SVG icon for the trash functionality.

### Method
N/A (This is a function, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
None

### Request Example
N/A

### Response
#### Success Response
- **string** - The SVG icon markup as a string.

#### Response Example
```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
  <path fill-rule="evenodd" d="M16.5 4.478a.75.75 0 00-1.095-.132l-3.075 2.461c-.507.406-.896.995-.997 1.634a.75.75 0 001.495.377 5.744 5.744 0 011.095-1.367l3.075-2.461a.75.75 0 00.132-1.095zM12.75 13.688a.75.75 0 00-1.495.377 5.744 5.744 0 01-1.095 1.367l-3.075 2.461a.75.75 0 00-.132 1.095l3.075 2.461a.75.75 0 001.095-.132l3.075-2.461a.75.75 0 00-.377-1.495 5.744 5.744 0 01-1.367-1.095l-2.461-3.075zM10.5 19.697a.75.75 0 001.095.132l3.075-2.461a.75.75 0 00.132-1.095l-3.075-2.461a.75.75 0 00-.377 1.495 5.744 5.744 0 011.367 1.095l2.461 3.075a.75.75 0 001.095.132l3.075-2.461a.75.75 0 00-.132-1.095l-3.075-2.461a.75.75 0 00-1.495.377 5.744 5.744 0 01-1.095 1.367l-2.461 3.075a.75.75 0 00-.132 1.095l3.075 2.461a.75.75 0 001.095.132l3.075-2.461a.75.75 0 00-.132-1.095l-3.075-2.461a.75.75 0 00-.377-1.495 5.744 5.744 0 01-1.367-1.095l-2.461-3.075zM12 2.25a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 4.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 9a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 7.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 16.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 19.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 16.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 19.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 19.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 9a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 6a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 4.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 9a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 6a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 6a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 3a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 9a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 7.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 16.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 19.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 16.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 19.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 19.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 9a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 6a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 4.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 9a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 6a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 6a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 3a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 9a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 7.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 16.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 19.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 16.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 19.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 19.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 9a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 6a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 4.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 9a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 6a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 6a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 3a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 9a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 7.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 16.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 19.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 16.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 19.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 19.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 9a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 6a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 4.5a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 9a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 6a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 6a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 3a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM4.5 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM19.5 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM12 12a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM17.25 15a.75.75 0 00-.75.75v1.5a.75.75 0 001.5 0v-1.5a.75.75 0 00-.75-.75zM6.75 15a.75.75 0 00-.7
```

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

### Person Icon Function

Source: https://donatso.github.io/family-chart/functions/icons.personIcon

Provides information about the `personIcon` function, which returns a string representation of an icon.

```APIDOC
## Function personIcon

### Description
Returns a string representing a person icon.

### Method
N/A (This is a function, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
None

### Request Example
```javascript
personIcon()
```

### Response
#### Success Response
- **iconString** (string) - The string representation of the person icon.

#### Response Example
```json
{
  "iconString": "fa-user"
}
```
```
Tokens:
Raw