Did anyone find an easy way to add an inline SVG t...

# javascript

[Marc Knaup]

Did anyone find an easy way to add an inline SVG to Kotlin React?

[turansky]

As string?

[altavir]

As far as I know, no simple way. https://stackoverflow.com/questions/48596379/how-to-use-svg-with-kotlin-react

[Big Chungus]

Is This easy enough?

[altavir]

It's not react 🤷‍♂️

[Big Chungus]

Had that in React as well

[Big Chungus]

The concept is the same

[Marc Knaup]

No, I do need an SVG element.

[Big Chungus]

Well webpack only loads a svg url for you. You can use it as you want from there

[Big Chungus]

Or do you mean declaring svg in kotlin with no backing .svg file?

[Marc Knaup]

So how do I get the SVG file into the SVG tag?
The SVG tag seems to have no useful functions in Kotlin React

[Big Chungus]

Can't you just use img tag and pass svg url into src?

[altavir]

There is answer to that in SO question I've posted earlier

[Marc Knaup]

@Big Chungus No, you can't apply CSS to SVGs in an IMG

[Big Chungus]

Ah, good point. Then add your attrs/child tags as customs. Kotlunx.html allows for arbitrary dom trees

[Marc Knaup]

@altavir Yeah, I'm afraid I have to manually convert every single SVG into Kotlin, element by element and attribute by attribute 😔

[Big Chungus]

Shouldn't be too hard writing your own kotlinx.html extensions for most common attrs or children to tidy things up a bit

[Marc Knaup]

Maybe we need .ktx files at some point like jsx/tsx 😁

[Big Chungus]

Not sure how that'd help?

[Marc Knaup]

You can just paste SVG markup into Kotlin code and it works just fine 🤔

[Big Chungus]

Ah, you mean webpack jsx plugin for kotlin

[Big Chungus]

Yeah, I see it being useful for migrations

[Marc Knaup]

It's useful for putting any markup into your project that's not supposed to be changed a lot anyway. Like SVGs, embeds or whatever.

[Marc Knaup]

So you don't have to convert it to Kotlin

[Marc Knaup]

And can also copy it out of the Kotlin project again and even put it in an SVG file

[Big Chungus]

Could probably be achieved with kotlin compiler plugin or annotation processors

[Big Chungus]

It's a matter of parsing html and generating kreact code

[Marc Knaup]

AP won't work. Compiler plugin probably neither.
Afaik compiler plugins are not allowed to add new syntax.
Maybe disguised as a multi-line string, but I'd consider that a workaround

[Big Chungus]

Then some separate tool to parse ktx and generate kt files

[Big Chungus]

The main problem is how to keep kt interop in kts itself

[Marc Knaup]

That would need additional IDE and tooling support and a lot of work

[Big Chungus]

Noone is saying it's supposed to be easy 😀

[Big Chungus]

For MVP just being able to drop HTML snippets in ktx file and have kreact components generated would be useful enough. Then you don't need any more tooling, just register ktx files as html files in intellij

[Marc Knaup]

I think in that case an IDE plugin would make more sense

[Marc Knaup]

Like pasted Java code is automatically converted to Kotlin

[Big Chungus]

Agreed. Now we only need to find someone that knows how to write IDEA plugins 😀

[corneil]

You can update SVG if you load it as an object instead of img. However it seems on Mobile Safari those changes don't always take effect.

[Marc Knaup]

I didn't know that object is still a thing 😅
But good idea. I'd have to check browser support first.

[louiscad]

The folks at #data2viz made a kotlinx.html converter that takes html code (including svg I assume) while you paste it in Kotlin code, and paste it as kotlinx.html code. Like when pasting Java code. Does it work for you @Marc Knaup?