I have used react-jdenticon
Tried to add border radius but it seems that it can not take the css styling on svg or canvas element.
Any suggestions for this?
import React from 'react';
import Jdenticon from 'react-jdenticon';
function Example(){
return(<Jdenticon size="48" value="Hello World" />);
}
If you want to customize the css styling on SVG images. I would suggest you to use the jdenticon package for this purpose. Using the jdenticon build a custom component with the following code. Now you can add the CSS classes or any styling to SVG element which you wants to add.
import React, { useRef, useEffect } from 'react';
import jdenticon from 'jdenticon';
const Jdenticon = ({ value = 'test', size = '100%', className }) => {
const icon = useRef(null);
useEffect(() => {
jdenticon.update(icon.current, value);
}, [value]);
return (
<div>
<svg data-jdenticon-value={value} height={size} ref={icon} width={size} className={className} />
</div>
);
};
Now for the usage, you can use it in this way.
function Usage(){
return(<Jdenticon size="48" value="Hello World", className="custom-name" />);
}
The above solution works for jdenticon package
but is there any solution for react-jdenticon maybe we can extend
<Jdenticon size="48" value="Hello World" 'pass classname here'/>