Vite-plugin-react-svgs NPM

vite-plugin-react-svgs

English | 简体中文

优雅的在 React 中使用 SVG

🌟 导入 Svg 图标为 React 组件
🌈 使用 Props 优雅的修改 SVG 的颜色与大小。

安装插件

安装

npm i vite-plugin-react-svgs --save-dev

yarn add vite-plugin-react-svgs -D

pnpm i vite-plugin-react-svgs -D

Vite 设置

添加以下代码到 vite.config.js / vite.config.ts 文件中:

import { createSvgIconsPlugin } from 'vite-plugin-react-svgs';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    react(),
    createSvgIconsPlugin({
      defaultImport: 'component',
    }),
  ],
});

TS 类型文件 (optional)

如果你正在使用 Typescript，你需要额外的类型文件去使 Typescript 可以准确地理解导入的 SVG 文件。

/// <reference types="vite-plugin-react-svgs/index" />

或者

declare module '*.svg?component' {
  import { FunctionComponent } from 'react';
  const src: FunctionComponent<{ width?: string, height?: string, color?: string }>;
  export default src;
}

declare module '*.svg?url' {
  const src: string;
  export default src;
}

declare module '*.svg?raw' {
  const src: string;
  export default src;
}

declare module 'vite-plugin-react-svgs' {
  import { Plugin } from 'vite';
  function createSvgIconsPlugin(options?: {
    defaultImport?: 'raw' | 'component' | 'url';
  }): Plugin;
  export default createSvgIconsPlugin;
}

使用插件

import ReactSvg from './assets/react.svg?component';
import RainSvg from './assets/rain.svg?component';
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="container">
      <RainSvg color="blue" height="5em" width="5em" />
      <ReactSvg width="10em" height="10em" />
      <RainSvg color="#f0f0f0" height="5em" width="5em" />
    </div>
  );
}

export default App;

预期的结果: