Drawer with Font-Awesome Icons

[Bernd]

Hi.

I'm using a Drawer component but instead of using the svg-icons provided by the Kendo-UI I would like to use Font Awesome icons. Is that possible?

Thanks,

Greetings,

Bernd

[Bernd]

Omg... I just found the solution myself. That was easy... :-)

So for anyone who likes to do something similar:

You have to define the SVGIcon from Font Awesome like this (you can get the svg code from Font Awesome):

import { SVGIcon } from '@progress/kendo-react-common';

const userGroupIcon: SVGIcon = {
    name: 'userGroup',
    content:
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0H21.3C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3H405.3zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352H378.7C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7H154.7c-14.7 0-26.7-11.9-26.7-26.7z"/></svg>',
    viewBox: '0 0 640 512',
  };

And then you can define your drawer items like this:

  const items: DrawerItemProps[] = [
    ...
    {
      text: "User group",
      svgIcon: userGroupIcon,
      route: "your Route",
    },
   ...
  ];

Greetings,

Bernd

 

[Jyri]

Hi,

As a beginner I also battled with this. I think following works nicely and you don't need to make your own variables for the icons, just use the fa given names. Maybe someone knows even better solution?

import { faCog, type IconDefinition } from '@fortawesome/free-solid-svg-icons';
 ...
  function faIconToKendoSvgIcon(faIcon: IconDefinition): SVGIcon {
  return {
    name: faIcon.iconName,
    content: `<path d="${faIcon.icon[4]}" />`,
    viewBox: `0 0 ${faIcon.icon[0]} ${faIcon.icon[1]}`
  };
}
...
const items = [
    { text: 'Home', svgIcon: faIconToKendoSvgIcon(faCog) , selected: true, route: '' },
];

 

Cheers,
Jyri

[Bernd]

Wow, this is great! I'll definitely use this instead of the solution I posted above. Thanks!

[Bernd]

Hey @Jyri, I have a question. With Font Awesome there are the styles for the sizes like fa-sm, fa-xl and so on. If I use the function mentioned above, how would you then include these size options? For example if I use a Kendo Button with the svgIcon atribute and handle it like this:

<Button svgIcon={faIconToSvgIcon(faGear)} />

 

How would you then specify the size parameter? Any idea?