实现一个vite插件导入SVG为组件并优雅的修改颜色

最近偶然间看到了antfu的博客，里面介绍了一种使用蒙版去修改SVG颜色的办法，所以我突发奇想，如果实现一个可以将SVG直接导入为组件的vite插件，那么不就能非常优雅的使用Props实现修改单色SVG的颜色和大小了吗？

说干就干

于是有了vite-plugin-vue-svgs 和 vite-plugin-react-svgs这两个插件。

项目地址：Github

说一下实现思路，在vite的load阶段将svg文件读入，并判断其是否含有currentColor字段，如果含有这个字段，那么大概率这个SVG是单色的，那么我们可以将其放入不同的组件代码中，对其进行不同的操作，进行编译。

使用

React

1.安装

npm i vite-plugin-react-svgs -D

yarn add vite-plugin-react-svgs -D

pnpm i vite-plugin-react-svgs -D

2.配置vite.config.ts

import { createSvgIconsPlugin } from 'vite-plugin-react-svgs';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-react';

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

3.使用

 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;

4.效果

Vue

1.安装

npm i vite-plugin-vue-svgs -D

yarn add vite-plugin-vue-svgs -D

pnpm i vite-plugin-vue-svgs -D

2.配置vite.config.ts

import { createSvgIconsPlugin } from 'vite-plugin-vue-svgs';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

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

3.使用

<script setup lang="ts">
import VueSvg from './assets/vue.svg?component';
import RainSvg from './assets/rain.svg?component';
</script>

<template>
    <div class="container">
    <RainSvg color="blue" height="5em" width="5em" />
    <VueSvg width="10em" height="10em" />
    <RainSvg color="#f0f0f0" height="5em" width="5em" />
    </div>
</template>

4.效果

在Vue中的实现不是那么的优雅，如果大家有什么好的建议可以给我反馈。