Vite环境下的SVG文件使用

常规情况下，我们使用svg文件需要借用 <img />标签，例子如下

<img src="test.svg" />

而使用 <img />标签后，将无法利用CSS中的字体属性来修改svg的内容样式，例如颜色，文本大小等等，直接把svg写入.vue或.tsx文件中又会影响代码的美观和阅读性。

方案

利用 vite-plugin-svgr插件，实现直接使用import的svg文件作为标签名。

安装

npm i vite-plugin-svgr -D

配置

// vite.config.ts

import { defineConfig } from 'vite'
import svgr from 'vite-plugin-svgr'

export default defineConfig({
  ...
  plugins: [
    svgr(),
    ...
  ]
  ...
})

使用

// Test.tsx
import Svg from 'test.svg'

const Test = () => {
  return (
    <div>
      <Svg className="testSvg"/>
    </div>
  )
}

如此便可直接使用svg文件作为标签