Support for svg element in icon properties

[raDiesle]

[x ] feature request

Current behavior
icon attribute for PrimeReact components expect css class names only, such as for Menubar or Paginator icons

Expected behavior
To be able to pass React element type, such as FontAwesome React component element, as all modern icon libraries are based on svgs

• PrimeReact version:
  3.1.7

[mertsincan]

I'll work on it and get back to you.

[raDiesle]

Will you also add support for element for <Button as well?
I just seems like you added support for css icons in latest release, but not for element.
Would be great!

[raDiesle]

^^ is it in the pipeline or not?

[raDiesle]

ping

[medihack]

I am evaluating possible React UI libraries for a new project and PrimeReact seems to be such a good fit (much better IMHO than all those other overhyped React UI libraries). Unfortunately, the missing SVG icon support is quite a dealbreaker. I really hope that this will be integrated.

[mertsincan]

Hi all,

Sorry for the delayed response. I've added templating support to most components. In this way, users will be able to customize icons and other default structures as they wish. For example;
For Button;

<Button>
    // you can use svg icon or icon library
   <Home size="24" />
   <span>Test</span>
</Button>

For all Menu components, Users use 'template' option; #1783
For row editor icons on DataTable; #1788

I made such improvements to some components like this according to user requests. Therefore, it will be easier to make such improvements if we go component-focused. In which components do you want to customize the icons?

[medihack]

Thanks for the very fast response and help. I just made a quick try to get an SVG component to the left side in an input field, but failed:

<span className="p-input-icon-left">
          <MySVGIcon />
          <InputText
            value={value3}
            onChange={(e) => setValue3(e.target.value)}
            placeholder="Search"
          />
</span>

I also tried some Ant stuff and there you wrap the SVG in their Icon component and everything seems to work magically (like the right size for the respective component). This was quite handy (but Ant has other problems).

[medihack]

Just tried it with addons and this works quite well :-)

<div className="p-inputgroup">
    <span className="p-inputgroup-addon"><MySVGIcon /></span>
    <InputText placeholder="Price" />
    <span className="p-inputgroup-addon">.00</span>
</div>

But couldn't get it to work with the button example :-(
https://codesandbox.io/s/eager-lederberg-yvkwl?file=/src/demo/ButtonDemo.js

[mertsincan]

Hi @medihack,

But couldn't get it to work with the button example :-(

This issue is related to display: inline-flex and SVG combination. Please try;

<button style={{display: 'inline-flex'}}>
     <MySvgIcon />
     <span>Test</span>
</button>

I think you can change your svg code;

const MySvgIcon = (props) => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      width={props.size}  // Please add this line
      height={props.size}  // Please add this line
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
      />
    </svg>
  );

...

<Button>
     <MySvgIcon size="16" />
     <span>Test - 1</span>
</Button>

<Button>
      <span className="p-d-flex p-ai-center p-dir-row">
           <MySvgIcon size="1rem" />
           <span>Test - 2</span>
       </span>
</Button>

...I just made a quick try to get an SVG component to the left side in an input field, but failed:

• I'll add a special class such as these issues.

[mertsincan]

Added svg support and custom classes for input icon alignment. Exp;

<span className="p-input-icon-left p-input-icon-right">
    <MySvgIcon size="1em"/>
    <InputText />
    <MySvgIcon size="1.3em"/>
</span>

<span className="p-input-icon-left p-input-icon-right">
    <span className="p-input-prefix">
        <MySvgIcon size="1em"  />
    </span>
    <InputText />
    <span className="p-input-suffix">
        <MySvgIcon size="1.3em"  />
    </span>
</span>

Best Regards,

[mertsincan]

Fixed for Button issues. I'll make some changes for Paginator. You can track it at #1839

Best Regards,

[mertsincan]

Hi,

Ready to create your own Paginator with PrimeReact. 📌 Full Customization and Control

Demo: https://youtu.be/4wkP4P6IuuA

Best Regards,