无法使用 Vite 作为 ReactComponent 导入 SVG

JEd*_*dot 23

利用vite-plugin-svgr

添加SVGR到项目

yarn add -D @honkhonk/vite-plugin-svgr

添加SVGR要邀请的插件vite.config.js

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

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

通过添加svg 的导入指令App.tsx将 SVG 作为 React 组件导入：?ponent

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

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

您可以在react-svgr./docs/ecosystem/#articles找到有关SVGR的更多信息

小智 7

任何人对接受的答案有疑问，请尝试此包中描述的解决方案： https ://npmjs./package/vite-plugin-svgr

import { ReactComponent as Logo } from './logo.svg'

出于某种原因，我无法使用接受的答案进行构建