Not able to add icon in FooterElement

[tmmehta5]

I'm using Footer component in my react application. I'm creating a custom footer passing FooterElement[] to customElements prop of Footer component. I want to add an icon at the start of the footer. But the definition for FooterElement doesn't allow to do so. It accepts only following: type FooterElement = { title: string; url?: string | undefined; key?: keyof TitleTranslations | "copyright" | (string & Record<never, never>) | undefined; }

Steps to reproduce

1. Write footer with Footer component like - <Footer className="footer-class" customElements={() => footerElement} />
2. Create an array of footerElement as - const footerElement: FooterElement[] = [ { title: "xyz", url: "url to xyz" }, { title: "abc", url: "url to abc" } ];

Expected behavior

My requirement if that this array should accept app icon. So, I want above array to be like- const footerElement: FooterElement[] = [ { icon:<svgIcon /> }, { title: "xyz", url: "url to xyz" }, { title: "abc", url: "url to abc" } ];

@FlyersPh9

[FlyersPh9]

iTwinUI team: if a user places an SVG in our footer currently the icon is not vertically centered. Should we update the CSS to handle this?

[veekeys]

Never thought about image in footer.. @tmmehta5 do you have a mockup how it is supposed to look like with the image? Or what kind of image is expected there.

[mayank99]

iTwinUI team: if a user places an SVG in our footer currently the icon is not vertically centered. Should we update the CSS to handle this?

That should be left upto the user imo.

[tmmehta5]

@veekeys The image of area under which product is being marketed. For example, iTwinJS.