How to add icons to radio buttons with a relative URL?

In module.ts, I can add radio buttons this way, and add image urls to show a little icon instead of having it show only text. This works great with absolute urls but I created my own icons to display instead. I want to use a relative url instead using my custom icons.

    .addRadio({
      ...
      settings: {
        options: [
          {
            value: 'v',
            imgUrl: 'https://link-to-image.svg', // << change to './img/custom.svg'
          },
          ...
        ],
      },

I have placed them in an ./img folder which contains the panel logo, but when I build the plugin and open Grafana, I don’t see my images in the resources tab in the inspector (and I don’t see the icons in the radio buttons.) I am assuming the images are not packaged when I build the plugin. How do I fix this? Thanks!

You can import the images, but you need to add the type definitions.
Create a types folder
Create a file called types.d.ts
Add the below code into types.d.ts

declare module '*.svg' {
  const value: any;
  export default value;
}

declare module '*.png' {
  const value: any;
  export default value;
}

Add types to the include in tsconfig.json

image

Inside module.ts

import logo from './img/logo.svg';
import buildingOverview from './img/screenshot-building-overview.png';

...
    .addRadio({
      path: 'test',
      name: 'test',
      settings: {
        options: [
          {
            value: 'v',
            imgUrl: logo,
          },
          {
            value: 'v',
            imgUrl: buildingOverview,
          },
        ],
      },
    })

image

3 Likes

Works perfectly! I didn’t know that I needed to add the type definitions. Thank you! :smile:

1 Like