IconWidget

This widget renders a single icon button. Use it for simple actions that should live alongside the other built-in deck.gl widgets.

JavaScript

import {Deck} from '@deck.gl/core';
import {IconWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

new Deck({
  widgets: [
    new IconWidget({
      icon: `./run.svg`,
      label: 'Run!',
      onClick: () => alert('Running!')
    })
  ]
});

TypeScript

import {Deck} from '@deck.gl/core';
import {IconWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

new Deck({
  widgets: [
    new IconWidget({
      icon: `./run.svg`,
      label: 'Run!',
      onClick: () => alert('Running!')
    })
  ]
});

React

import React from 'react';
import DeckGL, {IconWidget} from '@deck.gl/react';
import '@deck.gl/widgets/stylesheet.css';

function App() {
  return (
    <DeckGL>
      <IconWidget
        icon="./run.svg"
        label="Run!"
        onClick={() => alert('Running!')}
      />
    </DeckGL>
  );
}

Constructor

import {IconWidget, type IconWidgetProps} from '@deck.gl/widgets';
new IconWidget({} satisfies IconWidgetProps);

Types

IconWidgetProps

The IconWidget accepts the generic WidgetProps and:

icon (string, required)

Data URL used as the button icon mask.

label (string, optional)

Tooltip message displayed while hovering over the widget.

color (string, optional)

CSS color applied to the icon.

onClick (function, optional)

() => void

Callback invoked when the button is clicked.

Styles

The IconWidget uses the shared button theme variables described in the styling guide.

Source

modules/widgets/src/icon-widget.tsx