799c7e6936
Co-authored-by: Denys Konovalov <kontakt@denyskon.de> Co-authored-by: Mathieu COSYNS <64072917+Mathieu-COSYNS@users.noreply.github.com>
75 lines
2.1 KiB
Plaintext
75 lines
2.1 KiB
Plaintext
---
|
|
group: Customization
|
|
title: Adding Custom Icons
|
|
weight: 100
|
|
---
|
|
|
|
Static CMS exposes a `window.CMS` global object that you can use to register custom icons via `registerIcon`. The same object is also the default export if you import Static CMS as an npm module.
|
|
|
|
Custom icons can be used with [Collections](/docs/collection-overview) or [Custom Links & Pages](/docs/additional-links)
|
|
|
|
## Params
|
|
|
|
| Param | Type | Description |
|
|
| ----- | ------------------------------------------------------------------------------ | -------------------------------------------------- |
|
|
| name | string | A unique name for the icon |
|
|
| name | [React Function Component](https://reactjs.org/docs/components-and-props.html) | A React functional component that renders the icon |
|
|
|
|
## Example
|
|
|
|
This example uses Font Awesome to supply the icon.
|
|
|
|
<CodeTabs>
|
|
|
|
```js
|
|
import { faHouse } from '@fortawesome/free-solid-svg-icons';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import CMS from '@staticcms/core';
|
|
|
|
CMS.registerIcon('house', () => h(FontAwesomeIcon, {icon=faHouse, size="lg"}));
|
|
```
|
|
|
|
```jsx
|
|
import { faHouse } from '@fortawesome/free-solid-svg-icons';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import CMS from '@staticcms/core';
|
|
|
|
CMS.registerIcon('house', () => <FontAwesomeIcon icon={faHouse} size="lg" />);
|
|
```
|
|
|
|
```tsx
|
|
import { faHouse } from '@fortawesome/free-solid-svg-icons';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import CMS from '@staticcms/core';
|
|
|
|
CMS.registerIcon('house', () => <FontAwesomeIcon icon={faHouse} size="lg" />);
|
|
```
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
### Collection
|
|
|
|
<CodeTabs>
|
|
```yaml
|
|
collections:
|
|
- name: homepage
|
|
icon: house
|
|
```
|
|
|
|
```js
|
|
collections: [
|
|
{
|
|
name: 'homepage',
|
|
icon: 'house'
|
|
},
|
|
],
|
|
```
|
|
|
|
</CodeTabs>
|
|
|
|
### Additional Links
|
|
|
|
See [Additional Links](/docs/additional-links#examples) for details.
|