No faces by default

[chrismatheson]

Hi, First of all, thanks a ton for this. I love the idea of adding a little fun to my admin dashboard with these identicons.

Im using a bog standard create-react-app setup and importing the library with import Identicons from '@nimiq/identicons';

then in my code I have the following little component

function Provenance({ id }) {
    const [value, setValue] = useState();
    const [state, copyToClipboard] = useCopyToClipboard();
    useMemo(() => (id) ? Identicons.toDataUrl(id).then(setValue) : '', [id]);

    if (!id || !value) {
        return null;
    }

    if(state.value) {
        id += ' [copied]';
    }

    return <Tooltip title={id} onClick={() => copyToClipboard(id)}>
        <img alt={`ProvenanceId is ${  id}`} style={{ height: '4rem' }} src={value}/>
    </Tooltip>;
}

however the identicons only seem to be showing the background

Is this a digital right thing or something? so I need to provide my own set of assets?

[nghianguyen119]

Hi,

You have to download identicons.min.svg and set the path for Identicons.
Something like:
Identicons.svgPath = './static/identicons.min.svg';

Hi, First of all, thanks a ton for this. I love the idea of adding a little fun to my admin dashboard with these identicons.

Im using a bog standard create-react-app setup and importing the library with import Identicons from '@nimiq/identicons';

then in my code I have the following little component

function Provenance({ id }) {
    const [value, setValue] = useState();
    const [state, copyToClipboard] = useCopyToClipboard();
    useMemo(() => (id) ? Identicons.toDataUrl(id).then(setValue) : '', [id]);

    if (!id || !value) {
        return null;
    }

    if(state.value) {
        id += ' [copied]';
    }

    return <Tooltip title={id} onClick={() => copyToClipboard(id)}>
        <img alt={`ProvenanceId is ${  id}`} style={{ height: '4rem' }} src={value}/>
    </Tooltip>;
}

however the identicons only seem to be showing the background

Is this a digital right thing or something? so I need to provide my own set of assets?

[fricoben]

Hi ! I have the same issue. qsd

`import Identicons from "@nimiq/identicons";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

export default function Home() {
const router = useRouter();
const [dataUrl, setDataUrl] = useState();
const tokenId = router?.query?.tokenId;
Identicons.svgPath = "./public/identicons.min.svg";

useEffect(() => {
async function getDataUrl() {
const dataUrl = await Identicons.toDataUrl("11231");
return dataUrl;
}
getDataUrl().then((value) => setDataUrl(value));
}, []);

return ;
}`

the identicons file is in my public folder. When I try with other folders or just let the default folder in node modules, I have the same issue.

Can you help me @nghianguyen119 ? Thanks.