Why no to put svg support in the library?

[ivanafanasyeu]

Exmplain me someone, using svg as icons is a great practice, even React has

import {ReactComponent as LogoIcon} from "./name.svg"

Why:

import { render } from 'solid-js/web';

function HelloWorld() {
  const name = "Solid";
  const svg = (
    <svg height="300" width="400">
      <defs>
        <linearGradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%">
          <stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)" />
      Sorry but this browser does not support inline SVG.
    </svg>
  );

  return (
    <>
      <div>Hello {name}!</div>
      {svg}
    </>
  )
}

Is working, and the next code is not?

import icon from '@assets/icons/logo.svg';

const Icon = () => {
	return icon
};

export const Header = () => (
	<header data-testid="header">
			<Icon />
	</header>
);

Using svg in images as src is complete bullshit. And it's so common case, something I don't know about svg? It's just html, why I can't import it into the solid jsx?

[atk]

To be precise, react doesn't have that ability by itself. Whatever build chain you use has a plugin to do that.

There is https://github.com/jfgodoy/vite-plugin-solid-svg to allow importing SVG files as solid components. If you add it to your build chain, it should work similarly.

[ivanafanasyeu]

I'm using Solid in Astro, and it's not an option there. Comp is not a function returns with this plugin.
Plus it would be nice to have some native solution. Or maybe someone knows why non of the current frameworks supports svg normally

[atk]

I'm using Solid in Astro...

That is a whole different case. The one that needs to support SVG components in this case is Astro, and it already does, if you add ?raw to the import, .e.g. import Logo from "@assets/icons/icon.svg?raw" and then <Fragment set:html={Logo} />.

Solid.js is just the part that manages state and rendering. Imports are handled by whatever build chain you are using, whereas Astro comes with a build chain already.

[ivanafanasyeu]

Yes, if it would be the Astro component. Asto has astro-components for it, But I want that in solid.
Using Astro fragment is not possible inside Solid components, it will give the same errors:

import LogoIcon from '@src/shared/assets/icons/logo.svg?raw';
import { Fragment } from 'astro/jsx-runtime';

export const Header = () => (
	<header data-testid="header">
			<Fragment set:html={LogoIcon} />
	</header>
);



//JSX element type 'Fragment' does not have any construct or call signatures
// and 
// Comp is not a function

[atk]

You could also use a span with innerHTML instead of an Astro fragment to the same effect. Just make sure nobody can change your SVG to inject dangerous code.

[ivanafanasyeu]

I understand. But in that case I have div around svg, which I don't need. Unnecessary nested structure.

[atk]

You could manually do what the plugin does and wrap the SVG code in template (from solid-js/web) and call The return value in your component.

[mrchantey]

Yep this is the solution I arrived at, same situation needing svg inside solid/astro. I just have a cli command that I run whenever changing the svg to wrap it in a solid component.

export async function svgToSolid(path: string, name: string) {
  const text = await fs.promises.readFile(path)
  const svg = text.toString()
    .replace(inkscapeHeader, '')
    .replace(/<svg/, '<svg {...props}')
  const component = `
    import { type JSX } from 'solid-js/jsx-runtime'
    export const ${name} = (props: JSX.IntrinsicElements['svg'] = {}) => {
      return (${svg})
    }
  `
  await fs.writeFile(path.replace('.svg','.tsx'), component)
}

[vasily-polonsky]

Hey @mrchantey , wanted to use with RSpack, havent found anything about svg as a component for solind in RSpack. Then found trick you posted, thanks, will try to do the same. But would be really nice to have built-in solution