CODEWITHSUNDEEP
reactjsprimereact
marifkind
marifkind

Reputation: 125

Use Custom Image for PrimeReact Data Tree Icon

I'm using the Data Tree component from PrimeReact, docs linked below. The tree component takes in an object with fields defined as such

const data = [
    {
        "key": "0",
        "label": "Documents",
        "data": "Documents Folder",
        "icon": "pi pi-fw pi-inbox",
        "children": [{
            "key": "0-0",
            "label": "Work",
            "data": "Work Folder",
            "icon": "pi pi-fw pi-cog",
            "children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
        },
        {
            "key": "0-1",
            "label": "Home",
            "data": "Home Folder",
            "icon": "pi pi-fw pi-home",
            "children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
        }]
    }
]

called as such

<Tree value={data} />

The icon attribute determines the symbol rendered next to the label tag. I want to use my own .png in place of the icons available. I would initially try to add an img tag but this does not seem to work. If anymore information is needed please let me know.

https://www.primefaces.org/primereact/#/tree

Upvotes: 1

Views: 1152

Answers (1)

Anish Arya
Anish Arya

Reputation: 432

try using css. In your css file:

youricon{
  background-image: url('local-url');
}

So it goes like this: 

const data = [
    {
        "key": "0",
        "label": "Documents",
        "data": "Documents Folder",
        "icon": "youricon",
        "children": [{
            "key": "0-0",
            "label": "Work",
            "data": "Work Folder",
            "icon": "youricon",
            "children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
        },
        {
            "key": "0-1",
            "label": "Home",
            "data": "Home Folder",
            "icon": "youricon",
            "children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
        }]
    }
]

On a related note, try using icons which are easily available like FontAwesome, FeatherIcons, Octicons. If you are using primereact, It's updated version has its own icons primeicons.

You need to install it first using: npm install primeicons --save .

You can get more details here: https://www.primefaces.org/primereact/#/icons

Upvotes: -1

Related Questions