import ReactLogo from  ./assets/react.svg?react 

<ReactLogo />

If you re using TypeScript, you ll also need to add the following at the very top of your file (before the import statements):

/// <reference types="vite-plugin-svgr/client" />

Update 2023

? Use vite-plugin-svgr

1. Add SVGR to the project

yarn Add vite-plugin-svgr

2. Register the plugin SVGR to vite in vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    svgr({ 
      svgrOptions: {
        // svgr options
      },
    }),
  ], 
})

3. In App.tsx import SVG as React Component :

import { ReactComponent as ReactLogo } from  ./assets/react.svg 

<ReactLogo />

Stackblitz Examples:

npm install @svgr/rollup -D

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

export default defineConfig({
  plugins: [react(), svgr()]
});

我从加拿大移民到维奥特,正面临这一问题,我采取了上述步骤,但没有为我工作。 我谈了Vite的正式文件,发现我需要补充。

 "types": ["vite/client"],

页: 1 json案,随后可以支持挖掘和 couple。

这一缩略语的最好部分是,你可以动态地进口 files鱼。 比如:如果你想用一个变数的名字进口一只雕像,那么你就可以这样做:

import importVars from "@svgx-dir:/path/to/directory";

export default function (props) {
  const MyIcon = importVars(props.iconName);
  return (
    <div>
      <MyIcon color="#FF5733" />
    </div>
  );
}

现在,你可以通过一个变量进口 甲壳体能动态进口。

我有同样的问题,但希望避免使用外部包裹。

我的解决办法是在src的目录下建立一个新的档案,并提及其类型——

src/vite-env.d.ts

内容:

/// <reference types="vite/client" />

资产等资产的进出口

import Logo from  ./logo.svg?react 

add ?react at the end of the asset path

// vite.config.js

import svgr from "vite-plugin-svgr";

export default {

  // ...

  plugins: [svgr()],

};

这是我的工作。

Package.json

{
    ...
    "devDependencies": {
        ...
        "@vitejs/plugin-react": "^4.2.0",
        "vite-plugin-svgr": "^4.2.0"
    }
}

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig(
    {
        ...
        plugins: [
            react(), 
            svgr()
        ]
    }
)

src/declaration.d.ts

/// <reference types="vite-plugin-svgr/client" />

以上是<代码>*.svg?react。 可见于<代码>tsc(Type式成像机),避免了<代码>进出口上的辛加错误。 只有在援引<代码>tsc(例如,进行打字)时,而不是在Vite(独立于<代码>tsc)的捆绑时,才会这样做。

You could also put the above <reference> directly in the .tsx files which import SVGs, but that would be less practical if you have many such files.

src/MyComponent.tsx

import MyImage from "../some/path/MyImage.svg?react";

页: 1

您现在应当能够将<条码>和>;MyImage />列入贵国联合X法典。

I might be late to the party. However, let me share just in case :D

我有问题在1个金字下找到所有装载选择。 因此,我带着一个把所有装载战略合并成一体的“万能”。 这里有<条码>邀请-plugin-react-rich-svg,可装上与这些档案相同的文件;

• Components with SVGR (*.svg?component)
• Data URL ("data:image/svg+xml;..."), ideal for inline importing on demand: (*.svg?url)
• Raw HTML string, ideal when you need the file as it is (*.svg?raw)
• Base64 encoded string, ideal if you need the file for networking purposes (*.svg?base64)