# DynamicIcon 📌

An enhanced Icon that can render any of the following:

* BB.Components.Icon
* BB.Components.Image
* A custom component

{% hint style="info" %}

#### System Component 📌

This component is shipped with BlueBase Core.
{% endhint %}

## Usage

### Icon

The following example shows how to use [BlueBase Icon](https://bluebase.gitbook.io/core/components/icon/icon-1) component:

```jsx
import { DynamicIcon } from '@bluebase/core';

// Then somewhere in your app:
<DynamicIcon
    type="icon"
    size={250}
    name="rocket"
/>
```

### Image

The following example shows how to use an image as an icon:

```jsx
<DynamicIcon
    type="image"
    size={250}
    source={{ uri: 'https://picsum.photos/200' }}
/>
```

### Component

The following example shows how to use a custom component as an icon:

```jsx
const CustomComponent = ({ size }: { size: number }) => (
	<View style={{ height: size, width: size, backgroundColor: 'red' }} />
);

// Then somewhere in your component:		
<DynamicIcon
    type="component"
    size={250}
    component={CustomComponent}
/>
```

It is also possible to use a component registered in the ComponentRegistry by using it's name:

```jsx
<DynamicIcon
    type="component"
    size={250}
    component="CustomComponent" // equivalent to BB.Components.resolve('CustomComponent')
/>
```

## Properties

| prop      | type                             | required | default | description                                                                                                                                                                                                                                                                                                                      |
| --------- | -------------------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type      | 'component' \| 'icon' \| 'image' | *yes*    | -       | <p>If value is:</p><p></p><ul><li><code>component</code>: Icon is a custom component, and looks for 'component' prop</li><li><code>icon</code>: Icon is an instance of BB.Components.Icon and looks for 'icon' prop</li><li><code>image</code>: Icon is an instance of BB.Components.Image and looks for 'source' prop</li></ul> |
| component | React Component \| string        | -        | -       | Used when type is 'component'.   Either a component or a component name (string). In case of string, it will be fetched from Component Registry.                                                                                                                                                                                 |
| name      | string                           | -        | -       | Used when type is 'icon'. This is the name prop of the BB.Components.Icon component                                                                                                                                                                                                                                              |
| source    | Image Source Prop Type           | -        | -       | Used when type is 'image'. This is the Image source.                                                                                                                                                                                                                                                                             |
| size      | number                           | -        | 100     | Icon size.                                                                                                                                                                                                                                                                                                                       |
| testID    | string                           | *no*     | -       | Used to locate this view in end-to-end tests.                                                                                                                                                                                                                                                                                    |