mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 14:52:54 +01:00
73 lines
3.1 KiB
Markdown
73 lines
3.1 KiB
Markdown
---
|
|
hide_title: true
|
|
hide_table_of_contents: true
|
|
title: Icon
|
|
---
|
|
|
|
<##head##>
|
|
|
|
# Icon
|
|
|
|
This node places an icon in the visual tree.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
You can use an icon from the built in library, or provide your own image source.
|
|
<##head##>
|
|
|
|
## Dynamic icons
|
|
|
|
If you want to dynamically pass an icon from the icon library to the **Icon** node you do this through the <span class="ndl-data">Icon Source</span> input.
|
|
|
|
This input expects an object with a **class** (being the name of the icon library) and **code** (being the icon code that you see when you hover an icon in the icon picker). The easiest way of transforming a string to an icon object is to use a custom function containing the following code:
|
|
|
|
```js
|
|
Outputs.iconObject = {
|
|
"class": "material-icons",
|
|
"code": Inputs.iconCode,
|
|
};
|
|
```
|
|
|
|
This will automatically create an <span className="ndl-data">iconCode</span> input and an <span className="ndl-data">iconObject</span> output.
|
|
|
|
## Inputs
|
|
|
|
| Data | Description |
|
|
| --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
|
| <span className="ndl-data">Type</span> | Use this to set if you want to use a predefined `icon` or a custom `image` from the project folder. |
|
|
| <span className="ndl-data">Icon Source</span> | Where to get the icon. |
|
|
| <span className="ndl-data">Size</span> | The width of the icon in `px`. |
|
|
| <span className="ndl-data">Color</span> | Sets the color of the icon. Only visible if _Type_ is set to `icon`. |
|
|
|
|
### Visual
|
|
|
|
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties):
|
|
|
|
- [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
|
|
- [Padding](/nodes/shared-props/inputs/visual-input-properties#padding)
|
|
- [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
|
|
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#-position)
|
|
- [Style](/nodes/shared-props/inputs/visual-input-properties#style)
|
|
- [Placement](/nodes/shared-props/inputs/visual-input-properties#placement)
|
|
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
|
|
|
## Outputs
|
|
|
|
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties):
|
|
|
|
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties#bounding-box)
|
|
- [Mounted](/nodes/shared-props/outputs/visual-output-properties#mounted)
|
|
- [Other](/nodes/shared-props/outputs/visual-output-properties#other)
|
|
|
|
<div className="hidden-props-for-editor">
|
|
|
|
@include "../../shared-props/inputs/_visual-input-properties.md"
|
|
|
|
@include "../../shared-props/outputs/_visual-output-properties.md"
|
|
|
|
</div>
|