react 实战【svg 图片】插件 vite-plugin-svgr 的使用

朝阳392026-04-28 8:20

传统方式，svg 图片通过 import 导入使用

ts 复制代码

import logo from './logo.svg';  // 返回字符串 URL
<img src={logo} />

改用插件 vite-plugin-svgr 后，svg 图片将作为 react 的组件直接使用

ts 复制代码

import Logo from './logo.svg'; // 返回 React 组件

<Logo fill="red" className="w-10 h-10" />

安装

c 复制代码

npm install vite-plugin-svgr

配置

vite.config.js

ts 复制代码

import svgr from "vite-plugin-svgr";

ts 复制代码

plugins: [react(), svgr()],

使用

c 复制代码

import Logo from "./logo.svg";

function App() {
  return (
    <div>
      <Logo className="w-10 h-10" fill="blue" />
    </div>
  );
}