How to use svg imported from React Component with use-image in konva?

Question

I try import svg from Component but it's not working any way and it's not return any error. Same svg code imported from .svg file works good but i want to pass props to show in svg so i have to do this in this way. :)

Stamp.js

const Stamp = () => {
    return (
        <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
            <rect x="0" y="0" width="120" height="120" />
        </svg>
    );
};

export default Stamp;

Canvas.js

import useImage from 'use-image';
import Stamp from 'components/Stamp';

const Canvas = () => {
    const PlaceStamp = () => {
        const [image] = useImage(Stamp);
        return <Image image={image} x={position.x} y={position.y} />;
    };

    return (
        <Stage
            width={width}
            height={height}
            ref={konvaRef}
            onClick={() => {
                handleClick();
                IsDirty(true);
            }}
            onTap={() => {
                handleClick();
                IsDirty(true);
            }}>
            <Layer>
                {dirty && <PlaceStamp />}
            </Layer>
        </Stage>
    )
}

ryutaro kimura · Answer 1 · 2023-01-03T05:06:55.407

1

I tried to do the exact same thing. (And thanks for the opportunity to register an account on stack-overflow,haha)

I know this isn't a direct solution. You may have already looked into the following this.

I imported the from 'react-konva-utils' and embedded the as described in this official documentation and it worked.

<Html>
　　<XCircleIconGray />
</Html>

edited Jan 03 '23 at 05:06

answered Jan 03 '23 at 04:48

ryutaro kimura

11
2

score 1 · Answer 2 · answered Feb 09 '23 at 09:59

It think your code is correct. You should just add width and height properties on your Image tag to show the image on canvas, like this:

const PlaceStamp = () => {
    const [image] = useImage(Stamp);
    return <Image image={image} x={position.x} y={position.y} width={100} height={100}/>;
};

How to use svg imported from React Component with use-image in konva?

2 Answers2