How to add border radius on react-jdenticon component?

Question

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" />);
}

Answer 1

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" />);
}

Answer 2

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'/>