reactjstypescriptsvgvitesvgr

my SVG assets is missing after running vite build

i have a vite & react project , i use svgr@rollup to use SVGs as react components

when i run build , only png images in the src/assets folder is found in dist/assets, no SVG files.. i want to deploy it on vercel or whatever but i don't know what's wrong.

this is my folder structure:


|-- index.html
|-- ... other config files
|-- package.json
|-- vite.config.ts
|-- tsconfig.json
|-- src
|   |-- App.tsx
|   |-- ...
|   |-- vite-env.d.ts
|   |-- assets
|       |-- avatar-1.png
|       |-- avatar-2.png
|       |-- avatar-3.png
|       |-- ... .png
|       |-- Social-X.svg
|       |-- ... .svg
|       |-- Social-Pin.svg

my vite.config.ts:

import path from "path";

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import svgr from "@svgr/rollup";

export default defineConfig({
  plugins: [
    react(),
    svgr({
      exportType: "named",
      ref: true,
      svgo: false,
      dimensions: false,
      typescript: true,
    }),
    
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

i use them like: import { ReactComponent as ArrowRight } from "@/assets/arrow-right.svg"

Solution

  • Currently, how Vite works is that for assets smaller than 4KiB it inlines them as base64 to avoid making extra http requests. So you can go ahead to deploy to whatever hosting provider and it should work automatically. However, if you absolutely need to include the file(s) in the build; In your vite.config.js file, add the following code:

    export default defineConfig({
  build: {
    assetsInlineLimit: 0
  },
});

    Reference: https://vite.dev/config/build-options.html#build-assetsinlinelimit