Skip to content

Commit

Permalink
Describe how to use a built-in icon in a custom component (#6905)
Browse files Browse the repository at this point in the history
  • Loading branch information
RomanTsukanov committed Sep 7, 2023
1 parent df38058 commit 6573849
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -422,12 +422,24 @@ Each question type has an icon that is displayed next to the type name in the [T
```js
import { ..., SvgRegistry } from "survey-core"

const CUSTOM_TYPE = "color-picker";

SvgRegistry.registerIconFromSvg(
CUSTOM_TYPE,
'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="..." /></svg>'
);
```

Alternatively, you can use one of [built-in SurveyJS icons](https://surveyjs.io/form-library/documentation/icons#built-in-icons). The code below shows how to use the Text icon:

```js
import { ..., settings } from "survey-core";

const CUSTOM_TYPE = "color-picker";

settings.customIcons["icon-" + CUSTOM_TYPE] = "icon-text";
```

<details>
<summary>View Full Code</summary>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,16 @@ const svg = ReactDOMServer.renderToString(<ColorPickerIcon />);
SvgRegistry.registerIconFromSvg(CUSTOM_TYPE, svg);
```

Alternatively, you can use one of [built-in SurveyJS icons](https://surveyjs.io/form-library/documentation/icons#built-in-icons). The code below shows how to use the Text icon:

```js
import { ..., settings } from "survey-core";

const CUSTOM_TYPE = "color-picker";

settings.customIcons["icon-" + CUSTOM_TYPE] = "icon-text";
```

## Use the Custom Component as an Editor in the Property Grid

The [Property Grid](/Documentation/Survey-Creator?id=property-grid) is built upon a regular survey and can be customized using the same techniques. It means that if you integrate a third-party component into a survey, you can integrate it into the Property Grid with little effort. For example, the following code shows how to register the Color Picker configured in this tutorial as an editor for the properties of the `"color"` type:
Expand Down

0 comments on commit 6573849

Please sign in to comment.