SolidJS•16mo ago

importing static assets (telling vinxi/vite about stuff other then png's)

Every other month, I feel like i'm facing this again. How to import static assets in solidjs? The docs https://docs.solidjs.com/solid-start/building-your-application/static-assets say:

Vite provides a way to import assets directly into your Solid components:

import logo from "./solid.png";

import logo from "./solid.png";

If I try the same with other stuff like *.svg or *.txt the import fails. I did have a an older solidjs project where I could do

import sprite from '../../assets/img/sprite.svg';

import sprite from '../../assets/img/sprite.svg';

In the old project I did this via

// vite.config.mts

import solidSvg from 'vite-plugin-solid-svg'

export default defineConfig({
  plugins: [suidPlugin(), solidPlugin(), solidSvg({ defaultAsComponent: false })],
 ...
})

// vite.config.mts

import solidSvg from 'vite-plugin-solid-svg'

export default defineConfig({
  plugins: [suidPlugin(), solidPlugin(), solidSvg({ defaultAsComponent: false })],
 ...
})

Is there a way we can still do this with solidjs/start? Since we don't have a vite.config anymore?

9 Replies

Brendonovich•16mo ago

For .txt try adding ?raw to the path For the svg plugin add it to vite.plugins in your config

BersaelorOP•16mo ago

thank you for reminding me of ?raw, it doesn't seem to work though

Brendonovich•16mo ago

It should work at runtime, you might need to add your own types

BersaelorOP•16mo ago

ah, it seems it may work after all, just typescript throwing errors I see the solidSvg you would put in the vite section of

// app.config.ts

export default defineConfig({
  ssr: false,
  server: {
    static: true,
    preset: "static"
  },
  vite: {
    plugins: [suidPlugin() as PluginOption],

// app.config.ts

export default defineConfig({
  ssr: false,
  server: {
    static: true,
    preset: "static"
  },
  vite: {
    plugins: [suidPlugin() as PluginOption],

Brendonovich•16mo ago

Yeah

intelligent-worker-probe•16mo ago

I put all my static files in the public/ folder and reference them using absolut paths (folder = public/imgs/img.png, link = /imgs/img.png). I wonder if it is better or worse vs using the static import feature from vite?

BersaelorOP•16mo ago

yeah, I used to do most imports via vite but now I'm also mostly using the public folder..

Tjerk•16mo ago

Hey there 👋 How did you solve this yet ? May I know ? I'm facing the issue that if i use vite-plugin-solid-svg my app breaks with

BersaelorOP•16mo ago

try with the above comment on ?raw maybe that works typescript will still complain but in my build it worked

Gaming

Programming

importing static assets (telling vinxi/vite about stuff other then png's)

Did you find this page helpful?