如何在 Vite 搭建的 React 项目中使用 svg, 并可自定义颜色变化我们经常会遇到 UI 切出的 icon，

我们经常会遇到 UI 切出的 icon，在鼠标hover 等激活状态的颜色与未激活状态存在颜色的差异，从而可以提醒用户制定的操作。这个一方面可以通过切出两种不同颜色的 image 图片，在hover 状态来控制图片的切换，但是这种方式不太灵活，如果存在颜色调整，还需要UI进行重新切图，就比较麻烦；此时的话就可以考虑使用 svg 来替代。

下面就结合 vite4.0 + react18来做个示例（以下为初步尝试出来的实现，非常初级）

安装 vite-plugin-svgr

npm install --save-dev vite-plugin-svgr

在 vite.config.ts 配置文件中注册已安装的vite-plugin-svgr插件

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

export default defineConfig({
   plugins: [react(), svgr({
    include: "**/*.svg?react",
  })],
});

在 ts.config.json 中新增配置

{
  "compilerOptions": {
    "types": ["vite-plugin-svgr/client"]
  }
}

在 iconfont 上下载 svg图片，修改 fill 属性的填充色为 currentColor，并删除 svg 元素的width 和hight 的设置

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704857253040"
                                                                                                    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4255"
                                                                                                    xmlns:xlink="http://www.w3.org/1999/xlink" >
  <path
    d="M789.333333 343.466667c-12.8 0-21.333333 8.533333-21.333333 21.333333v490.666667c0 23.466667-19.2 42.666667-42.666667 42.666666H298.666667c-23.466667 0-42.666667-19.2-42.666667-42.666666V362.666667c0-12.8-8.533333-21.333333-21.333333-21.333334s-21.333333 8.533333-21.333334 21.333334v490.666666c0 46.933333 38.4 85.333333 85.333334 85.333334h426.666666c46.933333 0 85.333333-38.4 85.333334-85.333334V362.666667c0-10.666667-10.666667-19.2-21.333334-19.2zM915.2 234.666667H746.666667V170.666667c0-46.933333-38.4-85.333333-85.333334-85.333334H362.666667c-46.933333 0-85.333333 38.4-85.333334 85.333334v64H106.666667c-12.8 0-21.333333 8.533333-21.333334 21.333333s8.533333 21.333333 21.333334 21.333333h808.533333c12.8 0 21.333333-8.533333 21.333333-21.333333s-8.533333-21.333333-21.333333-21.333333zM320 170.666667c0-23.466667 19.2-42.666667 42.666667-42.666667h298.666666c23.466667 0 42.666667 19.2 42.666667 42.666667v64H320V170.666667z"
    fill="currentColor" p-id="4256"></path>
  <path
    d="M640 704V364.8c0-12.8-8.533333-21.333333-21.333333-21.333333s-21.333333 8.533333-21.333334 21.333333V704c0 12.8 8.533333 21.333333 21.333334 21.333333s21.333333-10.666667 21.333333-21.333333zM426.666667 704V362.666667c0-12.8-8.533333-21.333333-21.333334-21.333334s-21.333333 8.533333-21.333333 21.333334v341.333333c0 12.8 8.533333 21.333333 21.333333 21.333333s21.333333-10.666667 21.333334-21.333333z"
    fill="currentColor" p-id="4257"></path>
</svg>

在组件中引用 svg 实现渲染，设置导出的 svg Icon的宽度，从而实现调整 svg 图片的大小，同时也在 hover 状态下改变颜色，进而实现 svg 图片颜色的变化；

import DeleteIcon from '@/svg/delete.svg?react';
import './index.less';
export default () => {
  return <div className="tool-item">
    <DeleteIcon width={17} color="inherit"
      onClick={handleDelete} />
  </div>
}

index.less

.tool-item {
  color: #b4b8c5;
  &:hover {
    color: #1677ff;
  }
}

效果如下

这样的话我们就可以根据自己的需要随意调整 svg 的颜色和大小了