React-konva. Dynamic import SVG

Question

I have a folder with SVG. I need to dynamically add those SVG on Konva's stage. I try to use this component. But it does not work.

const URLImage = (name) => {
  const [image] = useImage(`../images/svg/${name}.svg`);
  return <Image image={image} />;
};

It only works if i do common import:

import mySvg from '../images/svg/mySvg.svg';
....
const [image] = useImage(mySvg);

So what should i do? =)

score 1 · Answer 1 · answered Jul 18 '20 at 17:10

The first code you use will work just fine if you place your images inside a static or public folder. I don't know what bundler you are using, but many of them (parsel, create-react-app, etc) have a special folder for static files.

useImage(url) is not importing a file like in the modules system. In just downloading image from the network address.

As I know import mySvg from '../images/svg/mySvg.svg'; is non-standard, but very popular way of importing static file. Inside mySvg variable you will have an URL to the image that bundler will prepare for you.

I use create-react-app and know about a public folder. But i thought there was probably some other way to import images. It looks like I'll have to use 'import from' eventually. — Ruslan Neck, Jul 18 '20 at 20:24

score 0 · Answer 2 · answered Jul 04 '22 at 17:08

(Visual representation of @lavrton's answer)

import React, { useState } from 'react'
import { Stage, Layer, Rect, Text, Image } from 'react-konva'
import useImage from 'use-image'

export default function KonvaBoard() {
let initState = {
    isDragging: false,
    x: 50,
    y: 50,
}

const [state, setState] = React.useState(initState)

const convertImage = (imageUrl, index) => {
    const [img] = useImage(imageUrl[0])
    return (
        <Image
            key={index}
            image={img}
            width={100}
            height={100}
            x={imageUrl[1].x}
            y={imageUrl[1].y}
            draggable
        />
    )
}

const logos = [
    ['../assets/icons/angular.svg', { x: 10, y: 10 }],
    ['../assets/icons/css3.svg', { x: 130, y: 30 }],
    ['../assets/icons/flutter.svg', { x: 240, y: 40 }],
]

return (
    <div style={{ textAlign: 'center', minHeight: '90vh' }}>
        <div>KONVA BOARD</div>
        <Stage width={window.innerWidth} height={window.innerHeight}>
            <Layer>
                {logos.map((logo, index) => {
                    return convertImage(logo, index)
                })}
            </Layer>
        </Stage>
    </div>
)
}

React-konva. Dynamic import SVG

2 Answers2