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

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

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

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

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

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

安装

npm install vite-plugin-svgr

配置

vite.config.js

import svgr from "vite-plugin-svgr";

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

使用

import Logo from "./logo.svg";

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