3

I was wondering if it is somehow possible to use the icons from the react-icons package in PrimeReact, since the primeIcons package unfortunately does not contain all the icons I need for my project.

I haven't found a solution for this, because react-icons exports the icons as components and PrimeReact gets the icons assigned by string.

user17145524
  • 227
  • 4
  • 10
  • 1
    I don't know about React Icons but I use FontAwesome Icons in my PrimeReact project no problem. PrimeReact has full support for FontAwesome. – Melloware Mar 21 '22 at 12:03
  • 1
    @Melloware Thanks for your comment, it works now, i simply needed to use it as an inside element and not as a class! – user17145524 Mar 21 '22 at 20:27

2 Answers2

3

To change say search icon in a button

you can access https://react-icons.github.io/react-icons/search?q=fasearch

right click on the icon and inspect the elements, copy the SVG for the same from the developer console
create say search.svg file and paste the svg for fasearch in the file add below class in say root.css file

.pi-search:before {
  content: url(search.svg) !important;
}

This will change the search icon

Laxman
  • 2,643
  • 2
  • 25
  • 32
  • This is a nice approach, never thought about that! Thankl you for showing it! – user17145524 Apr 05 '22 at 16:07
  • there is one limitation in this approach.. since url(..) function converts the svg to image, I am facing issues in adding theme specific colour to the icon. e.g. light colour for the icon if the background is dark and vice-versa... If you can find some solution for that plz let me know :) – Laxman Apr 06 '22 at 06:48
  • If I find out anything I will let you know of course! – user17145524 Apr 09 '22 at 20:14
1

This is a example

import { FaWheelchair, FaBolt, FaCarAlt, FaCar } from "react-icons/fa";

...

return( 
<div className="flex card-container overflow-hidden ">
              <div className="flex-none flex align-items-center justify-content-center  p-1">
                            <TfiWheelchair />
                            <p className="text-lg">Wheelchair</p>
                        </div>
                    </div>);
SelimSezer
  • 29
  • 6